HTML provides elements and attributes that help organize, group, and identify content on a webpage. These are essential for styling with CSS and adding functionality with JavaScript.

---

<div>

The <div> (division) tag is a block-level container used to group related elements.

It has no visual appearance by default.

Example

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

Structure

DIV
├── Heading
└── Paragraph

Purpose

• Group related content
• Create 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>

---

Common Usage

<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> tag is an inline container used to group or style a small portion of text.

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

Example

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

Output

Learn HTML first.

---

Styling Text

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

Output

Learn HTML first.

(HTML appears red.)

---

Difference Between div and span

Feature	div	span
Type	Block Element	Inline Element
New Line	Yes	No
Used For	Large Sections	Small Parts of Text
Layout	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 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");

---

Rules for IDs

Good Examples

id="header"

id="main-content"

id="userProfile"

Avoid

id="123header"

id="main content"

---

Important Rule

Only one element should use a particular ID.

Correct

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

Incorrect

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

---

class

The class attribute groups multiple elements together.

Unlike IDs, classes can be reused throughout a webpage.

Example

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

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

---

CSS Usage

.text {
    color: green;
}

Both paragraphs become green.

---

Multiple Classes

An element can belong to multiple classes at the same time.

Example

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

This button belongs to:

• btn
• primary

---

Class vs ID

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

---

CSS Example

#header {
    background: black;
}

.card {
    border: 1px solid gray;
}

---

style

The style attribute applies CSS directly to an HTML 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 are custom attributes used to store extra information 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 in 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

The following example combines everything learned in this lesson.

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

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