Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Learn Exploring Semantic Elements in HTML | Advanced HTML
HTML Essentials

book
Exploring Semantic Elements in HTML

Let's take a closer look at each tag individually:

header tag

These are typically introductory elements or a set of links placed at the top of a section or webpage that offer crucial information about the page and help users navigate to other sections.

Please note that this should not be confused with the head tag, as head and header have different purposes in HTML.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>header element</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<a href="#">Website Logo</a>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
</body>
</html>

nav tag

Defines a section of navigation links used for menus or navigation bars. nav is typically placed in a website's header section.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>nav element</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<a href="#">Website Logo</a>

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>

section tag

Organize your document logically by using headings to group related content. This helps readers understand your content better and improves search engine visibility.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>section element</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<!-- header content -->
</header>

<section>
<h1>Company title or brand phrase</h1>
<p>Welcome to our company. We specialize in...</p>
</section>

<section>
<h2>Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
</body>
</html>

article tag

It contains a self-contained piece of content like a blog post, news article, or forum post. This content helps search engines identify and prioritize the central content of the webpage.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>article element</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<!-- header content -->
</header>

<section>
<!-- section content -->
</section>

<article>
<h2>Blog Post Title</h2>
<p>Blog post content goes here...</p>
</article>
</body>
</html>

footer tag

Defines a footer that typically includes copyright info, contact details, and links to related content. It provides closure to the content above and contains supplementary information and navigation options.

html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>footer element</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<!-- header content -->
</header>

<section>
<!-- section content -->
</section>

<article>
<!-- article content -->
</article>

<footer>
<p>&copy; 2024 My Website. All Rights Reserved.</p>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</footer>
</body>
</html>

1. What is the primary purpose of the <header> tag?

2. Which HTML tag is typically used to define a section of navigation links, such as menus or navigation bars?

3. What is the main function of the <section> tag?

4. When should we use the <footer> tag?

question mark

What is the primary purpose of the <header> tag?

Select the correct answer

question mark

Which HTML tag is typically used to define a section of navigation links, such as menus or navigation bars?

Select the correct answer

question mark

What is the main function of the <section> tag?

Select the correct answer

question mark

When should we use the <footer> tag?

Select the correct answer

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 5. Chapter 2
some-alt