Div: the block container

Tip: Choose Save as PDF in the print dialog to download. Use A4 paper size.

Div: the block container

Name:
Date:
Class:
A

Quick Questions

Shade in the A or B circle for each question.

1. True or false: <div> adds visible styling like a border or background by default.
A False
B True
2. Is <div> a block-level or inline element?
A Block-level
B Inline
3. What attribute is commonly used on <div> to give CSS a styling target?
A style
B class
4. True or false: divs can be nested inside other divs.
A False
B True
5. True or false: <DIV> with capital letters is valid HTML.
A False
B True
B

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left columnRight column
1<div class="card"> <p>Card content.</p> </div> AClosing tags must not contain attributes - the closing tag should simply be </div>
2<div class="grid"> <div class="cell">A</div> <div class="cell">B</div> </div> B<div id="sidebar"> <p>Side content.</p> </div>
3<div> is a block-level container with no built-in styling - all appearance comes from CSS CA styled block container - <div> groups the paragraph and CSS can target .card to add borders, padding, or colour
4class and id on <div> give CSS a target to apply styles to that block D<div class="hero"> <h1>Welcome</h1> <p>Intro text.</p> </div>
5<DIV class="card"> <p>Text.</p> </DIV> EA grid layout pattern - nested divs with shared class names group repeating layout units like cells or cards
6<div class="row"> </div class="row"> FTag names must be lowercase - <DIV> and </DIV> should be written as <div> and </div>
C

Definitions

<div>
D

Fill in the Blanks

Complete each line of code by filling in the missing parts.

1.
<___ class="card"> <p>Content.</p> </div>
2.
<div ___="hero"> <h1>Welcome</h1> </div>
3.
<div class="box"> <p>Text here.</p> </___>
4.
<div class="outer"> <___ class="inner"> </div> </div>
5.
<div ___="main-content"> <p>Main area.</p> </div>
E

Spot the Error

Shade in the letter of the line that contains an error.

Question 1
A <DIV class="card">
B <p>Hello world.</p>
C </div>
Question 2
A <div class="hero">
B <h1>Welcome<h1>
C <p>Intro text.</p>
D </div>
Question 3
A <div class="sidebar">
B <p>Side content.</p>
C <div class= "box">
D </div>
E </div>
Question 4
A <div class="grid">
B <div class="cell">A</div>
C <div class="cell">B</div>
D <div class="cell">C<div>
E </div>
Question 5
A <main>
B <div class="wrapper">
C <p>Main content.</p>
D </div>
E <div>Extra.</div
F </main>

Answer Key

Div: the block container
Section A: Quick Questions
Q1
A — False
Q2
A — Block-level
Q3
B — class
Q4
B — True
Q5
A — False
Section B: Match the Pairs
Q1
<div class="card"> <p>Card content.</p> </div> → A styled block container - <div> groups the paragraph and CSS can target .card to add borders, padding, or colour
Q2
<div class="grid"> <div class="cell">A</div> <div class="cell">B</div> </div> → A grid layout pattern - nested divs with shared class names group repeating layout units like cells or cards
Q3
<div> is a block-level container with no built-in styling - all appearance comes from CSS → <div class="hero"> <h1>Welcome</h1> <p>Intro text.</p> </div>
Q4
class and id on <div> give CSS a target to apply styles to that block → <div id="sidebar"> <p>Side content.</p> </div>
Q5
<DIV class="card"> <p>Text.</p> </DIV> → Tag names must be lowercase - <DIV> and </DIV> should be written as <div> and </div>
Q6
<div class="row"> </div class="row"> → Closing tags must not contain attributes - the closing tag should simply be </div>
Section C: Definitions
Q1
<div> — A generic block-level container element with no built-in styling. Used to group content so CSS can target and style sections of a page.
Section D: Fill in the Blanks
Q1
<div class="card"> <p>Content.</p> </div>
Q2
<div class="hero"> <h1>Welcome</h1> </div>
Q3
<div class="box"> <p>Text here.</p> </div>
Q4
<div class="outer"> <div class="inner"> </div> </div>
Q5
<div id="main-content"> <p>Main area.</p> </div>
Section E: Spot the Error
Q1
A — HTML tag names must be lowercase. <DIV> should be written as <div>.
Q2
B — The h1 closing tag is missing its forward slash. It should be </h1> not <h1>.
Q3
C — There must be no space between = and the opening quote. The correct form is class="box".
Q4
D — The last inner div is missing its closing forward slash. It should be </div> not <div> at the end.
Q5
E — The last div's closing tag is missing its angle bracket >. It should be </div> not </div.