Block vs. inline elements

If you were paying close attention, you may have noticed that the two paragraphs in the previous example were separated in the output by a blank line. Where did that come from? Doesn’t HTML collapse whitespace?

Yes, it does. But we make a distinction between two basic types of HTML elements: block and inline.

Block elements are automatically followed by a newline. In other words, they stand alone.

Inline elements, in contrast, flow with the text. We will see this in action very soon.

The p element is a “block” element. So they sit on different “lines” on the page.

Why the distinction?

This is actually a distinction without much meaning. We can use a “stylesheet” to tell block elements to display inline, and inline elements to display as blocks. Doh. So why bother to do this with HTML?

Block vs. inline is a holdover from the earliest versions of HTML. Cascading Style Sheets (CSS) were not added to the browsers until almost a decade after HTML came along. So, in those early days, the distinction was important.

Still, it is good to know and follow. Making block elements into inline elements and vice versa makes for very confusing code. Spare the next developer the pain. Use the right elements.

The generic block and inline elements

There are generic HTML elements for marking up content as “block” or “inline”. For block content, this is the “division” element: div. For inline content, it is the span element.

So unless we mess with it using a stylesheet, the following examples should make this clear. This code:

div elements are block elements.

<div>This</div>
<div>is</div>
<div>block</div>
<div>text.</div>

That gives you this output:

This

is

block

text.

Contrast that with the inline span element:

span elements are inline elements.

<span>This</span>
<span>is</span>
<span>block</span>
<span>text.</span>

This is block text.

So when would we use these elements? That’s coming up.

Next: The default stylesheet

Previous: HTML elements

Table of contents