Nesting and element types
« Previous: Common formatting tags | Next: Presentational HTML»
Nesting tags
You can put HTML elements within other elements, like this:
<p><strong>A well coded paragraph</strong></p>
Note that the tags are closed in the reverse order of the opening tags. This means that the tags are correctly nested, that is, the inner element is contained by the outer element, without overlap; by contrast, here is the wrong way:
<p><strong>A badly coded paragraph</p></strong>
However, you can’t just put any tag inside any other tag! For example, we can have <strong> inside <p> as above, but not <p> inside <strong>!
To understand what can go inside what, you need to understand the difference between...
Block and Inline Elements
HTML elements come in two distinct types: block and inline.
Block elements:
- take a whole line to themselves, and usually have a vertical margin above and below
- can contain other block elements as well as inline elements *
- Block elements include
<h1>,<p>,<ul>,<li>.
* Alas, there are a couple of exceptions to this rule: paragraphs and headings can only contain inline elements. This might seem like it’s getting a tad complicated, but it’s fairly logical really - a paragraph within a heading, or a heading within another heading, doesn’t really make much sense.
Inline elements:
- do not take up a whole line - only the amount of space the element content occupies
- can only contain other inline elements
- Examples of inline elements:
<a>,<img>,<strong>.
Strictly speaking, inline elements should be placed within other block elements,
not directly inside the <body> tag.
The most important thing to remember, though, is not to nest block inside inline.
Don’t pay too much mind to the difference in appearance between block and inline elements; this can easily be changed using CSS.
« Previous: Common formatting tags | Next: Presentational HTML»