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

Published by Patrick Mutisya · 14 days ago

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

AttributePurposeExample
classGroup multiple elements for shared styling<div class="menu">…</div>
idUnique identifier for a single element<div id="header">…</div>
styleApply inline CSS declarations<div style="color:red;">…</div>

9. Practice Activities

  1. Create a web page with a <div> that uses a class to set a background colour and padding.

  2. Build a three‑section layout (header, main, footer) using nested <div> elements and assign each a unique id.

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