Mastering Responsive Web Design
上QQ阅读APP看书,第一时间看更新

The <main> element

As per the Mozilla Developer Network (MDN) definition:

The HTML Main Element (<main>) can be used as a container for the dominant contents of the document. The main content area consists of content that is directly related to, or expands upon the central topic of a section or the central functionality of an application. This content should be unique to the document, excluding any content that is repeated across a set of documents such as sidebars, navigation links, copyright information, site logos, and search forms (unless, of course, the document's main function is as a search form). Unlike <article> and <section>, this element does not contribute to the document outline.

Here are a few important points to remember about the <main> element:

  • The top-level content of a page should be included in the <main> element.
  • The content should be exclusive and unique to it.
  • The <main> element should never be included inside the <header>, <footer>, <nav>, <aside>, or <article> elements.
  • There can only be one <main> element per page.

Consider the following example:

<body>
    <main class="main-container" role="main">Content goes here
    </main>
</body>

Tip

For good measure, use HTML entities for special characters, for example, the ampersand character (&) is &amp; and the ellipsis character (…) is &hellip;.