HTML5 最佳实践；部分/标题/旁白/文章元素 [英] HTML5 best practices; section/header/aside/article elements
问题描述
网络上有足够的关于 HTML5 的信息(以及在 stackoverflow 上)，但现在我对最佳实践"感到好奇.像section/headers/article这样的标签是新的，每个人对何时/何地应该使用这些标签有不同的看法.那么你们觉得下面的布局和代码怎么样?
1 <!doctype html>2 <头>3 <title>网站</title>4 </头>56<身体>7<部分>8 <标题>9 <div id="logo"></div>10 <div id="语言"></div>11 </标题>1213 <导航>14 <ul>15 <li>菜单 1</li>16 <li>菜单 2</li>17 <li>菜单 3</li>18 <li>菜单 4</li>19 <li>菜单 5</li>20 </ul>21 </导航>2223 第 7 行.section 围绕整个网站?还是只有一个div?
第 8 行.每个 section 都以 header 开头?
第 23 行.这个 div 对吗?还是必须是 section?
第 24 行.用 div 分割左/右列.
第 25 行.article 标签的正确位置?
第 26 行.是否需要将 h1-tag 放在 header-tag 中?
第 43 行.内容与主要文章无关，所以我决定这是一个 section 而不是 aside.
第 44 行.没有 header
的 H2第 53 行.section 没有 header
第 63 行.包含所有(非相关)新闻项目的 Div
第 64 行.header 与 h2
第 65 行.嗯，div 还是 section?或者删除这个 div 并且只使用 article-tag
第 105 行.页脚 :-)
解决方案 其实，在页眉/页脚方面，您是完全正确的.以下是关于如何/应该使用每个主要 HTML5 标签的一些基本信息(我建议阅读底部链接的完整源代码):
<块引用>部分 - 用于将与主题相关的内容组合在一起.听起来像一个 div 元素，但它不是.div 没有语义.在用部分元素替换所有 div 之前，请始终问自己:所有内容都相关吗?"
aside – 用于相关内容.仅仅因为某些内容出现在主要内容的左侧或右侧并不足以成为使用 side 元素的理由.问问自己是否可以在不降低主要内容含义的情况下删除旁白中的内容.Pullquotes 是切向相关内容的一个示例.
header – 标题元素与普遍接受的标题(或标头)用法之间存在关键区别.一页中通常只有一个标题或标头".在 HTML5 中，您可以拥有任意数量的内容.该规范将其定义为一组介绍性或导航辅助工具".您可以在网站的任何部分使用标题.事实上，您可能应该在大多数部分中使用标题.该规范将 section 元素描述为内容的主题分组，通常带有标题."
nav - 用于主要导航信息.组合在一起的一组链接不足以成为使用 nav 元素的理由.另一方面，站点范围的导航属于 nav 元素.
footer – 听起来像是对位置的描述，但实际上不是.页脚元素包含有关其包含元素的信息:作者、版权、相关内容的链接等.虽然我们通常有一个页脚用于整个文档，但 HTML5 允许我们在部分内也有页脚.
来源:https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
另外，这里有一个关于article的描述，在上面的源代码中没有找到:
<块引用>article – 用于指定独立、自包含内容的元素.一篇文章本身就应该有意义.在用文章元素替换所有 div 之前，请始终问自己:是否可以独立于网站的其他部分阅读它?"
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?
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. section around the whole website? Or only a div?
line 8. Each section start with a header?
line 23. Is this div right? or must this be a section?
line 24. Split left/right column with a div.
line 25. Right place for the article tag?
line 26. Is it required to put your h1-tag in the header-tag?
line 43. The content is not related to the main article, so I decided this is a section and not a aside.
line 44. H2 without header
line 53. section without header
line 63. Div with all (non-related) news items
line 64. header with h2
line 65. Hmm, div or section? Or remove this div and only use the article-tag
line 105. Footer :-)
解决方案 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):
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/
Additionally, here's a description on article, not found in the source above:
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?"
这篇关于HTML5 最佳实践；部分/标题/旁白/文章元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
