In this chapter, we will thoroughly explore the most common semantic elements in HTML. These elements allow structuring content in a logical and meaningful way, improving accessibility, search engine optimization (SEO), and code maintainability. Understanding and correctly using these elements is essential for building quality websites.

<header>: Page or Section Header

The <header> tag is used to define the header section of a page or a specific section within the page. The <header> can contain the title, logo, navigation menu, and other introductory elements. It is possible to have multiple <header> elements on a page, one for the main header and others for subsections.

Using <header> helps search engines and assistive technologies quickly identify the introduction or purpose of the page or section. Here is a practical example:

html

<nav>: Navigation

The <nav> tag is designed to contain navigation links and enhance the user experience while navigating the page or site. Within <nav>, we typically place a list of links that lead to different sections of the page or other pages within the site.

It's good practice to place navigation elements within a <nav>, as this makes it easier for search engines and assistive technologies to recognize and appropriately present navigation menus.

html

<section>: Grouping Related Content

The <section> tag is used to group thematically related content within a page. It's common to use <section> to divide content into meaningful parts that can include their own header or title.

A good practice is to use <section> when the content within it is relevant and can be uniquely identified, such as in the case of service or product sections.

html

<article>: Independent Content

The <article> tag is intended for blocks of content that can be distributed or reused independently, such as blog posts, news articles, or social media posts. Using <article> facilitates the identification of standalone content, improving its accessibility and visibility.

Each article can have its own <header> and <footer>, providing a clear and coherent structure for the content.

html

<footer>: Footer

The <footer> tag is used for the footer, which can include contact information, copyright notices, links to privacy policies, or additional links. It is common to have a main <footer> for the entire page, and footers can also be used for individual sections or articles.

The <footer> is often one of the first sections where visitors look for relevant information and contact details.

html

Complete Example of Structure with Basic Elements

Below, we present a complete HTML structure using all the basic semantic elements we have learned. This structure is ideal for a simple presentation page or a basic homepage.

html

Conclusion

In this chapter, we have delved into the use of basic semantic elements, such as <header>, <nav>, <section>, <article>, and <footer>. Each of these elements serves a specific function, helping to organize the content in a logical and meaningful way. This not only makes the page easier to understand for search engines and assistive technologies but also improves code maintainability.

In the next chapter, we will learn about text-specific semantic elements and how they can help us communicate the meaning of textual content accurately.