Main Element

The main element represents the main content of the web page. It presents unique content that should not include sidebar elements, navigation links, copyright information, logos, and the like that are repeated on different web pages.

We use the main element:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main Element in HTML5</title>
</head>

<body>
    <main>
        <h1>Snapdragon 808 models</h1>
        <p>Smartphones equipped with Snapdragon 808</p>

        <article>
            <h2>Google Nexus 5X</h2>
            <p>Nexus 5X is a compact and durable device for everyday tasks.
                Equipped with a 5.2-inch screen and a Snapdragon 808 hexa-core processor...</p>
        </article>

        <article>
            <h2>Microsoft Lumia 950</h2>
            <p>Using the Microsoft Display Dock, your Lumia 950 Dual SIM smartphone with an external monitor,
                keyboard and mouse turns into a full-fledged computer...</p>
        </article>
    </main>
</body>

</html>

You should not think that absolutely all content must be placed in the main element. No, we can also use other elements outside of it, such as header and footer:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Page Structure</title>
</head>

<body>
    <header>
        ..............
    </header>
    <main>
        .................
    </main>
    <footer>
        .................
    </footer>
</body>

</html>

However, remember that the main element cannot be nested within elements such as article, aside, footer, header, nav. Also, only one main element is allowed per web page.

It is also worth noting that at the moment there are small problems with the support of this element in browsers. In particular, IE 11 does not support this element (all other browsers support it), so in this case you should use the role attribute:

<main role="main">
      ...
</main>

Specifying the role will allow IE11 and older versions of IE to properly interpret the element.