2.3 Layout & Grouping

Updated Jun 21, 2026

2.3 Layout & Grouping

Updated Jun 21, 2026

div

The <div> (division) element is a block-level container used to group related content together.

It has no visual appearance by default but is one of the most commonly used HTML elements for creating layouts and organizing content.

Example

<div>
  <h1>Frontend Development</h1>
  <p>Learn HTML, CSS, and JavaScript.</p>
</div>

Structure

DIV
├── Heading
└── Paragraph

Common Uses

Group related content
Create page layouts
Apply CSS styles
Target elements with JavaScript

Example: Website Sections

<div>
  <h2>About Us</h2>
  <p>Information about the company.</p>
</div>

<div>
  <h2>Services</h2>
  <p>Our services list.</p>
</div>

Real-World Example

<div class="navbar">
  Navigation
</div>

<div class="hero">
  Hero Section
</div>

<div class="footer">
  Footer
</div>

Visual Layout

Page
├── Navbar
├── Hero
├── Content
└── Footer

span

The <span> element is an inline container used to group or style a small portion of text.

Unlike <div>, a <span> does not start on a new line.

Example

<p>
  Learn <span>HTML</span> first.
</p>

Styling Text

<p>
  Learn <span style="color:red;">HTML</span> first.
</p>

In this example, only the word HTML is styled.

div vs span

Feature	div	span
Type	Block Element	Inline Element
Starts on New Line	Yes	No
Used For	Large Sections	Small Parts of Text
Layout Creation	Yes	No

Example

<div>Block Element</div>

<span>Inline</span>
<span>Inline</span>

Output

Block Element

Inline Inline

id

The id attribute uniquely identifies an HTML element.

Every ID should be unique within a webpage.

Syntax

<tag id="unique-name">

Example

<h1 id="main-heading">
  Welcome
</h1>

CSS Usage

<h1 id="title">
  Frontend Development
</h1>

#title {
  color: blue;
}

JavaScript Usage

<h1 id="title">
  Hello
</h1>

const heading =
  document.getElementById("title");

ID Naming Guidelines

Good Examples

id="header"
id="main-content"
id="userProfile"

Avoid

id="header"
id="main-content"
id="userProfile"

Important Rule

Only one element should use a specific ID.

Correct

<h1 id="title">Title</h1>

Incorrect

<h1 id="title">One</h1>
<h2 id="title">Two</h2>

class

The class attribute is used to group multiple elements together.

Unlike IDs, classes can be reused throughout the page.

Example

<p class="text">
  Paragraph One
</p>

<p class="text">
  Paragraph Two
</p>

CSS Usage

.text {
  color: green;
}

Both paragraphs become green.

Multiple Classes

<button
  class="btn primary"
>
  Save
</button>

This button belongs to both:

btn
primary

class vs id

Feature	id	class
Unique	Yes	No
Reusable	No	Yes
CSS Selector	#	.
JavaScript Usage	Single Element	Multiple Elements

Example

#header {
  background: black;
}

.card {
  border: 1px solid gray;
}

style

The style attribute applies CSS directly to an element.

This technique is called Inline CSS.

Example

<h1 style="color: blue;">
  Hello World
</h1>

Multiple Properties

<p
  style="
    color:red;
    font-size:20px;
  "
>
  Welcome
</p>

Advantages

Quick styling
Useful for testing

Disadvantages

Hard to maintain
Repetitive
Not scalable

Bad Example

<h1 style="color:red;">
  Title
</h1>

<h2 style="color:red;">
  Subtitle
</h2>

Better Approach

<h1 class="red-text">
  Title
</h1>

<h2 class="red-text">
  Subtitle
</h2>

.red-text {
  color:red;
}

Data Attributes

Data attributes allow developers to store custom information directly on HTML elements.

All data attributes begin with:

data-

Syntax

<div data-user="samir">
</div>

Example

<button
  data-product-id="101"
>
  Buy Now
</button>

Stored Data:

product-id = 101

Multiple Data Attributes

<div
  data-user="samir"
  data-role="admin"
  data-country="nepal"
>
</div>

Accessing Data Attributes with JavaScript

HTML

<button data-id="101">
  Buy
</button>

JavaScript

const button =
  document.querySelector("button");

console.log(
  button.dataset.id
);

Output

101

Common Use Cases

Product IDs

<button
  data-product-id="15"
>
  Add to Cart
</button>

User Information

<div
  data-user-id="25"
>
</div>

Theme Settings

<body
  data-theme="dark"
>
</body>

Real-World Example

<div
  id="hero"
  class="section"
  data-page="home"
>
  <h1>
    Welcome
  </h1>

  <p>
    Learn
    <span class="highlight">
      HTML
    </span>
    today.
  </p>
</div>

Breakdown

Feature	Value
Element	div
ID	hero
Class	section
Data Attribute	page="home"
Inline Element	span

Summary

Item	Purpose
div	Block-level container
span	Inline container
id	Unique identifier
class	Reusable group identifier
style	Inline CSS styling
data-*	Store custom data

Key Takeaway

The following example combines everything learned in this lesson:

<div
  id="profile"
  class="card"
  data-user-id="101"
>
  <h2>Samir</h2>

  <p>
    Frontend Developer at
    <span class="company">
      Kharaayo
    </span>
  </p>
</div>

In Modern Web Development

div structures sections of a webpage.
span styles small pieces of content.
id identifies unique elements.
class groups reusable elements.
style applies quick inline CSS.
data-* stores custom information for JavaScript.

Mastering these concepts will make it much easier to build layouts, apply styling, and create interactive web applications.

