Header, Nav, and Footer Elements


Header, navigation, and footer elements are used to define the main structural sections of a webpage.

These semantic elements make page layouts clear, readable, and meaningful for users, search engines, and assistive technologies.

The Header Element

The header element represents introductory content at the top of a page or section.

It commonly contains the website logo, title, navigation menu, or introductory information.

The header element does not always mean the top of the page.

It can also be used inside sections or articles to introduce content.

The Nav Element

The nav element is used to define navigation links.

It usually contains menus or links that help users move around the website.

Only major navigation links should be placed inside the nav element.

Not every group of links needs to be wrapped in nav.

The Footer Element

The footer element represents the bottom section of a page or section.

It commonly contains copyright information, footer links, contact details, or legal notices.

A webpage can have multiple headers and footers, especially inside articles or sections.

However, the main page layout usually has one primary header and footer.

Why These Elements Matter for Jobs

Header, nav, and footer are fundamental building blocks of modern websites.

Employers expect developers to use these elements correctly instead of generic containers.

Practice Task

Create a simple webpage layout using header, nav, and footer elements. Add at least three navigation links.

What You Will Learn Next

In the next lesson, you will learn how to structure content using section and article elements.