HTML: Block versus Inline Elements
Overview
An HTML element is, by default, either a block-level or inline element. Block elements occupy the full width of their container and start on new lines. Inline elements only occupy the space needed for its content and does not start on a new line.
"A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a "block"." ... "Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content."- MDN
Prepare
Carefully ponder, note, and reference the materials provided.
- Read: 📄 HTML Block and Inline Elements - W3Schools
- Watch: 🎦 Block versus Inline Elements | (4:36 mins, Transcript )
Activity Instructions
In this activity, answer the following questions about HTML elements.
- Which of the following HTML elements are inline elements by
default?
<header> <div> <span> <table> <form> <a> <label> <button> <input> <p> <aside> <cite>
Answers
<span> <a> <label> <button> <input> <cite>
The remaining elements listed are 'block-level' elements by default.
How are you supposed to figure out which is which? There is nothing wrong with trying them out on your page and, in addition, you should be comfortable looking up details as needed using focused research. For example, you can use the HTML Reference to look up the elements and see if they are block or inline elements. - Go to this code snippet on CodePen
and note that the HTML, CSS, and JavaScript are separated
into
panels.
Let us focus on the HTML and the block and inline elements that are being used.- In the HTML window, change the second paragraph element to a
<div>
element. What happened?Answer
Nothing should have changed. It is OK for a
<div>
block element to contain another<div>
element. -
Now change the first or outer
<div>
element to a<p>
element so that a paragraph contains a div. However, what happened?Answer
This creates an unwanted result. The paragraph element ends early as by rule, it cannot contain another block-level element. paragraph elements can only contain inline elements.
- Take a look at how the inline elements are only as big as their content and
display
inline if there is room. These inline elements are common. Can you identify them?
Answers
<span> <img> <a> and <button>
- In the HTML window, change the second paragraph element to a
Optional Resources
- Help: A reference of HTML elements.
- Block Elements - MDN
- Inline Elements - MDN
- The distinction of block-level vs. inline elements was used in HTML specifications up to 4.01. Later, this binary distinction is replaced with a more complex set of content categories.