2.3 Layout & Grouping

Updated Jun 21, 2026

2.3 Layout & Grouping

Updated Jun 21, 2026

div

The <div> (division) element is a block-level container used to group related content together.

It has no visual appearance by default but is one of the most commonly used HTML elements for creating layouts and organizing content.

Example

<div>
  <h1>Frontend Development</h1>
  <p>Learn HTML, CSS, and JavaScript.</p>
</div>

Structure

DIV
├── Heading
└── Paragraph

Common Uses

Group related content
Create page layouts
Apply CSS styles
Target elements with JavaScript

Example: Website Sections

<div>
  <h2>About Us</h2>
  <p>Information about the company.</p>
</div>

<div>
  <h2>Services</h2>
  <p>Our services list.</p>
</div>

Real-World Example

<div class="navbar">
  Navigation
</div>

<div class="hero">
  Hero Section
</div>

<div class="footer">
  Footer
</div>

Visual Layout

Page
├── Navbar
├── Hero
├── Content
└── Footer

span

The <span> element is an inline container used to group or style a small portion of text.

Unlike <div>, a <span> does not start on a new line.

Example

<p>
  Learn <span>HTML</span> first.
</p>

Styling Text

<p>
  Learn <span style="color:red;">HTML</span> first.
</p>

In this example, only the word HTML is styled.

div vs span

Feature	div	span
Type	Block Element	Inline Element
Starts on New Line	Yes	No
Used For	Large Sections	Small Parts of Text
Layout Creation	Yes	No

Example

<div>Block Element</div>

<span>Inline</span>
<span>Inline</span>

Output

Block Element

Inline Inline

id

The id attribute uniquely identifies an HTML element.

Every ID should be unique within a webpage.

Syntax

<tag id="unique-name">

Example

<h1 id="main-heading">
  Welcome
</h1>

CSS Usage

<h1 id="title">
  Frontend Development
</h1>

#title {
  color: blue;
}

JavaScript Usage

<h1 id="title">
  Hello
</h1>

const heading =
  document.getElementById("title");

ID Naming Guidelines

Good Examples

id="header"
id="main-content"
id="userProfile"

Avoid

id="header"
id="main-content"
id="userProfile"

Important Rule

Only one element should use a specific ID.

Correct

<h1 id="title">Title</h1>

Incorrect

<h1 id="title">One</h1>
<h2 id="title">Two</h2>

class

The class attribute is used to group multiple elements together.

Unlike IDs, classes can be reused throughout the page.

Example

<p class="text">
  Paragraph One
</p>

<p class="text">
  Paragraph Two
</p>

CSS Usage

.text {
  color: green;
}

Both paragraphs become green.

Multiple Classes

<button
  class="btn primary"
>
  Save
</button>

This button belongs to both:

btn
primary

class vs id

Feature	id	class
Unique	Yes	No
Reusable	No	Yes
CSS Selector	#	.
JavaScript Usage	Single Element	Multiple Elements

Example

#header {
  background: black;
}

.card {
  border: 1px solid gray;
}

style

The style attribute applies CSS directly to an element.

This technique is called Inline CSS.

Example

<h1 style="color: blue;">
  Hello World
</h1>

Multiple Properties

<p
  style="
    color:red;
    font-size:20px;
  "
>
  Welcome
</p>

Advantages

Quick styling
Useful for testing

Disadvantages

Hard to maintain
Repetitive
Not scalable

Bad Example

<h1 style="color:red;">
  Title
</h1>

<h2 style="color:red;">
  Subtitle
</h2>

Better Approach

<h1 class="red-text">
  Title
</h1>

<h2 class="red-text">
  Subtitle
</h2>

.red-text {
  color:red;
}

Data Attributes

Data attributes allow developers to store custom information directly on HTML elements.

All data attributes begin with:

data-

Syntax

<div data-user="samir">
</div>

Example

<button
  data-product-id="101"
>
  Buy Now
</button>

Stored Data:

product-id = 101

Multiple Data Attributes

<div
  data-user="samir"
  data-role="admin"
  data-country="nepal"
>
</div>

Accessing Data Attributes with JavaScript

HTML

<button data-id="101">
  Buy
</button>

JavaScript

const button =
  document.querySelector("button");

console.log(
  button.dataset.id
);

Output

101

Common Use Cases

Product IDs

<button
  data-product-id="15"
>
  Add to Cart
</button>

User Information

<div
  data-user-id="25"
>
</div>

Theme Settings

<body
  data-theme="dark"
>
</body>

Real-World Example

<div
  id="hero"
  class="section"
  data-page="home"
>
  <h1>
    Welcome
  </h1>

  <p>
    Learn
    <span class="highlight">
      HTML
    </span>
    today.
  </p>
</div>

Breakdown

Feature	Value
Element	div
ID	hero
Class	section
Data Attribute	page="home"
Inline Element	span

Summary

Item	Purpose
div	Block-level container
span	Inline container
id	Unique identifier
class	Reusable group identifier
style	Inline CSS styling
data-*	Store custom data

Key Takeaway

The following example combines everything learned in this lesson:

<div
  id="profile"
  class="card"
  data-user-id="101"
>
  <h2>Samir</h2>

  <p>
    Frontend Developer at
    <span class="company">
      Kharaayo
    </span>
  </p>
</div>

In Modern Web Development

div structures sections of a webpage.
span styles small pieces of content.
id identifies unique elements.
class groups reusable elements.
style applies quick inline CSS.
data-* stores custom information for JavaScript.

Mastering these concepts will make it much easier to build layouts, apply styling, and create interactive web applications.