HTML5 主要元素的用途
Purpose of the HTML5 main element
我最近一直在研究 HTML 语义,我想知道 <main>
的真正目的是什么。我创建了如下所示的两个场景:
场景一
<main role="main">
<header role="banner">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<section role="region">
<header>
<h1>Articles</h1>
</header>
<article>
<header>
<h1>Article name</h1>
</header>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<footer>
<a href="#" title="Read more">Read this post</a>
</footer>
</article>
<footer>
<a href="#" title="Read more">Read this articles</a>
</footer>
</section>
<footer role="contentinfo">
<p>Page last updated <time datetime="2009-11-04">November 4th, 2009</time></p>
<address>
<a title="Posts by Just A Name" href="#">Just A Name</a>
</address>
</footer>
</main>
场景二
<header role="banner">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<main role="main">
<section role="region">
<header>
<h1>Articles</h1>
</header>
<article>
<header>
<h1>Article name</h1>
</header>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<footer>
<a href="#" title="Read more">Read this post</a>
</footer>
</article>
<footer>
<a href="#" title="Read more">Read this articles</a>
</footer>
</section>
</main>
<footer role="contentinfo">
<p>Page last updated <time datetime="2009-11-04">November 4th, 2009</time></p>
<address>
<a title="Posts by Just A Name" href="#">Just A Name</a>
</address>
</footer>
哪一个是最好的解决方案,为什么?
<main>
元素用于指示页面的主要(主要)内容。如果 role="banner"
对内容有重要意义,您应该选择 场景一 ,否则选择场景二。
This describes/explains <main>
-目的很好。
这些元素的首要原因(<main>
、<header>
、<footer>
、<section>
、<article>
、<nav>
、<aside>
) 被引入是为了表明文档大纲的重要性。
如果您要编制各种章节索引,您会希望查看 <main>
中的 heading-elements,而忽略 <nav>
和 <aside>
部分。这也是 html5 允许多个 <h1>
元素的原因,因为它们的重要性取决于它们所在的元素(与 HTML < 5 相比,其中 heading-elements 本身将在文档中表示重要性)。
根据 W3C,main
应仅用于该文档独有的内容,因此在您的情况下,情况 #2 是最合适的。
The main
element represents the main content section of the body
of a
document or application. The main
content section consists of content
that is directly related to or expands upon the central topic of a
document or central functionality of an application.
Note: the main
element is not sectioning content and has no effect on
the document outline
The main
content section of a document includes content that is unique
to that document and excludes content that is repeated across a set of
documents such as site navigation links, copyright information, site
logos and banners and search forms (unless the document or
applications main
function is that of a search form).
Authors MUST NOT include more than one main
element in a document.
Authors MUST NOT include the main
element as a child of an article
,
aside
, footer
, header
or nav
element.
除了已经回答的内容,从here中提取的重要观点是:
<main>
doesn't contribute to the document's outline; that is, unlike
elements such as <body>
, headings such as <h2>
, and such, <main>
doesn't affect the DOM's concept of the structure of the page. It's
strictly informative.
我最近一直在研究 HTML 语义,我想知道 <main>
的真正目的是什么。我创建了如下所示的两个场景:
场景一
<main role="main">
<header role="banner">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<section role="region">
<header>
<h1>Articles</h1>
</header>
<article>
<header>
<h1>Article name</h1>
</header>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<footer>
<a href="#" title="Read more">Read this post</a>
</footer>
</article>
<footer>
<a href="#" title="Read more">Read this articles</a>
</footer>
</section>
<footer role="contentinfo">
<p>Page last updated <time datetime="2009-11-04">November 4th, 2009</time></p>
<address>
<a title="Posts by Just A Name" href="#">Just A Name</a>
</address>
</footer>
</main>
场景二
<header role="banner">
<hgroup>
<h1>Header 1</h1>
<h2>Header 2</h2>
</hgroup>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<main role="main">
<section role="region">
<header>
<h1>Articles</h1>
</header>
<article>
<header>
<h1>Article name</h1>
</header>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<footer>
<a href="#" title="Read more">Read this post</a>
</footer>
</article>
<footer>
<a href="#" title="Read more">Read this articles</a>
</footer>
</section>
</main>
<footer role="contentinfo">
<p>Page last updated <time datetime="2009-11-04">November 4th, 2009</time></p>
<address>
<a title="Posts by Just A Name" href="#">Just A Name</a>
</address>
</footer>
哪一个是最好的解决方案,为什么?
<main>
元素用于指示页面的主要(主要)内容。如果 role="banner"
对内容有重要意义,您应该选择 场景一 ,否则选择场景二。
This describes/explains <main>
-目的很好。
这些元素的首要原因(<main>
、<header>
、<footer>
、<section>
、<article>
、<nav>
、<aside>
) 被引入是为了表明文档大纲的重要性。
如果您要编制各种章节索引,您会希望查看 <main>
中的 heading-elements,而忽略 <nav>
和 <aside>
部分。这也是 html5 允许多个 <h1>
元素的原因,因为它们的重要性取决于它们所在的元素(与 HTML < 5 相比,其中 heading-elements 本身将在文档中表示重要性)。
根据 W3C,main
应仅用于该文档独有的内容,因此在您的情况下,情况 #2 是最合适的。
The
main
element represents the main content section of thebody
of a document or application. Themain
content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.Note: the
main
element is not sectioning content and has no effect on the document outlineThe
main
content section of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applicationsmain
function is that of a search form).Authors MUST NOT include more than one
main
element in a document.Authors MUST NOT include the
main
element as a child of anarticle
,aside
,footer
,header
ornav
element.
除了已经回答的内容,从here中提取的重要观点是:
<main>
doesn't contribute to the document's outline; that is, unlike elements such as<body>
, headings such as<h2>
, and such,<main>
doesn't affect the DOM's concept of the structure of the page. It's strictly informative.