Semantic Tags

Part of the Fundamentals section of Coddy's HTML journey — lesson 27 of 60.

Semantic tags in HTML help define the meaning of content, making the code clearer for both developers and browsers. Unlike <div> and <span>, they give context to the enclosed content.

Common Semantic Tags:

<header> – Introductory content, usually at the top.
<nav> – Contains navigation links.

<main> – Main content of the page.
<article> – A self-contained piece like a blog post.

<section> – Groups related content, often with a heading.
<footer> – Bottom section with info like copyright or contact details.

<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>Article Title</h2>
		<p>Article content goes here.</p>
	</article>
</main>
<footer>
	<p>Copyright 2023</p>
</footer>

This structure provides a clear and meaningful layout for the content.

Challenge

Easy

Build a movie review page using semantic HTML. It should include:

1. <header> with:

<h1> "Movie Reviews"
<nav> with links: "Home", "Reviews", “Top Picks”

2. <main> with:

<article> for a review that contains:
- <h2> with the movie name
- <p> with a short review

3. <footer> with:

<p> "Copyright 2023 Movie Reviews"

Cheat sheet

Semantic tags in HTML help define the meaning of content, making the code clearer for both developers and browsers. Unlike <div> and <span>, they give context to the enclosed content.

Common Semantic Tags:

<header> – Introductory content, usually at the top.
<nav> – Contains navigation links.
<main> – Main content of the page.
<article> – A self-contained piece like a blog post.
<section> – Groups related content, often with a heading.
<footer> – Bottom section with info like copyright or contact details.

<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>Article Title</h2>
		<p>Article content goes here.</p>
	</article>
</main>
<footer>
	<p>Copyright 2023</p>
</footer>

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <!-- Write code here -->
    </body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

All lessons in Fundamentals

1HTML Basics

What is HTML?Basic Structure of an HTML Tags and Elements Nesting and Closing Tags Comments in HTML

4Recipe Card

Project Overview Recipe Title and Description

Ingredients

Steps

7Personal Profile Page

Project Overview Header Section

Profile Picture

About Me Section

Social Links

10Tables

Table Basics Adding Captions Spanning Rows and Columns Recap - Tables

2Text and Formatting

Headings Paragraphs Line Breaks Bold and Italic Text Bold and Italic Again Recap - Formatting

5Adding Content

HTML Attributes Links New Page Links Images Image Attributes

8Forms and Inputs Part 1

Form Basics Text Inputs Input Attributes Password Field Labels for Inputs Recap - Basic Form

11Event Registration Page

Project Overview Header Section

Event Details Section

Registration Form

Footer Section

3Working with Lists

Unordered List Ordered List Nested Lists Recap - Lists

6Page Layout

Divisions Inline SpansSemantic TagsSections and Articles Recap - Layout

9Forms and Inputs Part 2

Radio Buttons Checkboxes Dropdowns Buttons Buttons in Forms Recap - Forms #1 Recap - Forms #2

12Final Challenges

Simple Profile Card Event Invitation Card Simple Article Page Favorite Books List