The Two Kinds of Tag: Block & Inline

Broadly speaking, there are two ways tags used around text can display their textual content by default. They are often referred to as block tags and inline tags.

Block tags influence entire sections of content. <p> is a block tag: it specifies and sets apart an entire block of text. The heading tags <h1>…<h6> and <address> are also block tags. Visually, block tags will always render their content on separate lines: in other words, forcing a line break.

Inline tags influence a part of something without affecting the content immediately surrounding them. There would be little point that if every time we wanted to render text in italic, the browser forced the italicized text onto a new line. Instead, we want to render italic text together with normal text in the same line – that is, inline with the rest of the text. Inline tags include all of those listed in alternative text format elements above.

Several important final points must be added:

Inline tags must always be used in the context of block tags. For example, you cannot use <q> by itself to markup a quotation. Instead, it would typically be nested inside a <p> tag that provides a broader context:
1. <p><q>Once more unto the breach, dear friends</q>,
2. wrote Shakespeare.</p>
While there are exceptions, a good rule for basic text formatting is that block tags may not contain other block tags. While inline tags inside of block tags is perfectly okay:
<h1>The <em>Destiny</em> Corporation<h1>
This does not make any sense:
1. <p>This is a typical, and wrong-headed, attempt to make text
2. <h1>bigger</h1> in a paragraph</p>
This is also a common mistake:
1. <p><h1>Is this content a heading, or a paragraph? It can’t be both,
2. but that’s exactly what the markup surrounding it says.</h1></p>
The display property of a tag may be changed via CSS: that is, you can turn a tag that is block by default to display inline, and vice-versa. However, that possibility does not change the rules above, which still need to be followed.

Using HTML5, the W3C Validator doesn't seem to have a problem with inline elements that aren't inside a block element. A page with nothing between the body tags but a single 'a' link passes validation. I take it this is part of the 'loosening' of the HTML5 spec?

posted by Tony Downey 7 months ago

Dudley Storey That's correct, Tony. It's worth noting that forms are treated similarly in HTML5: you can put an <input> straight into the page without a <form> or <fieldset> around it and the code will validate fine under the new spec.

I'd still give the recommendation that inline elements generally be used inside the context of block elements (that <a> tag, for instance, could be inside a <nav> ), but it's no longer required.