网络上关于HTML5(以及stackoverflow)的信息已经足够多了,但现在我对“最佳实践”感到好奇。像section/headers/article这样的标签是新的,每个人对何时何地使用这些标签都有不同的看法。你们觉得下面的布局和代码怎么样
1<;!doctype html>;
2<;头>;
3<;标题>;网站</标题>;
4</头>;
5.
6<;车身>;
7<;第节>;
8<;标题>;
9<;div id=“logo”></部门>;
10<;div id=“语言”></部门>;
11</标题>;
12
13<;导航>;
14<;ul>;
15<;李>;菜单1</李>;
16<;李>;菜单2</李>;
17<;李>;菜单3</李>;
18<;李>;菜单4</李>;
19<;李>;菜单5</李>;
20</ul>;
21</导航>;
22
23<;div id=“main”>;
24<;div id=“主左侧”>;
25<;文章>;
26<;标题>&书信电报;h1>;这是一个标题</h1></标题>;
27
28<;p>;洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图
29.一位精英。奎斯克·森佩尔,利奥·埃吉特</p>;
30
31<;p>;洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图
32.一位杰出的运动员。奎斯克·森佩尔,利奥·埃吉特</p>;
33
34<;p>;洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图
35.一位杰出的运动员。奎斯克·森佩尔,利奥·埃吉特</p>;
36
37<;p>;洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图
38.一位精英。奎斯克·森佩尔,利奥·埃吉特</p>;
39</文章>;
40</部门>;
41
42<;div id=“主右侧”>;
43<;section id=“右主热轴”>;
44<;h2>;热门项目</h2>;
45<;ul>;
46<;李>;Lorem ipsum</李>;
47<;李>;多洛·西特</李>;
48<;李</李>;
49</ul>;
50</第节>;
51
52<;section id=“主右侧新建”>;
53<;h2>;新项目</h2>;
54<;ul>;
55<;李>;Lorem ipsum</李>;
56<;李>;多洛·西特</李>;
57<;李</李>;
58</ul>;
59</第节>;
60</部门>;
61</部门>;
62
63<;div id=“新闻项目”>;
64<;标题>&书信电报;h2>;最新消息</h2></标题>;
65
66<;div id=“项目1”>;
67<;文章>;
68<;标题>;
69<;img src=“”title=“titel artikel”/>;
70<;h3>;Lorem ipsum….</h3>;
71</标题>;
72<;p>;Lorem ipsum dolor sit amet,
73.一位体育精英。奎斯克·森佩尔</p>;
74<;a href=“”>;阅读更多</a>;
75</文章>;
76</部门>;
77
78
79<;div id=“项目2”>;
80<;文章>;
81<;标题>;
82<;img src=“”title=“titel artikel”/>;
83<;h3>;Lorem ipsum….</h3>;
84</标题>;
85<;p>;Lorem ipsum dolor sit amet,
86.一批优秀人才。奎斯克·森佩尔</p>;
87<;a href=“”>;阅读更多</a>;
88</文章>;
89</部门>;
90
91
92<;div id=“项目3”>;
93<;文章>;
94<;标题>;
95<;img src=“”title=“titel artikel”/>;
96<;h3>;Lorem ipsum….</h3>;
97</标题>;
98<;p>;Lorem ipsum dolor sit amet,
99.一位精英。奎斯克·森佩尔</p>;
100<;a href=“”>;阅读更多</a>;
101</文章>;
102</部门>;
103</部门>;
104
105<;页脚>;
106<;ul>;
107<;李>;菜单1</李>;
108<;李>;菜单2</李>;
109<;李>;菜单3</李>;
110<;李>;菜单4</李>;
111<;李>;菜单5</李>;
112</ul>;
113</页脚>;
114</第节>;
115</车身>;
116</html>;
第7行部分围绕整个网站?还是只有一个div
第8行。每个部分都以标题开始
第23行。这是div对吗?或者这必须是部分
第24行。使用div拆分左/右列
第25行。文章标签的正确位置
第26行。是否需要将您的h1-标记放入标题中-标记
第43行。内容与主要文章无关,因此我决定这是部分,而不是旁白
第44行。不带标题的H2
第53行章节无标题
第63行。包含所有(非相关)新闻项的Div
第64行标题带h2
第65行。嗯,div或部分?或者删除此div,只使用文章-标签
第105行。页脚:-)
实际上,在页眉/页脚方面,您是完全正确的。下面是关于如何使用每个主要HTML5标记的一些基本信息(我建议阅读底部链接的完整源代码):
部分–用于将主题相关的内容分组在一起。听起来像是div元素,但不是。div没有语义。在将所有div替换为section元素之前,请始终扪心自问:“所有内容都相关吗?”
旁白–用于切向相关内容。仅仅因为某些内容出现在主内容的左侧或右侧并不足以成为使用aside元素的理由。问问自己是否可以删除旁白中的内容而不降低主要内容的含义。Pullquotes是切线相关内容的一个示例
标题–标题元素与普遍接受的标题(或报头)用法之间存在着重大区别。一页中通常只有一个标题或“标题”。在HTML5中,你可以拥有你想要的任何数量。该规范将其定义为“一组介绍性或导航辅助工具”。您可以在站点的任何部分中使用标题。事实上,您可能应该在大部分分区中使用标题。规范将section元素描述为“一组主题内容,通常带有标题。”
导航–用于主要导航信息。分组在一起的一组链接不足以作为使用nav元素的理由。另一方面,站点范围的导航属于导航元素
页脚——听起来像是对职位的描述,但不是。页脚元素包含有关其包含元素的信息:作者、版权、相关内容的链接等。虽然我们通常对整个文档有一个页脚,但HTML5允许我们在节中也有页脚
来源:https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
此外,以下是关于文章的说明,未在上述来源中找到:
文章–用于指定独立、自包含内容的元素。一篇文章本身就应该有意义。在用文章元素替换所有div之前,请始终扪心自问:“是否可以独立于网站的其他部分阅读?”