← HTML & CSS

Div: the block container

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.

Part of: HTML and CSS Journey — Module 20

What it does: The <div> wraps the heading and paragraph into one group. CSS targeting .hero applies styling to the whole block. id="sidebar" uniquely identifies this div. CSS can use #sidebar { } to position and style this block. <div> has no built-in visual styling. It is a neutral container - all styling must be added with CSS. <div> is block-level - it starts on a new line and expands to fill its parent's full width. Use <span> for inline grouping. class is the standard attribute for linking a div to CSS rules. Using inline style is possible but less maintainable. Nesting divs inside divs is a common pattern for building layout grids, cards, and other structured designs.

Common mistakes: HTML tag names must be lowercase. <DIV> should be written as <div>. The h1 closing tag is missing its forward slash. It should be </h1> not <h1>.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Div: the block container (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

True or false: <div> adds visible styling like a border or background by default.

FalseTrue

Matches

↓

Tag names must be lowercase - <DIV> and </DIV> should be written as <div> and </div>

Applying

Meanings

Term

<div>

Meaning

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.

Practice

Testing

Gaps

< class="card">

Check Answer

Spots

1<DIV class="card">

2 <p>Hello world.</p>

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. True or false: <div> adds visible styling like a border or background by default.

A. False ✓

B. True

<div> has no built-in visual styling. It is a neutral container - all styling must be added with CSS.

2. Is <div> a block-level or inline element?

A. Block-level ✓

B. Inline

<div> is block-level - it starts on a new line and expands to fill its parent's full width. Use <span> for inline grouping.

3. What attribute is commonly used on <div> to give CSS a styling target?

A. class ✓

B. style

class is the standard attribute for linking a div to CSS rules. Using inline style is possible but less maintainable.

4. True or false: divs can be nested inside other divs.

A. True ✓

B. False

Nesting divs inside divs is a common pattern for building layout grids, cards, and other structured designs.

5. True or false: <DIV> with capital letters is valid HTML.

A. False ✓

B. True

HTML tag names must be lowercase. <DIV> is non-standard - use <div>.

Match the Pairs

<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

<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

<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>

class and id on <div> give CSS a target to apply styles to that block → <div id="sidebar"> <p>Side content.</p> </div>

<DIV class="card"> <p>Text.</p> </DIV> → Tag names must be lowercase - <DIV> and </DIV> should be written as <div> and </div>

<div class="row"> </div class="row"> → Closing tags must not contain attributes - the closing tag should simply be </div>

Key Term

<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.

Fill in the Blanks

1. <div class="card"> <p>Content.</p> </div>

Hint: Type the block container element name used to group content

2. <div class="hero"> <h1>Welcome</h1> </div>

Hint: Type the attribute name used to assign a CSS class to this div

3. <div class="box"> <p>Text here.</p> </div>

Hint: Type the element name for the closing tag that ends this block container

4. <div class="outer"> <div class="inner"> </div> </div>

Hint: Type the element name for the nested block container inside the outer div

5. <div id="main-content"> <p>Main area.</p> </div>

Hint: Type the attribute name used to give this div a unique identifier

Spot the Error

Question 1

A <DIV class="card">

B <p>Hello world.</p>

C </div>

Line A — HTML tag names must be lowercase. <DIV> should be written as <div>.

Question 2

A <div class="hero">

B <h1>Welcome<h1>

C <p>Intro text.</p>

D </div>

Line B — The h1 closing tag is missing its forward slash. It should be </h1> not <h1>.

Question 3

A <div class="sidebar">

B <p>Side content.</p>

C <div class= "box">

D </div>

E </div>

Line C — There must be no space between = and the opening quote. The correct form is class="box".

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>

Line D — The last inner div is missing its closing forward slash. It should be </div> not <div> at the end.

Question 5

A <main>

B <div class="wrapper">

C <p>Main content.</p>

D </div>

E <div>Extra.</div

F </main>

Line E — The last div's closing tag is missing its angle bracket >. It should be </div> not </div.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?