Complete Web Designing Course for Beginners

Lesson 1.9 – Semantic HTML Elements

🌐 Creating Meaningful and Well-Structured Webpages

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Semantic HTML

✅ Know why semantic elements are important

✅ Differentiate Semantic and Non-Semantic Elements

✅ Use common Semantic HTML tags

✅ Create professional webpage structures

✅ Improve accessibility and SEO

📖 Introduction

Suppose you build a webpage using only:

<div>
<div>
<div>
<div>

A browser can display it.

But when another developer sees the code, they cannot easily understand:

Which part is Header?
Which part is Navigation?
Which part is Main Content?
Which part is Footer?

To solve this problem HTML5 introduced:

🏷️ Semantic Elements

These elements clearly describe their purpose.

🤔 What is Semantic HTML?

Semantic HTML uses tags that clearly describe the meaning of the content.

Example:

<header>

Immediately tells us:

“This section is the header.”

<footer>

Immediately tells us:

“This section is the footer.”

🎯 Why Use Semantic HTML?

Benefits:

✅ Easy to Read

✅ Easy to Maintain

✅ Better SEO

✅ Better Accessibility

✅ Professional Coding Practice

Non-Semantic vs Semantic

Non-Semantic

<div>

Meaning is unclear.

Semantic

<header>
<nav>
<main>
<footer>

Meaning is clear.

🌟 Common Semantic Elements

HTML5 provides many semantic tags.

Most important:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

🏠 Header Element

Used for:

Website Logo
Website Title
Navigation

Tag:

<header>

Example

<header>

<h1>NextGen Dev Hub</h1>

</header>

🌐 Navigation Element

Used for menus and links.

Tag:

<nav>

Example

<nav>

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Contact</a>

</nav>

📄 Main Element

Represents the main content of a webpage.

Tag:

<main>

Example

<main>

<h2>Welcome Students</h2>

<p>Learning HTML.</p>

</main>

📚 Section Element

Groups related content together.

Tag:

<section>

Example

<section>

<h2>About Us</h2>

<p>We teach Web Designing.</p>

</section>

📰 Article Element

Used for independent content.

Examples:

Blog Post
News Article
Tutorial

Tag:

<article>

Example

<article>

<h2>Web Designing Course</h2>

<p>Learn HTML, CSS and JavaScript.</p>

</article>

📌 Aside Element

Used for side content.

Examples:

Advertisements
Related Links
Quick Notes

Tag:

<aside>

Example

<aside>

<h3>Important Notice</h3>

<p>Admission Open.</p>

</aside>

🦶 Footer Element

Used at the bottom of a webpage.

Contains:

Copyright
Contact Information
Social Media Links

Tag:

<footer>

Example

<footer>

<p>© 2026 NextGen Dev Hub</p>

</footer>

🎯 Complete Semantic Structure

<!DOCTYPE html>

<html>

<head>

<title>Semantic HTML</title>

</head>

<body>

<header>

<h1>My Website</h1>

</header>

<nav>

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Contact</a>

</nav>

<main>

<section>

<h2>About Us</h2>

<p>Welcome to our website.</p>

</section>

<article>

<h2>Latest News</h2>

<p>New course launched.</p>

</article>

</main>

<aside>

<p>Advertisement Area</p>

</aside>

<footer>

<p>© 2026 My Website</p>

</footer>

</body>

</html>

🌟 Semantic Layout Diagram

--------------------------------

HEADER

--------------------------------

NAVIGATION

--------------------------------

MAIN CONTENT

    SECTION

    ARTICLE

--------------------------------

ASIDE

--------------------------------

FOOTER

--------------------------------

SEO Benefits

Search engines like Google understand:

<header>
<nav>
<main>
<footer>

better than:

<div>
<div>
<div>
<div>

This helps improve search engine rankings.

Accessibility Benefits

Screen readers used by visually impaired users can understand webpage structure better.

This makes websites more user-friendly.

⚠️ Common Beginner Mistakes

Mistake 1

Using only div tags.

Wrong:

<div>
<div>
<div>

Better:

<header>
<nav>
<main>
<footer>

Mistake 2

Putting footer inside header.

Keep semantic structure logical.

🌟 Best Practices

✅ Use semantic tags whenever possible.

✅ Use one <main> per page.

✅ Keep header at top.

✅ Keep footer at bottom.

✅ Use sections for grouping content.

🏆 Mini Project – College Information Page

Create:

<header>
College Name
</header>

<nav>
Home | Courses | Contact
</nav>

<main>

<section>
About College
</section>

<section>
Departments
</section>

</main>

<footer>
Contact Information
</footer>

📝 Practical Activity

Create a webpage using:

✅ Header

✅ Navigation

✅ Main

✅ Section

✅ Article

✅ Footer

Run it in Chrome.

📋 Assignment

What is Semantic HTML?
Why is Semantic HTML important?
What is the purpose of <header>?
What is the purpose of <nav>?
What is the purpose of <section>?
What is the purpose of <footer>?
Create a simple semantic webpage structure.

🧠 Quiz

Q1. Which tag represents navigation links?

A. <header>

B. <footer>

C. <nav>

D. <main>

✅ Answer: C

Q2. Which tag contains the main content?

A. <aside>

B. <main>

C. <footer>

D. <article>

✅ Answer: B

Q3. Which tag is used at the bottom of a webpage?

A. <header>

B. <section>

C. <main>

D. <footer>

✅ Answer: D

📌 Lesson Summary

✅ Semantic HTML gives meaning to webpage content.

✅ Semantic tags improve readability.

✅ Semantic tags improve SEO.

✅ Semantic tags improve accessibility.

✅ Common semantic tags are:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>