← 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, ACARA Digital Technologies Years 9–10 — Content, Structure and Presentation — Module 21

Understanding Div: the block container in HTML & CSS

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 class and your students practise it interactively.

🖨 Print worksheet + answer key Add Div: the block container to a class →

This module's key terms are also in a printable crossword (Modules 11–21) and word search (Modules 1–23).

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.

Add to 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. style

B. class ✓

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

B. True ✓

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.

Student with a class code? Join your class →