WDD 130 | HTML: Block and Inline Elements

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 the content and do 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

Preparation Material

Carefully ponder, note, and reference the materials provided and concepts presented in the learning modules.

Block-level Elements

Block-level elements start on a new line on a page and take up the full width of their container. This means the element container stretches out to the left and right as far as it can. Some common block-level elements are: <p> and <div> and all the semantic containers like <header>, <footer>, <main>, <nav>, and <section>.

Inline Elements

Inline elements do not start on a new line and only take up the space bounded by the tags defining the element. Some common inline elements are: <span>, <a>, <img>, <button>, and <input>.

Video Demonstration: ▶️ Block versus Inline Elements - [ 4:36 minutes, 📄 Transcript ]

Activity Instructions

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>
```
Check Your Understanding
```
<span> <a> <label> <button> <input> <cite>
```
The other elements that are listed are block-level elements by default.

How are you supposed to figure out which is which? You can try them out on your page. And you should also learn to get information using reliable sources. For example, you can use the HTML Reference to look up an element to verify if the element is block or inline.
Go to this code snippet on CodePen and note that the HTML, CSS, and JavaScript are separated into panels.
Focus on the HTML and the block and inline elements that are being used.
1. In the HTML window, change the second paragraph element to a <div> element. What happened?
  
  Check Your Understanding
  
  Nothing should have changed. It is OK for a <div> block element to contain another <div> element.
2. Now change the first or outer <div> element to a <p> element so that a paragraph contains a div. What happened?
  
  Check Your Understanding
  
  This creates an unwanted result. The paragraph element ends early because, by rule, it cannot contain another block-level element. Paragraph elements can only contain inline elements.
3. 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 in the CodePen?
  Check Your Understanding
```
<span> <img> <a> and <button>
```

Optional Resources

Block Elements - MDN
Inline Elements - MDN
The block-level vs. inline elements distinction was used in HTML specifications up to 4.01. Later, this binary distinction is replaced with a more complex set of content categories.