Description
The HTML element <main> is used to define the main content of an HTML document, which must always be the dominant content.
The main content must be unique and specific to the document.
Ideally, there should not be more than one <main> element defined within a document.
The below table summarizes its usage.
| Usage Details | |
| Parent Elements | <body> |
| Placement | It is displayed as a Block element. |
| Contents | It can contain Block elements, Inline elements, and text. |
| Tags | Both the opening and closing tags are required. |
| Versions | HTML 5 |
Syntax
Here is the basic syntax of the <main> element.
<main>...</main>Examples
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Element - main</title>
</head>
<body>
<header>Hello, Welcome to Random Codez!</header>
<main>
<h1>Web Technologies</h1>
<p>Here is a list of web technologies which help us understand their usage in web development.</p>
<article>
<h2>HTML</h2>
<p>HTML stands for HyperText Markup Language which helps us in defining the layout of a web document.</p>
</article>
<article>
<h2>CSS</h2>
<p>CSS stands for Cascading Style Sheets which helps us in defining the styles of a web document.</p>
</article>
<article>
<h2>JavaScript</h2>
<p>JavaScript helps us in adding dynamic nature to a web document.</p>
</article>
</main>
<footer>Copyright RandomCodez.com</footer>
</body>
</html>Attributes
The following table shows the list of supported and unsupported attributes for the <main> element.
| Attribute Type | Details |
| Element-Specific Attributes | The tag <main> doesn't have any element-specific attributes. |
| Global Attributes | Like all other HTML tags, the tag <main> supports the HTML Global Attributes. |
| Event Attributes | The tags <main> also supports the HTML Event Attributes. |
Browser Compatibility
The tags <main> is supported in all modern browsers.
- Google Chrome 26+
- Internet Explorer or Edge 12+
- Firefox 21+
- Apple Safari 7+
- Opera 16+