Semantics
HTML Header
Defining Header Content
HTML header element groups introductory content, often with navigation.
What is the HTML <header> Element?
The HTML <header> element represents a container for introductory content or set of navigational links. A <header> element typically contains:
- One or more heading elements (<h1>–<h6>)
- Logo or icon
- Authors of the document
- Navigation links
Basic Structure of a <header> Element
A typical <header> element includes headings, navigation, and sometimes logo images. Here's a simple example:
Using <header> in Multiple Sections
The <header> element can be used not only at the top of the page but also within sections, articles, and asides, to introduce content related to that specific section. Here is an example:
Accessibility and SEO Benefits
Using the <header> element helps improve the accessibility of your website by providing a clear structure for screen readers. It also aids in SEO by enabling search engines to better understand the content hierarchy of your page.
Ensure that each section's header is appropriately marked to provide a logical flow of content, which is crucial for both user experience and search engine indexing.
Common Mistakes to Avoid
While using the <header> element, avoid the following common mistakes:
- Using multiple <header> elements within a single section without distinct purposes.
- Placing <header> elements where no introductory content or navigation is needed.
- Overusing <header> elements for styling purposes instead of structural purposes.
- Previous
- Semantic Elements
- Next
- Footer
