HTMLCSSJavaScript
  1. html
  2. /tags
  3. /main

<main>

Definition

The HTML <main> element is used to enclose the main content of a web page. It is typically used once per page, and should not be nested within other <main> elements. The purpose of the <main> element is to provide a way for developers to indicate to browsers and other software what the main content of a page is, so that it can be easily identified and extracted for use in other contexts, such as search engine indexing or screen reader output.

The <main> element was introduced in HTML5 as a way to distinguish the main content from other parts of the page, such as the header, footer, and navigation. It is intended to make it easier for developers to create accessible web pages by providing a standardized way to mark up the most important content on a page.

When using the <main> element, it is important to ensure that it contains only content that is directly related to the primary purpose of the page. This helps to ensure that the main content is easily identifiable, and makes it easier for users to find the information they are looking for. Additionally, it is a good practice to provide descriptive, semantically meaningful headings within the <main> element to help users navigate the content.

Examples

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

<!DOCTYPE html>
<html>
<head>
	<title>My Website</title>
</head>
<body>
	<header>
		<nav>
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Contact</a></li>
			</ul>
		</nav>
	</header>
	<main>
		<h1>Welcome to my website</h1>
		<p>This is the main content of my website. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare, sapien at consequat lacinia, risus lectus maximus arcu, vel bibendum magna nisi id risus.</p>
		<p>Nulla et augue euismod, luctus lectus eget, interdum risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque ultrices pharetra lectus sed vehicula. Etiam quis odio ut lorem tincidunt bibendum.</p>
		<h2>More information</h2>
		<p>If you're interested in learning more about me, check out the <a href="#">About</a> page.</p>
	</main>
	<footer>
		<p>&copy; 2023 My Website</p>
	</footer>
</body>
</html>

In this example, the <main> element is used to wrap the primary content of the web page, which consists of a heading, several paragraphs of text, and a link to another page. The header and footer of the page are not considered to be part of the main content, and are therefore not contained within the <main> element.

Attributes

This element only includes the global attributes.

Best Practices

  • Use the <main> element only once per page: The <main> element should be used to mark up the main content of a web page, and it should only be used once per page.
  • Place the <main> element directly inside the <body> tag: The <main> element should be placed directly inside the <body> tag, and not nested within any other elements.
  • Use meaningful headings: Use descriptive, semantically meaningful headings (such as <h1>, <h2>, etc.) within the <main> element to help users navigate the content.
  • Ensure that the main content is easily identifiable: The main content of the page should be easily identifiable by both human users and software agents, such as search engines and screen readers.
  • Don't include non-essential content inside the <main> element: Only include content that is directly related to the primary purpose of the page inside the <main> element.
  • Use appropriate markup for different types of content: Use appropriate markup (such as paragraphs, lists, and headings) for different types of content within the <main> element.
  • Avoid using the <main> element for decorative content: The <main> element should not be used to mark up decorative or non-essential content.

Accessibility Considerations

  • Use descriptive headings within the <main> element to help users navigate the content. Headings should accurately describe the content that follows, and should be arranged in a logical order.
  • The main content of the page should be easily identifiable by both human users and software agents, such as search engines and screen readers. This can be accomplished by using appropriate markup, such as headings, paragraphs, and lists, and by avoiding the use of non-semantic elements.
  • Use appropriate markup (such as paragraphs, lists, and headings) for different types of content within the <main> element. This can help users with assistive technology to understand the structure and organization of the content.
  • Non-semantic elements (such as <div> and <span>) should be used sparingly within the <main> element, and only when necessary for layout or other non-essential purposes. This can help to ensure that the content is easily understood by assistive technology.
  • All content within the <main> element should be keyboard accessible, so that users who cannot use a mouse can navigate the content using the keyboard alone.
  • Ensure that the color contrast between the text and the background is sufficient to ensure readability. This is particularly important for users with visual impairments.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes