Block-Level & Inline HTML Elements

HTML 4.01 consists of 91 elements that tell the web browser about the webpage’s structure & appearance.

Structure Appearance
p b
h1 strong
table em
ul a
li img

Start with that idea in order to understand a key way to divide HTML elements: as either block-level or inline.

Block-level Inline
Describes structure Describes appearance
Begins on a new line Within a line
Defines large section of webpage Defines smaller section inside another
Can contain block-level & inline elements Can only contain inline elements
Ex’s: p, h1, ul, li, table Ex’s: a, b, em, font, img

As you’re coding, this distinction will be important. You can’t, for instance, put block-level elements inside inline elements. If you do, your code will not validate.

Mozilla Developer Network has nice pages that summarize the concepts of block-level & inline elements, along with a list of elements that go in each category.

HTML5

HTML5 changes the rules. For instance, it is now OK to wrap a header & several paragraphs, say, inside an anchor (for more on this particular case, see "‘Block-level’ links in HTML5" at HTML5 Doctor).

Further, as Mozilla Developer Network explains,

In HTML5, this binary distinction is replaced with a more complex set of content categories. The “block-level” category roughly corresponds to the category of flow content in HTML5, while “inline” corresponds to phrasing content, but there are additional categories.

The full list of content categories (for more info, see Mozilla Developer Network):

WebSanity Top Secret