Summary  
This chapter covers the use of HTML5 semantic elements (header, nav, section, article, footer) to create a meaningful, well-structured code layout.

General domain of usage  
Web page structure and layout design.

Below are the most common semantic elements and what they are used for.

## `header` tag
Represents the top part of a webpage or section. Usually contains a logo, title, or navigation links.

Don't confuse `header` with `head`. They serve different purposes.

Note

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGEgaHJlZj0iIyI+V2Vic2l0ZSBMb2dvPC9hPgoKICAgICAgPHVsPgogICAgICAgIDxsaT48YSBocmVmPSIjIj5Ib21lPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlNlcnZpY2VzPC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPkNvbnRhY3Q8L2E+PC9saT4KICAgICAgPC91bD4KICAgIDwvaGVhZGVyPgogIDwvYm9keT4KPC9odG1sPg==

## `nav` tag
Defines a block of navigation links. Often placed inside the header.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGEgaHJlZj0iIyI+V2Vic2l0ZSBMb2dvPC9hPgoKICAgICAgPG5hdj4KICAgICAgICA8dWw+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iIyI+SG9tZTwvYT48L2xpPgogICAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlNlcnZpY2VzPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iIyI+Q29udGFjdDwvYT48L2xpPgogICAgICAgIDwvdWw+CiAgICAgIDwvbmF2PgogICAgPC9oZWFkZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

## `section` tag
Groups related content into logical sections. Each section should typically start with a heading.


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8aDE+Q29tcGFueSB0aXRsZSBvciBicmFuZCBwaHJhc2U8L2gxPgogICAgICA8cD5XZWxjb21lIHRvIG91ciBjb21wYW55LiBXZSBzcGVjaWFsaXplIGluLi4uPC9wPgogICAgPC9zZWN0aW9uPgoKICAgIDxzZWN0aW9uPgogICAgICA8aDI+U2VydmljZXM8L2gyPgogICAgICA8dWw+CiAgICAgICAgPGxpPlNlcnZpY2UgMTwvbGk+CiAgICAgICAgPGxpPlNlcnZpY2UgMjwvbGk+CiAgICAgICAgPGxpPlNlcnZpY2UgMzwvbGk+CiAgICAgIDwvdWw+CiAgICA8L3NlY3Rpb24+CiAgPC9ib2R5Pgo8L2h0bWw+

## article tag
Represents a self-contained piece of content, such as a blog post or news article. Useful for search engines to identify main content.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8IS0tIHNlY3Rpb24gY29udGVudCAtLT4KICAgIDwvc2VjdGlvbj4KCiAgICA8YXJ0aWNsZT4KICAgICAgPGgyPkJsb2cgUG9zdCBUaXRsZTwvaDI+CiAgICAgIDxwPkJsb2cgcG9zdCBjb250ZW50IGdvZXMgaGVyZS4uLjwvcD4KICAgIDwvYXJ0aWNsZT4KICA8L2JvZHk+CjwvaHRtbD4=

## `footer` tag
Defines the bottom part of a webpage or section. Usually contains copyright text, contact info, or related links.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPCEtLSBoZWFkZXIgY29udGVudCAtLT4KICAgIDwvaGVhZGVyPgoKICAgIDxzZWN0aW9uPgogICAgICA8IS0tIHNlY3Rpb24gY29udGVudCAtLT4KICAgIDwvc2VjdGlvbj4KCiAgICA8YXJ0aWNsZT4KICAgICAgPCEtLSBhcnRpY2xlIGNvbnRlbnQgLS0+CiAgICA8L2FydGljbGU+CgogICAgPGZvb3Rlcj4KICAgICAgPHA+JmNvcHk7IE15IFdlYnNpdGUuIEFsbCBSaWdodHMgUmVzZXJ2ZWQuPC9wPgogICAgICA8dWw+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlByaXZhY3kgUG9saWN5PC9hPjwvbGk+CiAgICAgICAgPGxpPjxhIGhyZWY9IiMiPlRlcm1zIG9mIFNlcnZpY2U8L2E+PC9saT4KICAgICAgICA8bGk+PGEgaHJlZj0iIyI+Q29udGFjdCBVczwvYT48L2xpPgogICAgICA8L3VsPgogICAgPC9mb290ZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

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

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

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

Learn how HTML forms the foundation of every website by exploring document structure, text markup, media elements, tables, forms, and semantic HTML. Step-by-step practice leads to building a complete static website using clean, well-structured, and accessible markup.

Exploring Semantic Elements in HTML

`header` tag

`nav` tag

`section` tag

article tag

`footer` tag

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?

Exploring Semantic Elements in HTML

`header` tag

`nav` tag

`section` tag

article tag

`footer` tag

Exploring Semantic Elements in HTML

header tag

nav tag

section tag

article tag

footer tag

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?

Exploring Semantic Elements in HTML

header tag

nav tag

section tag

article tag

footer tag

`header` tag

`nav` tag

`section` tag

`footer` tag

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

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

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

`header` tag

`nav` tag

`section` tag

`footer` tag