In HTML 4.01, there were two basic categories of HTML elements:
- Block level elements
- Inline 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:
<p><ol>,<ul>,<dl>- All headings
<article>,<section>,<div>
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:
<a><strong>,<em>,<b>,<i>,<q>, <mark><span>
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:
- Inline elements cannot contain block level elements
For example, you cannot wrap an <em> around two paragraphs:
<em>← Incorrect <p>An emphasized paragraph.</p> <p>Another emphasized paragraph.</p></em>← Incorrect<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>
