1. html
  2. /tags
  3. /header

<header>

Definition

The HTML <header> element is a semantic container used to define the introductory content, or the topmost part of a webpage or section of a page. It typically contains information such as the site's logo, the main navigation menu, and other important information that is relevant to the overall content of the page.

The <header> element can be used in different contexts within a webpage, including:

  • As the main header at the top of a page, typically containing the site's logo and main navigation menu
  • As the header for a section of a page, providing a title or other introductory information
  • As the header for an article, containing the article's title and possibly other metadata such as the author's name and publication date.

It's important to note that the <header> element is not intended to be used for decorative or stylistic purposes. Instead, it should be used to provide meaningful content and structure to the page, helping to convey the page's overall purpose and organization to both human readers and search engines.

Examples

Here's an example of how the <header> element might be used in an HTML document:

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
</head>
<body>

	<header>
		<img src="logo.png" alt="My Website Logo">
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>

	<main>
		<section>
			<header>
				<h2>About Us</h2>
			</header>
			<p>We are a company that specializes in making widgets.</p>
		</section>

		<section>
			<header>
				<h2>Contact Us</h2>
			</header>
			<p>Get in touch with us by filling out the form below:</p>
			<!-- Contact form code goes here -->
		</section>
	</main>

</body>
</html>

In this example, the <header> element is used twice. The first usage is at the top of the page, containing the website's logo and main navigation menu. The second usage is within a <section> element, providing a header for the "About Us" and "Contact Us" sections. By using the <header> element in this way, the page's overall structure and organization are made clear to both human readers and search engines.

Attributes

This element only includes the global attributes.

Best Practices

  • Use the <header> element to provide meaningful content and structure to your page. Avoid using it purely for decorative or stylistic purposes.
  • Use the <header> element at the beginning of a page or section to introduce its main content. This can include things like the page's title, main navigation menu, and other important information.
  • Use only one <header> element per page or section. If you need multiple headers for different parts of the page, use nested <section> elements.
  • Make sure the content of the <header> element is relevant to the overall content of the page or section it's in. Don't include extraneous or unrelated information.
  • Use appropriate heading tags within the <header> element to provide hierarchy and structure to the content. For example, use <h1> for the main page or section title, and <h2> for subheadings within the header.
  • Use semantic tags to markup the content within the <header> element. For example, use <nav> for the main navigation menu and <img> for images.
  • Use CSS to style the <header> element as needed, but avoid using inline styles or including unnecessary styles that could affect the page's performance.

Accessibility Considerations

  • Use appropriate heading tags within the <header> element to provide hierarchy and structure to the content.
  • Ensure that the <header> element is the first element within the <body> of the HTML document. This helps to ensure that screen readers and other assistive technologies can correctly identify the main content of the page.
  • Use descriptive text and alternative text for any images or logos within the <header> element. This helps to ensure that users who cannot see the images can still understand their purpose and meaning.
  • Ensure that any links within the <header> element have clear and descriptive text, and that their purpose is clear from the surrounding content. Avoid using generic text such as "click here" or "read more".
  • Avoid using visual styling alone to convey information within the <header> element. Instead, use HTML tags and text to ensure that the information is accessible to users who cannot see the styling.
  • Use CSS to style the <header> element as needed, but ensure that the styling does not interfere with the accessibility of the content. For example, avoid using background images or colors that make the text difficult to read.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes