Cambridge Syllabus Notes

Website Authoring – Using the <div> Tag

Website Authoring – Using the `<div>` Tag

Learning Objective

By the end of this lesson students will be able to:

Explain the purpose of the <div> element.
Write correct HTML syntax for a <div> element.
Apply class and id attributes to <div> elements.
Use inline styles within a <div> to control appearance.
Structure a web page by nesting <div> containers.

1. What is a `<div>`?

The <div> (short for “division”) is a generic block‑level container. It does not convey any semantic meaning, but it groups related content so that you can style or manipulate it as a unit.

2. Basic Syntax

<div>
    …content…
</div>

Because <div> is a block‑level element, it starts on a new line and stretches to the full width of its parent container.

3. Adding `class` and `id` Attributes

Attributes allow you to target a <div> with CSS or JavaScript.

class – can be used on multiple elements.
id – must be unique within the page.

<div class="sidebar">
    …sidebar content…
</div>

<div id="mainContent">
    …main article…
</div>

4. Applying Inline Styles

For quick demonstrations you can add a style attribute directly inside the tag.

<div style="background:#f0f0f0; padding:15px;">
    This box has a light‑grey background and padding.
</div>

5. Nesting `<div>` Elements

Nesting creates a hierarchy, making it easier to control layout.

<div class="page">
    <div class="header">…</div>
    <div class="content">
        <div class="article">…</div>
        <div class="sidebar">…</div>
    </div>
    <div class="footer">…</div>
</div>

6. Common Pitfalls

Forgetting to close the <div> tag – results in unexpected layout.
Using the same id on more than one element – breaks uniqueness.
Relying solely on class names for meaning – consider semantic tags (<header>, <nav>, etc.) where appropriate.

7. Example: Simple Two‑Column Layout

<!DOCTYPE html>
<html>
<head>
    <title>Two‑Column Example</title>
    <style>
        .container { display:flex; }
        .main { flex:2; background:#e8f5e9; padding:10px; }
        .side { flex:1; background:#e3f2fd; padding:10px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="main">
            <h2>Main Content</h2>
            <p>…</p>
        </div>
        <div class="side">
            <h2>Sidebar</h2>
            <p>…</p>
        </div>
    </div>
</body>
</html>

Suggested diagram: Visual representation of the nested <div> structure in the two‑column layout.

8. Summary Table

Attribute	Purpose	Example
`class`	Group multiple elements for shared styling	`<div class="menu">…</div>`
`id`	Unique identifier for a single element	`<div id="header">…</div>`
`style`	Apply inline CSS declarations	`<div style="color:red;">…</div>`

9. Practice Activities

Create a web page with a <div> that uses a class to set a background colour and padding.
Build a three‑section layout (header, main, footer) using nested <div> elements and assign each a unique id.
Modify the previous page to add an inline style that changes the font size of the header.

10. Quick Revision Checklist

Use <div> for generic block containers.
Remember to close every <div>.
Apply class for reusable styles; id for a single element.
Inline style is useful for demonstration, but external CSS is preferred for larger projects.
Nested <div> structures help organise complex layouts.

Be able to use the <div> tag including to apply styles and classes