HTML: <main> tag
This HTML tutorial explains how to use the HTML element called the <main> tag with syntax and examples.
Description
The HTML <main> tag is an HTML5 element that defines the main content in the HTML document and there should only be one <main> element in a document. This tag is also commonly referred to as the <main> element.
Syntax
In HTML, the syntax for the <main> tag is:
<body>
<main role="main">
<h1>TechOnTheNet.com</h1>
<p>Your trusted resource for learning new technologies.</p>
<article>
<h2>HTML</h2>
<p>Learn HTML (HyperText Markup Language) with our step-by-step tutorials and references.</p>
</article>
<article>
<h2>CSS</h2>
<p>Learn CSS (Cascading Style Sheets) with our step-by-step tutorials and references.</p>
</article>
</main>
</body>
Sample Output
Attributes
Only the Global Attributes apply to the <main> tag. There are no attributes that are specific to the <main> tag.
Note
- The HTML <main> element is an HTML5 element that is found within the <body> tag.
- The <main> tag should not be used for repeated content such as navigation, site logos, social media links, copyright information and sidebars.
- It is recommended that you use an ARIA role of "main" on the <main> element so that it is accessible by screen readers in older browsers, for example:
<main role="main">
- For IE browsers older than IE 9, use HTML5shiv which is a javascript workaround to provide support for the new HTML5 elements such as: <header>, <main>, <article>, <section>, <aside>, <nav>, <footer>.
Browser Compatibility
The <main> tag has basic support with the following browsers:
- Chrome 26+
- Android
- Firefox 21+
- Firefox Mobile 21+
- Internet Edge 12+
- Edge Mobile 12+
- Opera 16+
- Opera Mobile
- Safari 7+ (WebKit)
- Safari Mobile 7.1+
Example
We will discuss the <main> tag below, exploring examples of how to use the <main> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.
Advertisements