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:
Thisisblocktext.
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