What is the semantic meaning of the header element in HTML5?

The

The <header></header> element in HTML5 represents a container for introductory or navigational content at the beginning of a section or a webpage. It is a semantic HTML element, meaning it clearly describes its purpose to both browsers and developers.

Typically, a <header></header> contains:

• One or more heading elements (<h1></h1> to <h6></h6>)
• A logo or site branding
• Navigation links or a navigation menu
• Author information or publication date (especially in article-level headers)

Key points about the <header></header> element:

• It doesn't define a heading in the document outline itself — that's what heading tags are for — but rather acts as a structural wrapper for header-related content.
• You can use multiple <header></header> elements on a single page. For example, the overall page might have a top-level <header></header>, and individual <article></article> or <section></section> elements can each have their own <header></header>.
• It is not intended to be used for styling purposes alone; its primary role is to improve document structure and accessibility.

Example:

<header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

Using <header></header> helps screen readers and search engines understand the layout and hierarchy of your content, making your site more accessible and SEO-friendly.

Basically, it’s a way to semantically group introductory content.

The above is the detailed content of What is the semantic meaning of the header element in HTML5?. For more information, please follow other related articles on the PHP Chinese website!