Skip to main content

Header, Footer, and Main

HTML, or HyperText Markup Language, is a foundational tool for creating websites. Semantic elements in HTML provide meaning to the content they wrap, enhancing the overall understandability of your website structure. In this article, we will explore three crucial HTML semantic elements: the Header, Footer, and Main.

What Are Semantic Elements?​

Semantic elements are HTML elements that clearly describe their meaning in a human and machine-readable way. Traditional HTML uses generic elements like div and span which don't convey any meaning about the content. On the other hand, semantic elements like header, footer, and main tell both the browser and the developer about the type of content contained within them.

The Header Element​

The header element is used to contain introductory content or a set of navigational links. Typically, a header contains the website logo, the site's main navigation, and sometimes a site-wide search box.

Here's an example of a header:

<header>
  <h1>Website Title</h1>
  <nav>
    <a href="#">Home</a> |
    <a href="#">About</a> |
    <a href="#">Contact</a>
  </nav>
</header>

In this example, the header contains a title (h1) and a navigation bar (nav).

The footer element is used to contain information about the author, copyright information, contact information, and more. It's typically placed at the bottom of the document or section.

Here's an example of a footer:

<footer>
  <p>Copyright &copy; 2022. All rights reserved.</p>
</footer>

In this example, the footer contains a copyright notice.

The Main Element​

The main element is used to contain the unique content of a document or an application. This is the content that is directly related to, or expands upon the central topic of the document or the central functionality of an application. There should only be one main element per page, and it should be unique to the document, excluding content that is repeated across a set of documents such as site navigation links, header, or footer.

Here's an example of a main element:

<main>
  <h1>Welcome to My Website</h1>
  <p>This is the main content of my website...</p>
</main>

In this example, the main contains the primary content of the webpage.

Conclusion​

Understanding and using HTML semantic elements like header, footer, and main is crucial for structuring your webpages in a meaningful way. Not only do these elements make your code more readable and understandable to you and your team, but they also help with SEO and accessibility, as search engines and assistive technologies use these elements to better understand your webpage.

Start using these elements in your HTML documents and give your code semantic meaning. Happy coding!