UP | HOME

Block & Inline Elements

1. Notes

  • An inline element is only as wide as the content inside it.
  • Inline elements don’t create a line break before or after them as block-level elements do.
  • more infor.

2. Block Elements

DIV
Your general-purpose box
H1 … h6
All headings
P
Paragraph
UL, OL, DL
Lists (unordered, ordered and definition)
LI, DT, DD
List items, definition list terms, and definition list definitions
TABLE
Tables
BLOCKQUOTE
Like an indented paragraph, meant for quoting passages of text
PRE
Indicates a block of pre-formatted code
FORM
An input form

3. Inline Elements

SPAN
Your all-purpose inline element
A
Anchor, used for links (and also to mark specific targets on a page for direct linking)
STRONG
Used to make your content strong, displayed as bold in most browsers, replaces the narrower b (bold) tag
EM
Adds emphasis, but less strong than strong. Usually displayed as italic text, and replaces the old (italic) tag
IMG
Image
BR
The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level element.
INPUT
Form input fields like and
ABBR
Indicates an abbr. (hover to see how it works)
ACRONYM
Working much like the abbreviation, but used for things like this TLA.