問題描述
網(wǎng)絡(luò)上有足夠的關(guān)于 HTML5 的信息(以及在 stackoverflow 上)，但現(xiàn)在我對最佳實踐"感到好奇.像section/headers/article這樣的標簽是新的，每個人對何時/何地應(yīng)該使用這些標簽有不同的看法.那么你們覺得下面的布局和代碼怎么樣?
1 <!doctype html>2 <頭>3 <title>網(wǎng)站</title>4 </頭>56<身體>7<部分>8 <標題>9 <div id="logo"></div>10 <div id="語言"></div>11 </標題>1213 <導(dǎo)航>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 </導(dǎo)航>2223 第 7 行.section 圍繞整個網(wǎng)站?還是只有一個div?
第 8 行.每個 section 都以 header 開頭?
第 23 行.這個 div 對嗎?還是必須是 section?
第 24 行.用 div 分割左/右列.
第 25 行.article 標簽的正確位置?
第 26 行.是否需要將 h1-tag 放在 header-tag 中?
第 43 行.內(nèi)容與主要文章無關(guān)，所以我決定這是一個 section 而不是 aside.
第 44 行.沒有 header
的 H2第 53 行.section 沒有 header
第 63 行.包含所有(非相關(guān))新聞項目的 Div
第 64 行.header 與 h2
第 65 行.嗯，div 還是 section?或者刪除這個 div 并且只使用 article-tag
第 105 行.頁腳 :-)
解決方案 其實，在頁眉/頁腳方面，您是完全正確的.以下是關(guān)于如何/應(yīng)該使用每個主要 HTML5 標簽的一些基本信息(我建議閱讀底部鏈接的完整源代碼):
<塊引用>部分 - 用于將與主題相關(guān)的內(nèi)容組合在一起.聽起來像一個 div 元素，但它不是.div 沒有語義.在用部分元素替換所有 div 之前，請始終問自己:所有內(nèi)容都相關(guān)嗎?"
aside – 用于相關(guān)內(nèi)容.僅僅因為某些內(nèi)容出現(xiàn)在主要內(nèi)容的左側(cè)或右側(cè)并不足以成為使用 side 元素的理由.問問自己是否可以在不降低主要內(nèi)容含義的情況下刪除旁白中的內(nèi)容.Pullquotes 是切向相關(guān)內(nèi)容的一個示例.
header – 標題元素與普遍接受的標題(或標頭)用法之間存在關(guān)鍵區(qū)別.一頁中通常只有一個標題或標頭".在 HTML5 中，您可以擁有任意數(shù)量的內(nèi)容.該規(guī)范將其定義為一組介紹性或?qū)Ш捷o助工具".您可以在網(wǎng)站的任何部分使用標題.事實上，您可能應(yīng)該在大多數(shù)部分中使用標題.該規(guī)范將 section 元素描述為內(nèi)容的主題分組，通常帶有標題."
nav - 用于主要導(dǎo)航信息.組合在一起的一組鏈接不足以成為使用 nav 元素的理由.另一方面，站點范圍的導(dǎo)航屬于 nav 元素.
footer – 聽起來像是對位置的描述，但實際上不是.頁腳元素包含有關(guān)其包含元素的信息:作者、版權(quán)、相關(guān)內(nèi)容的鏈接等.雖然我們通常有一個頁腳用于整個文檔，但 HTML5 允許我們在部分內(nèi)也有頁腳.
來源:https://clzd.me/html5-section-aside-header-nav-footer-elements-not-as-obvious-as-they-sound/
另外，這里有一個關(guān)于article的描述，在上面的源代碼中沒有找到:
<塊引用>article – 用于指定獨立、自包含內(nèi)容的元素.一篇文章本身就應(yīng)該有意義.在用文章元素替換所有 div 之前，請始終問自己:是否可以獨立于網(wǎng)站的其他部分閱讀它?"
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?"
這篇關(guān)于HTML5 最佳實踐；部分/標題/旁白/文章元素的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！
【網(wǎng)站聲明】本站部分內(nèi)容來源于互聯(lián)網(wǎng),旨在幫助大家更快的解決問題，如果有圖片或者內(nèi)容侵犯了您的權(quán)益，請聯(lián)系我們刪除處理，感謝您的支持！