The main tag

The main tag is used to define the main content section of the web page.

The content within the web document should be unique between the pages, and not contain replicated data such as navigation links, headers, footers, sidebar data etc.

Within the main tag, you can find articles, standard content which you’ve already seen, and more.

There should be only one main tag on a given web page. However, other web pages within the site may have their own main tag.

This tag will help web crawlers know what content they should focus on for indexing.

<header>...</header>
<main>
    <article>
        <p>All about HTML 5</p>
    </article>
    <article>
        <p>All about CSS 3</p>
    </article>
    <article>
        <p>All about JavaScript</p>
    </article>
</main>
<footer>...</footer>

Since the main tag is used to hold the main contents of the website, sometimes (often) you will want to stylize it to condense the area which the content displays. For example, not allowing the content to spread to the edges of the webpage.

To modify this view, you will use CSS, like you see below.

main {
    width: 80%;
    max-width: 960px;
    margin: auto;
    background-color: #fff;
    padding: 10px;
}

Here we specify that the width is 80% of the containing element, most likely the body tag which is going to be the full width of the page.

However, we use max-width to ensure that it only goes so wide. This way, we can control the width to be within a given range that is acceptable to us. So the width property gives us a guideline, but the max width forces us to stay within an upper size limit.

Notice that width is a percentage, and max-width is fixed number. This is how it is typically done.

We also use a background color so that if the page has a different background color, we can force the main content area of be different, and therefore easier to read. This attribute isn’t required to be set, but can be based upon the design of the page.

The main tag was originally found on Access 2 Learn