Back to Week 4 page »

Block and Inline Elements

In HTML 4.01, there were two basic categories of HTML elements:

Block Level Elements

Block level elements take up as much space as possible by default. Each block level element will start a new line on the page, stacking down the page. In addition to stacking vertically, block level elements will also take up as much horizontal space as possible.

The p element is an example of a block level element. Each new paragraph tag will appear on its own line vertically. Paragraphs with longer content will stretch all the way to the edge of the page.

Examples of block level elements:

Demo

Inline Elements

Inline elements display in a line. They do not force the text after them to a new line.

An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.

Examples of inline elements:

Demo

See it all together

Why is this important?

How an element behaves when styled with CSS will change based on the display mode of an element (block vs. inline). Some CSS properties react differently for each display type. We'll learn more about this behavior when we start to lay out pages in CSS.

For now, remember this:

For example, you cannot wrap an <em> around two paragraphs:

<em>						← Incorrect
   <p>An emphasized paragraph.</p>
   <p>Another emphasized paragraph.</p>
</em>						← Incorrect
The correct way to do this would be to put the inline element inside each block element: 
<p><em>An emphasized paragraph.</em></p>
<p><em>Another emphasized paragraph.</em></p>

One Exception (New in HTML5)

HTML5 creates one welcome exception to this rule. You can now wrap links around block level elements. An example makes this clear.

It's common to mark up the name of the site with a logo and tag line, something like this: 

<h1>Recipe Book</h1>
<p>Eat first, talk later.</p>

Typically, each of these would also link to the home page. Previously, you would mark up each block-level element with a link

<h1><a href="index.html">Recipe Book</a></h1>
<p><a href="index.html">Eat first, talk later.</a></p>

Now you can simply wrap both in a link. Cleaner and less redundant.

<a href="index.html">
   <h1>Recipe Book</h1>
   <p>Eat first, talk later.</p>
</a>

Back to Week 4 page »