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):
- Metadata content
- Flow content
- Sectioning content
- Heading content
- Phrasing content
- Embedded content
- Interactive content
- Form-associated content
- listed
- labelable
- submittable
- resettable