Html HTML5 最佳实践；部分/标题/旁白/文章元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4781077/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 best practices; section/header/aside/article elements
提问by Bas van Dorst
There is enough information about HTML5 on the web (and also on stackoverflow), but now I'm curious about the "best practices". Tags like section/headers/article are new, and everyone has different opinions about when/where you should use these tags. So what do you guys think of the following layout and code?
网络上有足够的关于 HTML5 的信息（以及 stackoverflow），但现在我对“最佳实践”很好奇。像节/标题/文章这样的标签是新的，每个人对何时/何地应该使用这些标签都有不同的看法。那么你们如何看待以下布局和代码？
1 <!doctype html>
2 <head>
3 <title>Website</title>
4 </head>
5
6 <body>
7 <section>
8 <header>
9 <div id="logo"></div>
10 <div id="language"></div>
11 </header>
12
13 <nav>
14 <ul>
15 <li>menu 1</li>
16 <li>menu 2</li>
17 <li>menu 3</li>
18 <li>menu 4</li>
19 <li>menu 5</li>
20 </ul>
21 </nav>
22
23 <div id="main">
24 <div id="main-left">
25 <article>
26 <header><h1>This is a title</h1></header>
27
28 <p>Lorem ipsum dolor sit amet, consectetur
29 adipiscing elit. Quisque semper, leo eget</p>
30
31 <p>Lorem ipsum dolor sit amet, consectetur
32 adipiscing elit. Quisque semper, leo eget</p>
33
34 <p>Lorem ipsum dolor sit amet, consectetur
35 adipiscing elit. Quisque semper, leo eget</p>
36
37 <p>Lorem ipsum dolor sit amet, consectetur
38 adipiscing elit. Quisque semper, leo eget</p>
39 </article>
40 </div>
41
42 <div id="main-right">
43 <section id="main-right-hot">
44 <h2>Hot items</h2>
45 <ul>
46 <li>Lorem ipsum</li>
47 <li>dolor sit</li>
48 <li>...</li>
49 </ul>
50 </section>
51
52 <section id="main-right-new">
53 <h2>New items</h2>
54 <ul>
55 <li>Lorem ipsum</li>
56 <li>dolor sit</li>
57 <li>...</li>
58 </ul>
59 </section>
60 </div>
61 </div>
62
63 <div id="news-items">
64 <header><h2>The latest news</h2></header>
65
66 <div id="item_1">
67 <article>
68 <header>
69 <img src="#" title="titel artikel" />
70 <h3>Lorem ipsum .....</h3>
71 </header>
72 <p>Lorem ipsum dolor sit amet,
73 adipiscing elit. Quisque semper, </p>
74 <a href="#">Read more</a>
75 </article>
76 </div>
77
78
79 <div id="item_2">
80 <article>
81 <header>
82 <img src="#" title="titel artikel" />
83 <h3>Lorem ipsum .....</h3>
84 </header>
85 <p>Lorem ipsum dolor sit amet,
86 adipiscing elit. Quisque semper, </p>
87 <a href="#">Read more</a>
88 </article>
89 </div>
90
91
92 <div id="item_3">
93 <article>
94 <header>
95 <img src="#" title="titel artikel" />
96 <h3>Lorem ipsum .....</h3>
97 </header>
98 <p>Lorem ipsum dolor sit amet,
99 adipiscing elit. Quisque semper, </p>
100 <a href="#">Read more</a>
101 </article>
102 </div>
103 </div>
104
105 <footer>
106 <ul>
107 <li>menu 1</li>
108 <li>menu 2</li>
109 <li>menu 3</li>
110 <li>menu 4</li>
111 <li>menu 5</li>
112 </ul>
113 </footer>
114 </section>
115 </body>
116 </html>
line 7. sectionaround the whole website? Or only a div?
line 7.section围绕整个网站？还是只有一个div？
line 8. Each sectionstart with a header?
第 8 行。每个都section以header?开头。
line 23. Is this divright? or must this be a section?
第 23 行。这是div对的吗？或者这必须是一个section？
line 24. Split left/right column with a div.
第 24 行div。用.分割左/右列。
line 25. Right place for the articletag?
第 25 行。article标签的正确位置？
line 26. Is it required to put your h1-tag in the header-tag?
第 26 行。是否需要将您的h1-tag 放在header-tag 中？
line 43. The content is not related to the main article, so I decided this is a sectionand not a aside.
第 43 行。内容与主条目无关，所以我决定这是一个section而不是一个aside。
line 44. H2 without header
第 44 行。 H2 没有 header
line 53. sectionwithout header
第53行section不header
line 63. Div with all (non-related) news items
第 63 行。包含所有（非相关）新闻项目的 Div
line 64. headerwith h2
第 64 行。header带有 h2
line 65. Hmm, divor section? Or remove this divand only use the article-tag
第 65 行。嗯，div还是section？或者删除它div并只使用article-tag
line 105. Footer :-)
第 105 行。页脚 :-)
采纳答案by Nathan J.B.
Actually, you are quite right when it comes to header/footer. Here is some basic information on how each of the major HTML5 tags can/should be used (I suggest reading the full source linked at the bottom):
实际上，当涉及到页眉/页脚时，您是对的。以下是关于如何/应该如何使用每个主要 HTML5 标签的一些基本信息（我建议阅读底部链接的完整源代码）：
section– Used for grouping together thematically-related content. Sounds like a div element, but it's not. The div has no semantic meaning. Before replacing all your div's with section elements, always ask yourself: “Is all of the content related?”
aside– Used for tangentially related content. Just because some content appears to the left or right of the main content isn't enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.
header– There is a crucial difference between the header element and the general accepted usage of header (or masthead). There's usually only one header or ‘masthead' in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”
nav– Intended for major navigation information. A group of links grouped together isn't enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.
footer– Sounds like its a description of the position, but its not. Footer elements contain informations about its containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.
Source: https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
section– 用于将主题相关的内容组合在一起。听起来像一个 div 元素，但它不是。div 没有语义意义。在用部分元素替换所有 div 之前，请始终问自己：“所有内容都相关吗？”
旁边– 用于切线相关的内容。仅仅因为某些内容出现在主要内容的左侧或右侧并不足以成为使用 aside 元素的理由。问问自己是否可以删除旁边的内容而不减少主要内容的含义。Pullquotes 是切线相关内容的一个例子。
标头- 标头元素与标头（或刊头）的普遍接受用法之间存在重大差异。一页中通常只有一个标题或“刊头”。在 HTML5 中，您可以拥有任意数量的。该规范将其定义为“一组介绍性或导航性的辅助工具”。您可以在网站的任何部分使用标题。事实上，您可能应该在大多数部分中使用标题。该规范将 section 元素描述为“内容的主题分组，通常带有标题”。
nav– 用于主要导航信息。组合在一起的一组链接不足以成为使用 nav 元素的理由。另一方面，站点范围的导航属于导航元素。
页脚- 听起来像是对位置的描述，但实际上不是。页脚元素包含有关其包含元素的信息：作者、版权、相关内容的链接等。虽然我们通常对整个文档只有一个页脚，但 HTML5 允许我们在节中也有页脚。
来源：https: //clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
Additionally, here's a description on article, not found in the source above:
此外，这里有一个关于 的描述article，在上面的来源中找不到：
article– Used for element that specifies independent, self-contained content. An article should make sense on its own. Before replacing all your div's with article elements, always ask yourself: “Is it possible to read it independently from the rest of the web site?”
article– 用于指定独立、自包含内容的元素。一篇文章本身就应该有意义。在用文章元素替换所有 div 之前，请始终问自己：“是否可以独立于网站的其余部分阅读它？”
回答by Robert Siemer
Unfortunately the answers given so far (including the most voted) are either "just" common sense, plain wrong or confusing at best. Noneof crucial keywords1pop up!
不幸的是，到目前为止给出的答案（包括投票最多的答案）要么是“只是”常识，要么是完全错误的，要么充其量是令人困惑的。没有一个关键关键字1弹出！
I wrote 3 answers:
我写了3个答案：
- This explanation (start here).
- Concrete answers to OP's questions.
- Improved detailed HTML.
- 这个解释（从这里开始）。
- OP问题的具体答案。
- 改进了详细的 HTML。
To understand the role of the html elements discussed here you have to know that some of them section the document. Each and every html document can be sectioned according to the HTML5 outline algorithmfor the purpose of creating an outline—or—table of contents (TOC). The outline is not generally visible (these days), but authors should use html in such a way that the resulting outline reflects their intentions.
要了解此处讨论的 html 元素的作用，您必须知道其中一些元素是文档的一部分。可以根据HTML5 大纲算法对每个 html 文档进行分段，以创建大纲 - 或 - 目录 (TOC)。大纲通常不可见（这些天），但作者应该以这样的方式使用 html，以便生成的大纲反映他们的意图。
You can create sections with exactlythese elements and nothing else:
您可以创建段正是这些元素和没有别的：
- creating (explicit) subsections
<section>sections<article>sections<nav>sections<aside>sections
- creating sibling sections or subsections
- sections of unspecified type with
<h*>2(not all do this, see below)
- sections of unspecified type with
- to level up close the current explicit (sub)section
- 创建（显式）小节
<section>部分<article>部分<nav>部分<aside>部分
- 创建同级节或小节
- 带有
<h*>2的未指定类型的部分（并非全部都这样做，见下文）
- 带有
- 升级关闭当前显式（子）部分
Sections can be named:
部分可以命名为：
<h*>created sections name themselves<section|article|nav|aside>sections will be named by the first<h*>if there is one- these
<h*>are the only ones which don't create sections themselves
- these
<h*>创建的部分名称自己<section|article|nav|aside><h*>如果有， 部分将按第一个命名- 这些
<h*>是唯一不自己创建部分的部分
- 这些
There is one more thing to sections: the following contexts (i.e. elements) create "outline boundaries". Whatever sections they contain is private to them:
部分还有一件事：以下上下文（即元素）创建“大纲边界”。它们包含的任何部分都是私有的：
- the document itself with
<body> - table cells with
<td> <blockquote><details>,<dialog>,<fieldset>, and<figure>- nothingelse
- 文件本身与
<body> - 表格单元格
<td> <blockquote><details>,<dialog>,<fieldset>, 和<figure>- 没有别的
example HTML<body>
<h3>if you want siblings
at top level...</h3>
<h3>...you have to use untyped
sections with <h*>...</h3>
<article>
<h1>...as any other section
will descent</h1>
</article>
<nav>
<ul>
<li><a href=...>...</a></li>
</ul>
</nav>
</body>has this outline1. if you want siblings
at top level...
2. ...you have to use untyped
sections with <h*>...
2.1. ...as any other section
will descent
2.2. (unnamed navigation)
example HTML<body>
<h3>if you want siblings
at top level...</h3>
<h3>...you have to use untyped
sections with <h*>...</h3>
<article>
<h1>...as any other section
will descent</h1>
</article>
<nav>
<ul>
<li><a href=...>...</a></li>
</ul>
</nav>
</body>has this outline1. if you want siblings
at top level...
2. ...you have to use untyped
sections with <h*>...
2.1. ...as any other section
will descent
2.2. (unnamed navigation)
This raises two questions:
这就提出了两个问题：
What is the difference between <article>and <section>?
<article>和 和有<section>什么区别？
- both can:
- be nested in each other
- take a different notion in a different context or nesting level
<section>s are like book chapters- they usually have siblings (maybe in a different document?)
- together they have something in common, like chapters in a book
- one author, one
<article>, at least on the lowest level- standard example: a single blog comment
- a blog entry itself is also a good example
- a blog entry
<article>and its comment<article>s could also be wrapped with an<article> - it's some "complete" thing, not a part in a series of similar
<section>s in an<article>are like chapters in a book<article>s in a<section>are like poems in a volume (within a series)
- 两者都可以：
- 相互嵌套
- 在不同的上下文或嵌套级别中采用不同的概念
<section>s 就像书的章节- 他们通常有兄弟姐妹（可能在不同的文件中？）
- 它们在一起有一些共同点，就像书中的章节一样
- 一位作者，一位
<article>，至少在最低级别- 标准示例：单个博客评论
- 博客条目本身也是一个很好的例子
- 博客条目
<article>及其评论<article>也可以用<article> - 这是一些“完整”的东西，而不是一系列类似的一部分
<section>s 中的 s<article>就像书中的章节<article>a<section>中的s就像一卷中的诗（在一个系列中）
How do <header>, <footer>and <main>fit in?
如何做<header>，<footer>以及<main>适合吗？
- they have zero influenceon sectioning
<header>and<footer>- they allow you to mark zones of each and everysection
- even within a section you can have them several times
- to differentiate from the main part in this section
- limited only by the author's taste
<header>- may mark the title/name of this section
- may contain a logo for this section
- has no need to be at the top or upper part of the section
<footer>- may mark the credits/author of this section
- can come at the top of the section
- can even be above a
<header>
<main>- only allowed once
- marks the main part of the top level section (i.e. the document,
<body>that is) - subsections themselves have no markup for their main part
<main>can even “hide” in some subsections of the document, while document's<header>and<footer>can't (that markup would mark header/footer of that subsection then)- but it is not allowed in
<article>sections3
- but it is not allowed in
- helps to distinguish “the real thing” from document's non-header, non-footer, non-main content, if that makes sense in your case...
- 它们对切片的影响为零
<header>和<footer>- 它们允许您标记每个部分的区域
- 即使在一个部分中，您也可以多次使用它们
- 区别于本节的主要部分
- 只受作者口味限制
<header>- 可以标记本节的标题/名称
- 可能包含此部分的徽标
- 无需位于该部分的顶部或上部
<footer>- 可以标记本节的学分/作者
- 可以出现在该部分的顶部
- 甚至可以高于
<header>
<main>- 只允许一次
- 标记顶级部分的主要部分（即文档，
<body>即） - 小节本身没有对其主要部分的标记
<main>可以在文档的某些小节甚至是“隐藏”，而文档的<header>和<footer>不能（该标记将标志着头该款/页脚然后）- 但在
<article>第3节中是不允许的
- 但在
- 有助于将“真实内容”与文档的非页眉、非页脚、非主要内容区分开来，如果这对您来说有意义的话……
1to mind comes: outline, algorithm, implicit sectioning
2I use <h*>as shorthand for <h1>, <h2>, <h3>, <h4>, <h5>and <h6>
3neither is <main>allowed in <aside>or <nav>, but that is of no surprise. – In effect: <main>can only hide in (nested) descending <section>sections or appear at top level, namely <body>
1在脑海中谈到：大纲，算法，隐切片
2我使用<h*>的简写<h1>，<h2>，<h3>，<h4>，<h5>和<h6>
3既不是<main>允许<aside>或者<nav>，但没有惊喜。– 实际上：<main>只能隐藏在（嵌套的）下行<section>部分或出现在顶层，即<body>
回答by cilerler
The markup for that document could look like the following:
该文档的标记可能如下所示：
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>
You may find more information in this article on A List Apart.
您可以在 A List Apart 上的这篇文章中找到更多信息。
回答by Justin
I'd suggest reading the W3 wiki page about structuring HTML5:
我建议阅读有关构建 HTML5的W3 wiki 页面：
<header>Used to contain the header content of a site.<footer>Contains the footer content of a site.<nav>Contains the navigation menu, or other navigation functionality for the page.
<article>Contains a standalone piece of content that would make
sense if syndicated as an RSS item, for example a news item.
<section>Used to either group different articles into different
purposes or subjects, or to define the different sections of a single article.
<aside>Defines a block of content that is related to the main content around it, but not central to the flow of it.
<header>用于包含站点的标题内容。<footer>包含站点的页脚内容。<nav>包含页面的导航菜单或其他导航功能。
<article>包含
如果联合为 RSS 项目（例如新闻项目）则有意义的独立内容。
<section>用于将不同的文章分为不同的
目的或主题，或定义单个文章的不同部分。
<aside>定义与周围主要内容相关的内容块，但不是其流的中心。
They include an imagethat I've cleaned up here:
它们包括我在这里清理的图像：
In code, this looks like so:
<body> <header></header> <nav></nav> <section id="sidebar"></section> <section id="content"></section> <aside></aside> <footer></footer> </body>Let's explore some of the HTML5 elements in more detail.
<section>The
<section>element is for containing distinct different areas of functionality or subjects area, or breaking an article or story up into different sections. So in this case: "sidebar1" contains various useful links that will persist on every page of the site, such as "subscribe to RSS" and "Buy music from store". "main" contains the main content of this page, which is blog posts. On other pages of the site, this content will change. It is a fairly generic element, but still has way more semantic meaning than the plain old<div>.
<article>
<article>is related to<section>, but is distinctly different. Whereas<section>is for grouping distinct sections of content or functionality,<article>is for containing related individual standalone pieces of content, such as individual blog posts, videos, images or news items. Think of it this way - if you have a number of items of content, each of which would be suitable for reading on their own, and would make sense to syndicate as separate items in an RSS feed, then<article>is suitable for marking them up. In our example,<section id="main">contains blog entries. Each blog entry would be suitable for syndicating as an item in an RSS feed, and would make sense when read on its own, out of context, therefore<article>is perfect for them:<section id="main"> <article><!-- first blog post --></article> <article><!-- second blog post --></article> <article><!-- third blog post --></article> </section>Simple huh? Be aware though that you can also nest sections inside articles, where it makes sense to do so. For example, if each one of these blog posts has a consistent structure of distinct sections, then you could put sections inside your articles as well. It could look something like this:
<article> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> </article>
<header>and<footer>as we already mentioned above, the purpose of the
<header>and<footer>elements is to wrap header and footer content, respectively. In our particular example the<header>element contains a logo image, and the<footer>element contains a copyright notice, but you could add more elaborate content if you wished. Also note that you can have more than one header and footer on each page - as well as the top level header and footer we have just discussed, you could also have a<header>and<footer>element nested inside each<article>, in which case they would just apply to that particular article. Adding to our above example:<article> <header></header> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> <footer></footer> </article>
<nav>The
<nav>element is for marking up the navigation links or other constructs (eg a search form) that will take you to different pages of the current site, or different areas of the current page. Other links, such as sponsored links, do not count. You can of course include headings and other structuring elements inside the<nav>, but it's not compulsory.
<aside>you may have noticed that we used an
<aside>element to markup the 2nd sidebar: the one containing latest gigs and contact details. This is perfectly appropriate, as<aside>is for marking up pieces of information that are related to the main flow, but don't fit in to it directly. And the main content in this case is all about the band! Other good choices for an<aside>would be information about the author of the blog post(s), a band biography, or a band discography with links to buy their albums.Where does that leave
<div>?So, with all these great new elements to use on our pages, the days of the humble
<div>are numbered, surely? NO. In fact, the<div>still has a perfectly valid use. You should use it when there is no other more suitable element available for grouping an area of content, which will often be when you are purely using an element to group content together for styling/visual purposes. A common example is using a<div>to wrap all of the content on the page, and then using CSS to centre all the content in the browser window, or apply a specific background image to the whole content.
在代码中，这看起来像这样：
<body> <header></header> <nav></nav> <section id="sidebar"></section> <section id="content"></section> <aside></aside> <footer></footer> </body>让我们更详细地探讨一些 HTML5 元素。
<section>该
<section>元素用于包含不同的功能或主题区域，或者将文章或故事分成不同的部分。所以在这种情况下：“sidebar1”包含各种有用的链接，这些链接将保留在站点的每个页面上，例如“订阅 RSS”和“从商店购买音乐”。“main”包含此页面的主要内容，即博客文章。在网站的其他页面上，此内容将更改。它是一个相当通用的元素，但仍然比普通的 old 具有更多的语义含义<div>。
<article>
<article>与 相关<section>，但明显不同。而<section>对于分组的内容或功能不同的部分，<article>是包含内容相关的各个独立的部件，如个人博客文章，视频，图片或新闻项目。可以这样想 - 如果您有多个内容项，每个项都适合单独阅读，并且在 RSS 提要中作为单独的项目联合起来是有意义的，那么<article>适合标记它们。在我们的示例中，<section id="main">包含博客条目。每个博客条目都适合作为 RSS 提要中的一个项目进行联合，并且在脱离上下文单独阅读时是有意义的，因此<article>非常适合他们：<section id="main"> <article><!-- first blog post --></article> <article><!-- second blog post --></article> <article><!-- third blog post --></article> </section>简单吧？但请注意，您也可以在文章中嵌套部分，这样做是有意义的。例如，如果这些博客文章中的每一篇都具有一致的不同部分的结构，那么您也可以将部分放在您的文章中。它可能看起来像这样：
<article> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> </article>
<header>和<footer>正如我们上面已经提到的，
<header>和<footer>元素的目的是分别包装页眉和页脚内容。在我们的特定示例中，<header>元素包含徽标图像，<footer>元素包含版权声明，但如果您愿意，可以添加更详细的内容。另请注意，每个页面上可以有多个页眉和页脚 - 以及我们刚刚讨论的顶级页眉和页脚，您还可以在 each 内嵌套一个<header>and<footer>元素<article>，在这种情况下，它们将仅适用于特别的文章。添加到我们上面的例子中：<article> <header></header> <section id="introduction"></section> <section id="content"></section> <section id="summary"></section> <footer></footer> </article>
<nav>该
<nav>元素用于标记导航链接或其他结构（例如搜索表单），将您带到当前站点的不同页面或当前页面的不同区域。其他链接，例如赞助商链接，不计算在内。您当然可以在 中包含标题和其他结构元素<nav>，但这不是强制性的。
<aside>您可能已经注意到我们使用了一个
<aside>元素来标记第二个侧边栏：包含最新演出和联系方式的那个。这是非常合适的，因为<aside>用于标记与主要流程相关但不直接适合它的信息片段。而本案的主要内容都是关于乐队的！其他不错的选择<aside>是有关博客文章作者的信息、乐队传记或带有购买专辑链接的乐队唱片。哪里去了
<div>？那么，有了所有这些伟大的新元素在我们的页面上使用，谦虚的日子
<div>肯定已经屈指可数了？不。事实上，<div>仍然有一个完全有效的用途。当没有其他更合适的元素可用于对内容区域进行分组时，您应该使用它，这通常是当您纯粹使用元素将内容组合在一起以进行样式/视觉目的时。一个常见的例子是使用 a<div>来包装页面上的所有内容，然后使用 CSS 将所有内容在浏览器窗口中居中，或者将特定的背景图像应用于整个内容。
回答by Robert Siemer
[explanations in my “main answer”]
line 7. sectionaround the whole website? Or only a div?
线7节整个网站的身边？还是只有一个div？
Neither. For styling: use the <body>, it's already there. For sectioning/semantics: as detailed in my example HTMLits effect is contrary to usefulness. Extra wrappers to already wrapped content is no improvement, but noise.
两者都不。对于样式：使用<body>，它已经存在。对于分段/语义：如我的示例 HTML 中所述，其效果与实用性相反。对已包装内容的额外包装没有改进，而是噪音。
line 8. Each section start with a header?
第 8 行。每个部分都以标题开头？
No, it is the author's choice where to put content typically summarized as “header”. And if that header-content is clearly recognizable without extra marking, it may perfectly stay without <header>. This is also the author's choice.
不，作者可以选择将通常概括为“标题”的内容放在哪里。如果该标题内容无需额外标记即可清晰识别，则它可能完全没有<header>. 这也是作者的选择。
line 23. Is this divright? or must this be a section?
第 23 行。这个div对吗？或者这必须是一个部分？
The <div>is probably wrong. It depends on the intentions: is it for styling only it could be right. If it's for semantic purposes it is wrong: it should be an <article>instead as shown in my other answer. <article>is also right if it is for both styling and sectioning combined.
的<div>可能是错误的。这取决于意图：是否仅用于造型，它可能是正确的。如果它是语义的目的是错误的：它应该是一个<article>，而不是因为我在其他的答案中所示。<article>如果将样式和切片结合起来，也是对的。
<section>looks wrong here, as there are no similar sections before or after this one, like chapters in a book. (This is the purpose of <section>).
<section>这里看起来不对，因为在此之前或之后没有类似的部分，就像书中的章节一样。（这是目的<section>）。
line 24. Split left/right column with a div.
第 24 行。用div拆分左/右列。
No. Why?
没有为什么？
line 25. Right place for the articletag?
第 25 行。文章标签的正确位置？
Yes, makes sense.
是的，有道理。
line 26. Is it required to put your h1-tag in the header-tag?
第 26 行。是否需要将您的h1-tag 放在标题-tag 中？
No. A lone <h*>element probably never needs to go in a <header>(but it can if you want to) as it is already clear that it's the heading of what is about to come. – It would make sense if that <header>also encompassed a tagline (marked with <p>), for example.
不。一个单独的<h*>元素可能永远不需要进入<header>（但如果你愿意，它可以）因为它已经很清楚它是即将发生的事情的标题。– 例如，如果这<header>也包含标语（标有<p>），这将是有意义的。
line 43. The content is not related to the main article, so I decided this is a sectionand not an aside.
第 43 行。内容与主要文章无关，所以我决定这是一个部分而不是旁白。
It is a misunderstanding that an <aside>has to be “tangentially related” to the content around. The point is: use an <aside>if the content is only “tangentiallyrelated” or not at all!
<aside>必须与周围的内容“切线相关”，这是一种误解。关键是：<aside>如果内容只是“切线相关”或根本不相关，请使用 ！
Nevertheless, apart from <aside>being a decent choice, <article>might still be better than a <section>as “hot items” and “new items” are not to be read like two chapters in a book. You can perfectly go for one of them and not the other like an alternative sorting of something, not like two parts of a whole.
尽管如此，除了<aside>是一个不错的选择之外，<article>可能仍然比 a 更好，<section>因为“热门项目”和“新项目”不会像一本书中的两章那样阅读。你可以完美地选择其中一个，而不是另一个，就像对某物的另类排序，而不是整体的两个部分。
line 44. H2without header
第 44 行。H2没有标题
Is great.
是很棒的。
line 53. sectionwithout header
第 53 行。没有标题的部分
Well, there is no <header>, but the <h2>-heading leaves pretty clear which part in this section is the header.
嗯，没有<header>，但是<h2>-heading 很清楚本节中的哪个部分是标题。
line 63. Divwith all (non-related) news items
第 63 行。包含所有（非相关）新闻项目的Div
<article>or <aside>might be better.
<article>或者<aside>可能会更好。
line 64. headerwith h2
第 64 行。带有h2 的标题
Discussed already.
已经讨论过了。
line 65. Hmm, divor section? Or remove this divand only use the article-tag
第 65 行。嗯，div还是section？或者删除这个div并且只使用article-tag
Exactly! Remove the <div>.
确切地！删除<div>.
line 105. Footer:-)
第 105 行。页脚:-)
Very reasonable.
非常合理。
回答by Robert Siemer
According to the explanation in my “main” answerthe document in question should be marked up according to an outline.
根据我的“主要”答案中的解释，应根据大纲标记相关文件。
In the following two tables I show:
在下面的两个表中，我展示了：
- the original HTML and its outline
- a possible intended outline and the HTML doing that
- 原始 HTML 及其大纲
- 一个可能的预期大纲和 HTML 这样做
original html (shortened)<body>
<section>
<header>
<div id=logo></div>
<div id=language></div>
</header>
<nav>
...
</nav>
<div id=main>
<div id=main-left>
<article>
<header>
<h1>The real thing</h1>
</header>
</article>
</div>
<div id=main-right>
<section id=main-right-hot>
<h2>Hot items</h2>
</section>
<section id=main-right-new>
<h2>New items</h2>
</section>
</div>
</div>
<div id=news-items>
<header>
<h2>The latest news</h2>
</header>
<div id=item_1>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_2>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_3>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
</div>
<footer>
<ul><li>...</ul>
</footer>
</section>
original html relevant for outline<body>
<section>
// logo and language
<nav>
...
</nav>
<article>
<h1>The real thing</h1>
</article>
<section>
<h2>Hot items</h2>
</section>
<section>
<h2>New items</h2>
</section>
<h2>The latest news</h2>
<article>
<h3>...</h3>
</article>
<article>
<h3>...</h3>
</article>
<article>
<h3>...</h3>
</article>
// footer links
</section>
resulting outline1. (untitled document)
1.1. (untitled section)
1.1.1. (untitled navigation)
1.1.2. The real thing (h1)
1.1.3. Hot items (h2)
1.1.4. New items (h2)
1.1.5. The latest news (h2)
1.1.6. news item_1 (h3)
1.1.7. news item_2 (h3)
1.1.8. news item_3 (h3)
The outline of the original is
definitively not what was intended.
original html (shortened)<body>
<section>
<header>
<div id=logo></div>
<div id=language></div>
</header>
<nav>
...
</nav>
<div id=main>
<div id=main-left>
<article>
<header>
<h1>The real thing</h1>
</header>
</article>
</div>
<div id=main-right>
<section id=main-right-hot>
<h2>Hot items</h2>
</section>
<section id=main-right-new>
<h2>New items</h2>
</section>
</div>
</div>
<div id=news-items>
<header>
<h2>The latest news</h2>
</header>
<div id=item_1>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_2>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
<div id=item_3>
<article>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
</div>
</div>
<footer>
<ul><li>...</ul>
</footer>
</section>
original html relevant for outline<body>
<section>
// logo and language
<nav>
...
</nav>
<article>
<h1>The real thing</h1>
</article>
<section>
<h2>Hot items</h2>
</section>
<section>
<h2>New items</h2>
</section>
<h2>The latest news</h2>
<article>
<h3>...</h3>
</article>
<article>
<h3>...</h3>
</article>
<article>
<h3>...</h3>
</article>
// footer links
</section>
resulting outline1. (untitled document)
1.1. (untitled section)
1.1.1. (untitled navigation)
1.1.2. The real thing (h1)
1.1.3. Hot items (h2)
1.1.4. New items (h2)
1.1.5. The latest news (h2)
1.1.6. news item_1 (h3)
1.1.7. news item_2 (h3)
1.1.8. news item_3 (h3)
The outline of the original is
definitively not what was intended.
The following table shows my proposal for an improved version. I use the following markup:
下表显示了我对改进版本的建议。我使用以下标记：
<removed><NEW_OR_CHANGED_ELEMENT><element MOVED_ATTRIBUTE=1>
<removed><NEW_OR_CHANGED_ELEMENT><element MOVED_ATTRIBUTE=1>
possible intended outline1. (main)
1.1. The real thing
1.2. (hot&new)
1.2.1. Hot items
1.2.2. New items
2. The latest news
2.1. news item_1
2.2. news item_2
2.3. news item_3
modified html<body>
?<section><header>
<ASIDE>
<div id=logo></div>
<div id=language></div>
</ASIDE>
</header>
<nav>
...
</nav>
<ARTICLE id=main>
??<div id=main-left><article ID=main-left>
<header>
<h1>The real thing</h1>
</header>
</article>
??</div><ARTICLE id=main-right>
<ARTICLE id=main-right-hot>
<h2>Hot items</h2>
</ARTICLE>
<ARTICLE id=main-right-new>
<h2>New items</h2>
</ARTICLE>
</ARTICLE>
</ARTICE>
<ARTICLE id=news-items>
<header>
<h2>The latest news</h2>
</header>
??<div id=item_1><article ID=item_1>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
??</div>??<div id=item_2><article ID=item_2>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
??</div>??<div id=item_3><article ID=item_3>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
??</div></ARTICLE>
<footer>
<NAV>
<ul><li>...</ul>
</NAV>
</footer>
?</section>
resulting outline1. (untitled document)
1.1. (untitled logo and lang)
1.2. (untitled navigation)
1.3. (untitled main)
1.3.1 The real thing
1.3.2. (untitled hot&new)
1.3.2.1. Hot items
1.3.2.2. New items
1.4. The latest news
1.4.1. news item_1
1.4.2. news item_2
1.4.3. news item_3
1.5. (untitled footer nav)
The modified HTML reflects the
intended outline way better than
the original.
possible intended outline1. (main)
1.1. The real thing
1.2. (hot&new)
1.2.1. Hot items
1.2.2. New items
2. The latest news
2.1. news item_1
2.2. news item_2
2.3. news item_3
modified html<body>
?<section><header>
<ASIDE>
<div id=logo></div>
<div id=language></div>
</ASIDE>
</header>
<nav>
...
</nav>
<ARTICLE id=main>
??<div id=main-left><article ID=main-left>
<header>
<h1>The real thing</h1>
</header>
</article>
??</div><ARTICLE id=main-right>
<ARTICLE id=main-right-hot>
<h2>Hot items</h2>
</ARTICLE>
<ARTICLE id=main-right-new>
<h2>New items</h2>
</ARTICLE>
</ARTICLE>
</ARTICE>
<ARTICLE id=news-items>
<header>
<h2>The latest news</h2>
</header>
??<div id=item_1><article ID=item_1>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
??</div>??<div id=item_2><article ID=item_2>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
??</div>??<div id=item_3><article ID=item_3>
<header>
<h3>...</h3>
</header>
<a>read more</a>
</article>
??</div></ARTICLE>
<footer>
<NAV>
<ul><li>...</ul>
</NAV>
</footer>
?</section>
resulting outline1. (untitled document)
1.1. (untitled logo and lang)
1.2. (untitled navigation)
1.3. (untitled main)
1.3.1 The real thing
1.3.2. (untitled hot&new)
1.3.2.1. Hot items
1.3.2.2. New items
1.4. The latest news
1.4.1. news item_1
1.4.2. news item_2
1.4.3. news item_3
1.5. (untitled footer nav)
The modified HTML reflects the
intended outline way better than
the original.
回答by Covi
The main mistake: You have "divitis" in the whole document.
Why this?
主要错误：整个文档中有“divitis”。
为什么这个？
<header>
<div id="logo"></div>
<div id="language"></div>
</header>
Instead of:
代替：
<header role="banner">
<!-- Not the best -->
<h1 id="logo"></h1> <!-- or <figure> and <figcaption>, or <h1> and <p>... -->
<h2 id="language"></h2>
<!-- Better, if the IDs have not semantic sense -->
<h1></h1>
<h2></h2>
</header>
To stylize this header, use CSS hierarchy: body > section > header > h1, body > section > header > h2
要样式化此标题，请使用 CSS 层次结构：body > section > header > h1，body > section > header > h2
More, ...line 63: why header wraps h2?? If you do not include any more element inside header, just use a single h2.
Keep in mind, your structure is not to stylize document, but construct a document self-explained.
更多，...第 63 行：为什么标题会包装 h2？？如果您不在标题中包含更多元素，只需使用单个 h2。
请记住，您的结构不是为了风格化文档，而是构建一个不言自明的文档。
Apply this to the rest of document; Good luck ;)
将此应用于文档的其余部分；祝你好运 ;）
回答by Matt Browne
Why not have the item_1, item_2, etc. IDs on the article tags themselves? Like this:
为什么文章标签本身没有 item_1、item_2 等 ID？像这样：
<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
...
It seems unnecessary to add the wrapper divs. ID values have no semantic meaning in HTML, so I think it would be perfectly valid to do this - you're not saying that the first article is alwaysitem_1, just item_1 within the context of the current page. IDs are not required to have any meaning that is independent of context.
似乎没有必要添加包装器 div。ID 值在 HTML 中没有语义意义，所以我认为这样做是完全有效的 - 你不是说第一篇文章总是item_1，只是当前页面上下文中的 item_1。ID 不需要具有任何独立于上下文的含义。
Also, as to your question on line 26, I don't think the <header> tag is required there, and I think you could omit it since it's on its own in the "main-left" div. If it were in the main list of articles you might want to include the <header> tag just for the sake of consistency.
另外，关于您在第 26 行的问题，我认为那里不需要 <header> 标记，我认为您可以省略它，因为它在“main-left”div 中独立存在。如果它在文章的主列表中，您可能希望包含 <header> 标签只是为了保持一致性。
回答by MeanEYE
- Section should be used only to wrap a section inside a document (like chapters and similar)
- With headertag: NO. Header tag represents a wrapper for page header and is not to be confused with H1, H2, etc.
- Which div? :D
- Yes
- From W3C Schools:
The tag defines external content. The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source.
- No, header tag has a different use. H1, H2, etc. represent document titles H1 being the most important
- 节应该只用于在文档中包装一个节（如章节和类似的）
- 带有标题标签：NO。Header 标记表示页眉的包装器，不要与 H1、H2 等混淆。
- 哪个分区？:D
- 是的
- 来自 W3C 学校：
标签定义了外部内容。外部内容可以是来自外部供应商的新闻文章，或者来自网络日志（博客）的文本，或者来自论坛的文本，或者来自外部来源的任何其他内容。
- 不，标题标签有不同的用途。H1、H2 等代表文档标题 H1 是最重要的
I didn't answer other ones because it's kind of hard to guess what you were referring to. If there are more questions, please let me know.
我没有回答其他人，因为很难猜测你指的是什么。如果还有更多问题，请告诉我。
回答by Ivan
Here's my example in which I work
这是我工作的示例
