1. html
  2. /tags
  3. /h1-h6

<h1>–<h6>

Definition

The HTML <h1> through <h6> elements represent six levels of headings in a document, with <h1> being the highest level and <h6> the lowest. These elements are used to structure and organize content on a web page, with the most important headings using the <h1> tag, and subsequent subheadings using the lower-level tags.

For example, a web page might use an <h1> tag for the main page title, followed by several <h2> tags for section headings, and <h3> tags for sub-section headings within those sections.

The text inside the <h1> through <h6> tags is typically displayed in larger and bolder text than normal text, making it easy for users to quickly identify the main topics and subtopics of the content. Additionally, search engines use headings as an indicator of the page's content structure, which can impact search engine optimization (SEO) and the visibility of the page in search results.

Examples

Here's an example of how the HTML <h1> through <h6> elements can be used to create headings of different levels:

<!DOCTYPE html>
<html>
<head>
	<title>Example Page</title>
</head>
<body>
	<header>
		<h1>Main Page Title</h1>
		<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>
			<h2>Section 1</h2>
			<p>Content goes here.</p>
			<h3>Subsection 1.1</h3>
			<p>Content goes here.</p>
			<h3>Subsection 1.2</h3>
			<p>Content goes here.</p>
		</section>

		<section>
			<h2>Section 2</h2>
			<p>Content goes here.</p>
			<h3>Subsection 2.1</h3>
			<p>Content goes here.</p>
			<h3>Subsection 2.2</h3>
			<p>Content goes here.</p>
		</section>
	</main>

	<footer>
		<p>&copy; 2023 Example Company</p>
	</footer>
</body>
</html>

In this example, we have a basic HTML document with a header, main content area, and footer. Inside the header, we have an <h1> tag used for the main page title, as well as a navigation menu created using an unordered list.

Inside the main content area, we have two <section> tags, each with an <h2> tag used as a section heading. Within each section, we have two <h3> tags used as subheadings for subsections within the sections.

The text inside the heading tags is styled differently from the normal paragraph text, with larger and bolded text. When rendered in a web browser, the headings will be displayed with different sizes and emphasis to visually indicate their level of importance and hierarchy on the page.

Attributes

These elements only include the global attributes.

Best Practices

  • Headings should be used to structure content into a hierarchical order that makes sense for the content. This means using <h1> for the main page heading and subsequent headings for sub-sections and subheadings within those sections.
  • Headings are important for accessibility because they allow screen readers to navigate and present the content to users. It's important to use headings in a logical and consistent way to make the content accessible to all users.
  • It's important to use the heading levels in the correct order and not skip levels. For example, if you have an <h2> heading, you should not follow it with an <h4> heading. This can confuse users and affect the accessibility of the content.
  • Headings should be used to structure content and convey meaning. They should not be used solely for styling purposes or to make text larger or bolded.
  • Headings should be brief and descriptive, providing a clear indication of what the content is about. Avoid using overly long or verbose headings, as this can make the content harder to scan and read.
  • Headings can have different visual styles depending on the browser, screen size, and device used to view the content. It's important to test the visual appearance of headings to ensure they are clear and easy to read on different devices.

Accessibility Considerations

  • Headings should be used to structure content in a logical and hierarchical order. This makes it easier for screen reader users to navigate and understand the content.
  • Skipping heading levels can make it difficult for screen reader users to understand the structure of the content. Always use headings in the correct order and avoid skipping levels.
  • Headings should be descriptive and clearly indicate what the content is about. This helps screen reader users understand the context of the content and navigate it more efficiently.
  • Use semantic HTML to create headings, which means using the appropriate HTML element for the type of content being created. For example, use <h1> for the main page heading and <h2> for subheadings, rather than using non-semantic elements like <div> and styling them to look like headings.
  • Headings should be used for structural and semantic purposes, not for visual styling. Avoid using headings solely for visual effects like making text larger or bolded, as this can create confusion for screen reader users.
  • Test the headings with a screen reader to ensure that they are being read in the correct order and that they are descriptive and easy to understand.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes