WDD 130 | HTML Block and Inline Elements

W02 Learning Activity: HTML Block and Inline Elements

Overview

An HTML element is, by default, either a block-level or an 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.

Prepare

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 as much width as their content needs. Some common inline elements are: <span>, <a>, <img>, <button>, and <input>.

Watch the following video to learn more about block and inline elements:

▶️ Block versus Inline Elements (4:36 minutes, 📄 Transcript)

Activity Instructions

Complete the following:

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. (The <table> element has its own display type, but it starts on a new line like a block.)

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.
Open the page named block-vs-inline.html in the week02 subfolder of your wdd130 folder.
Review the HTML structure.
To help you complete the exercise, render the page by right-clicking the file name and selecting Open with Live/Five Server.

The page has been styled with CSS to help illustrate the differences between block and inline elements.
This HTML file contains a number of tasks for you to complete. These tasks are described in the HTML directly. You should now complete each task as described.
Note that the inline elements <span>, <img>, <a>, and <button> are only as big as the content within them.

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 was replaced with a more complex set of content categories. Today, whether an element displays as block or inline is controlled by the CSS display property.