At the very simplest level, there are two ways elements can display text: block and inline.

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

Inline elements influence text without affecting the content immediately around them. There would be little point that if every time we wanted to render something in italic, the browser forced 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.

Several important final points must be added:

1. Inline elements must always be used in the context of block elements. For example, you cannot use <q> (the quotation tag) by itself to markup a sentence. Instead, it would typically be nested inside a <p> tag that provides a broader context:

   <p><q>Once more unto the breach, dear friends</q>, 
   wrote Shakespeare.</p>

2. While there are exceptions, a good rule for basic text formatting is that block elements may not contain other block elements. While inline tags inside of block tags is perfectly okay:

   <h1>The <em>Destiny</em> Corporation</h1>

   This does not make any sense:

   <p>This is a typical, and wrong-headed, attempt to make 
   text <h1>bigger</h1> in a paragraph</p>

   This is also a common mistake:

   <p><h1>Is this content a heading, or a paragraph?
   It can’t be both, but that’s exactly what the markup 
   surrounding it says.</h1></p>

3. The display property of an element 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.

Photograph by Darwin Bell, used under a Creative Commons Attribution-NonCommercial 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.