Open In App

HTML <main> Tag

Last Updated : 26 Aug, 2024
Summarize
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report
News Follow

The HTML <main> Tag defines a document’s main content, which should be unique. It excludes content like sidebars, navigation, logos, and copyright info, ensuring unique document-specific material within.

Note: The document must not contain more than one <main> element. The <main> element should not be a child element of an <article>, <aside>, <footer>, <header>, or <nav> element. 

Syntax:

<main>
// contents of main Element
</main>

HTML <main> Tag Examples

Example: In this example, we are using the <main> tag. It encapsulates main content, including headings and articles, conforming to HTML5 semantics.

html
<!DOCTYPE html>
<html>

<head>
    <title>The &lt;Main&gt; Tag</title>
</head>

<body>
    <h1>The &lt;Main&gt; Tag</h1>
    <main>
        <h1>Programming Languages</h1>
        <p>c programming, C++
            Programming, Java Programming</p>

        <article>
            <h1>C Programming</h1>
            <p>C is a Procedural language</p>
        </article>

        <article>
            <h1>C++ Programming</h1>
            <p>C++ programming is a
                Object oriented Programming.</p>
        </article>

        <article>
            <h1>Java Programming</h1>
            <p>Java is a pure Object
                oriented Programming.</p>
        </article>
    </main>

</body>

</html>

Output: 

MainTag

HTML <main> Tag Examples Output

Supported Browsers: The browsers supported by <main> Tag are listed below: 

HTML <main> Tag – FAQs

Can a webpage have multiple <main> tags?

No, a webpage should have only one <main> tag. It is intended to represent the primary content of the page, and using multiple <main> tags would be semantically incorrect.

Where should the <main> tag be placed in the document structure?

The <main> tag should be placed within the <body> tag, typically after elements like <header>, <nav>, and <aside>. It contains the primary content that is the focus of the page.

Is the <main> tag a block-level or inline-level element?

The <main> tag is a block-level element, which means it naturally takes up the full width of its container and starts on a new line.

What kind of content should be inside the <main> tag?

The <main> tag should contain content that is directly related to the main purpose of the page, such as articles, blog posts, product listings, or other central information. It should not include repeated content like headers, footers, navigation menus, or sidebars.

What elements should not be placed inside the <main> tag?

The <main> tag should not contain elements that are repeated across pages, such as <header>, <footer>, and <nav>. It should only include the unique content that defines the purpose of that specific page.


Next Article

Similar Reads

three90RightbarBannerImg
  翻译: