HTML5最佳做法; section / header / aside /文章元素 [英] HTML5 best practices; section/header/aside/article elements
问题描述
网上有足够的关于HTML5的信息（以及在stackoverflow上），但现在我对最佳实践感到好奇。像章节/标题/文章这样的标签是新的，每个人对使用这些标签的时间/地点都有不同的看法。那么你们认为下面的布局和代码是什么？
$ b
1<！doctype html>
2< head>
3< title>网站< / 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>菜单1< / li>
16< li>菜单2< / li>
17< li>菜单3< / li>
18< li>菜单4< / li>
19< li>菜单5< / li>
20< / ul>
21< / nav>
22
23< div id =main>
24< div id =main-left>
25<文章>
26< header>< h1>这是一个标题< / h1>< / header>
27
28 p Lorem ipsum dolor sit amet，consectetur
29 adipiscing elit。 quisque sempre，leo eget< / p>
30
31< p> Lorem ipsum dolor坐在amet，consectetur
32 adipiscing elit。 quisque sempre，leo eget< / p>
33
34< p> Lorem ipsum dolor坐amet，consectetur
35 adipiscing elit。 quisque sempre，leo eget< / p>
36
37 Lorem ipsum dolor sit amet，consectetur
38 adipiscing elit。 quisque sempre，leo eget< / p>
39< / article>
40< / div>
41
42< div id =main-right>
43< section id =main-right-hot>
44< h2>热门项目< / 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>新项目< / h2>
54< ul>
55< li> Lorem ipsum< / li>
56< li>坐下来< / li>
57< li> ...< / li>
58< / ul>
59< / section>
60< / div>
61< / div>
62
63< div id =news-items>
64< header>< h2>最新消息< / h2>< / header>
65
66< div id =item_1>
67<文章>
68< header>
69< img src =＃title =titel artikel/>
70< h3> Lorem ipsum .....< / h3>
71< / header>
72< p> Lorem ipsum dolor坐amet，
73 adipiscing elit。 Quisque Semper，< / p>
74< a href =＃>了解更多< / 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坐在amet上，
86 adipiscing elit。 Quisque Semper，< / p>
87< a href =＃>了解更多< / 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坐amet，
99 adipiscing elit。 Quisque Semper，< / p>
100< a href =＃>阅读更多< / a>
101< / article>
102< / div>
103< / div>
104
105< footer>
106< ul>
107< li>菜单1< / li>
108< li>菜单2< / li>
109< li>菜单3< / li>
110< li>菜单4< / li>
111< li> 5< / li>
112< / ul>
113< / footer>
114< / section>
115< / body>
116< / html>
第7行。部分围绕整个网站？或者只有一个 div ？
第8行。每个部分以标题开始？
第23行。 div 对吗？或者必须是部分？
第24行。将左/右列分隔为 div 。
第25行文章标记的正确位置 p>
第26行。是否需要将 h1 -tag放入标题 -tag？
第43行。内容与主文章无关，所以我决定这是 code>而不是抛开。
第44行。H2没有头
第53行。小节无标题 $ b
第63行。包含所有（非相关）新闻项目的Div
第64行。 header with h2
line 65.嗯， div 或部分？或者删除 div ，只使用文章 -tag
<页眉： - ）
实际上，当涉及到页眉/页脚时，您是完全正确的。以下是关于如何使用每个主要HTML5标记的一些基本信息（我建议阅读底部链接的完整源代码）：
部分 - 用于将主题相关的内容组织在一起。听起来像是一个div元素，但事实并非如此。 div没有语义意义。在用部分元素替换所有的div之前，总是问自己：所有的内容都是相关的吗？
旁边 - 用于切线相关的内容。仅仅因为某些内容出现在主要内容的左侧或右侧，没有足够的理由使用搁置元素。问问自己，是否可以删除旁边的内容，而不会降低主要内容的含义。 Pullquotes是切线相关内容的一个例子。
标题 - 标题元素和标题（或标头）的普遍接受的用法。在页面中通常只有一个标题或'标头'。在HTML5中，您可以拥有任意数量的HTML5。该规范将其定义为一组介绍或导航辅助工具。您可以在网站的任何部分使用标题。事实上，你可能应该在你的大部分章节中使用标题。该规范将section元素描述为内容的主题分组，通常包含标题。
nav - 用于主要导航信息。分组在一起的一组链接不足以使用导航元素。另一方面，站点范围的导航属于导航元素。
页脚 - 听起来像是它的一个描述职位，但不是。页脚元素包含关于其包含元素的信息：谁写的，版权，相关内容的链接等。而我们通常对整个文档有一个页脚，HTML5允许我们在页面中也有页脚。
另外，这里是关于 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.
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最佳做法; section / header / aside /文章元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
