极客观点
研发管理
HarmonyOS
网络上（以及 stackoverflow 上）有足够的关于 HTML5 的信息，但现在我对“最佳实践”感到好奇。像 section/headers/article 这样的标签是新的，每个人对于何时何地应该使用这些标签都有不同的看法。那么你们如何看待以下布局和代码？
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>
第 7 行 section 围绕整个网站？或者只有一个 div ？
第 8 行。每个 section 以 header 开头？
第 23 行。这是 div 对吗？或者这必须是 section 吗？
第 24 行。使用 div 拆分左/右列。
第 25 行。 article 标签的正确位置？
第 26 行。是否需要将您的 h1 标签放在 header 标签中？
第 43 行。内容与主要文章无关，所以我决定这是 section 而不是 aside 。
第 44 行。H2 没有 header
第 53 行 section 没有 header
第 63 行。包含所有（非相关）新闻项的 Div
第 64 行 header 与 h2
第 65 行。嗯， div 或 section ？或者删除这个 div 并且只使用 article 标签
第 105 行。页脚 :-)
原文由 Bas van Dorst 发布，翻译遵循 CC BY-SA 4.0 许可协议
实际上，在页眉/页脚方面，您是完全正确的。以下是关于如何/应该使用每个主要 HTML5 标签的一些基本信息（我建议阅读底部链接的完整源代码）：
此外，这是关于
article的描述，在上面的源代码中找不到：