Web · HTML Document Structure
Inline and Block Grouping
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to Grouping Elements
HTML provides two important elements for grouping content:
<div>
and
<span>
. These elements don't have any visual effect by themselves, but they're essential for organizing and styling your content.
-
<div>
is a block-level container used to group larger sections of content
-
<span>
is an inline container used to group small pieces of text within a line
<!DOCTYPE html>
<html>
<body>
<div>
<h2>Water Codémons</h2>
<p>Aquachu is a powerful water-type Codémon.</p>
</div>
<p>My favorite Codémon is <span>Aquachu</span>!</p>
</body>
</html>
No Semantic Meaning
Unlike elements like <header>, <footer>, or <article>, div and span don't have any inherent semantic meaning. They're purely for grouping and styling purposes.
Exercise 2 — The <div> Element: Block-level Container
The
<div>
element is a block-level container. This means it takes up the full width available and starts on a new line. It's like a box that holds other content.
Main characteristics of
<div>
:
- Creates a new block in the document
- Takes up 100% of the available width
- Adds a line break before and after
- Can contain any HTML elements, including other divs
Try and run the code without paying attention to the styling, we haven't seen this part yet, just focus on the structure and how the elements behave.
<!DOCTYPE html>
<html>
<body>
<div style="border: 1px solid red; padding: 10px;">
<h3>Fire Codémon Section</h3>
<p>This is a div containing information about fire Codémons.</p>
</div>
<div style="border: 1px solid blue; padding: 10px; margin-top: 10px;">
<h3>Water Codémon Section</h3>
<p>This is another div containing information about water Codémons.</p>
</div>
</body>
</html>
Notice how each div creates a new box that takes up the full width and starts on a new line.
Exercise 3 — The <span> Element: Inline Container
The
<span>
element is an inline container. This means it only takes up as much width as necessary and does not create new lines. It's perfect for styling or targeting parts of text.
Main characteristics of
<span>
:
- Flows within text without breaking the line
- Only takes up as much width as needed
- Does not force new lines
- Typically used for styling portions of text
Try and run the code without paying attention to the styling, we haven't seen this part yet, just focus on the structure and how the elements behave.
<!DOCTYPE html>
<html>
<body>
<p>
My favorite Codémon is
<span style="color: blue; font-weight: bold;">Aquachu</span>
because it can use powerful
<span style="color: blue;">water</span>
attacks!
</p>
</body>
</html>
Exercise 4 — Choosing Between div and span
Which element would be most appropriate to highlight just a single word within a paragraph without creating a new line?
Options
• ```<span>```
• ```<div>```
• ```<p>```
• ```<section>```
Hint : Think about which element is inline (flows within text) versus which elements are block-level (create new lines).
Exercise 5 — Block vs. Inline Elements
To understand
<div>
and
<span>
better, it's important to know the difference between block and inline elements in HTML:
Block Elements:
- Start on a new line
- Take up the full width available
- Have a margin above and below
- Examples:
<div>
,
<p>
,
<h1>
to
<h6>
,
<ul>
,
<li>
Inline Elements:
- Do not start on a new line
- Only take up as much width as necessary
- Don't force line breaks
- Examples:
<span>
,
<a>
,
<strong>
,
<em>
,
<img>
Try and run the code without paying attention to the styling, we haven't seen this part yet, just focus on the structure and how the elements behave.
<!DOCTYPE html>
<html>
<head>
<style>
.highlight-block { background-color: yellow; border: 1px solid black; }
.highlight-inline { background-color: lightblue; border: 1px solid blue; }
</style>
</head>
<body>
<h3>Block Elements:</h3>
<div class="highlight-block">This is a div (block element)</div>
<p class="highlight-block">This is a paragraph (block element)</p>
<h3>Inline Elements:</h3>
<p>
This is a paragraph with <span class="highlight-inline">a span</span> and
</p>
</body>
</html>
Nesting Rules
Block-level elements can contain other block elements and inline elements. Inline elements should only contain other inline elements, not block elements.
Exercise 6 — Match Elements with Their Type
Match each HTML element with its correct type (block or inline):
Items to match
• <div>
• <span>
• <p>
• <strong>
Definitions
• Block element
• Inline element
• Block element
• Inline element
Exercise 7 — Which Element Should You Use?
You want to create a container for a Codémon profile section that includes a heading, image, and description. Which element would be most appropriate?
Options
• ```<div>```
• ```<span>```
• ```<p>```
• ```<b>```
Hint : Think about whether you need a block-level container that creates new lines or an inline element that flows within text.
Exercise 8 — Complete the Structure
Complete the HTML code by adding the appropriate elements. Use
<div>
for block-level grouping and
<span>
for inline text grouping.
<!DOCTYPE html>
<html>
<body>
____
<h2>Codémon Profile</h2>
<p>Name: Aquachu</p>
<p>Type: Water</p>
____
<p>The most powerful attack is ____Water Blast____, which does massive damage.</p>
</body>
</html>
Options: <div> </div> <span> </span> <p> </p>
Hint : Remember: div creates a block that starts on a new line, while span is inline and doesn't create line breaks.
Exercise 9 — Match the Characteristics
Match each characteristic with the correct HTML element:
Items to match
• Creates a line break before and after
• Flows within text without breaking lines
• Used for larger content sections
• Used for small portions of text
Definitions
• <div>
• <span>
• <div>
• <span>
Exercise 10 — Correct Usage
Which of the following uses div and span elements correctly according to their intended purpose?
Options
• <div>
<p>Pyrochu is type <span>fire</span></p>
</div>
• <span>
<p>Pyrochu is type <div>fire</div></p>
</span>
• <span>
<p>Pyrochu is type <span>fire</span></p>
</span>
• <div>
<p>Pyrochu is type <div>fire</div></p>
</div>
Hint : Remember the nesting rules: block elements like div can contain other block and inline elements, but inline elements like span should only contain text or other inline elements.