詳解HTML5常用的語義化標(biāo)簽
我要評(píng)論快速查詢
article | aside | nav | section | header | footer
架構(gòu)預(yù)覽
nav 定義導(dǎo)航鏈接的部分
在頁(yè)腳顯示一個(gè)站點(diǎn)的導(dǎo)航鏈接,如首頁(yè)、服務(wù)信息頁(yè)面、版權(quán)信息頁(yè)面等
<nav>
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>CSS</a></li>
<li><a href=”#”>Html5</a></li>
</ul>
</nav>
article 定義文章
裝載顯示一個(gè)獨(dú)立的文章內(nèi)容，論壇帖子、新聞、博客文章、用戶評(píng)論等，artilce可以嵌套，則內(nèi)層的artilce對(duì)外層的article標(biāo)簽有隸屬的關(guān)系。
<article>
<h1>標(biāo)題</h1>
<p> 內(nèi)容</p>
<article>用戶評(píng)論</article>
<article>回復(fù)評(píng)論</article>
</article>
section 定義文檔中的節(jié)
章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分，
<section> <h1>標(biāo)題1</h1> <p>內(nèi)容1</p> </section> <section> <h1>標(biāo)題2</h1> <p>內(nèi)容2</p> </section>
aside 定義文章的側(cè)欄
廣告，成組的內(nèi)容，友情鏈接，側(cè)邊欄等
<aside>
<h1> 側(cè)欄標(biāo)題1</h1>
<p>這是側(cè)欄內(nèi)容1</p>
</aside>
<aside>
<h1> 側(cè)欄標(biāo)題2</h1>
<p>這是側(cè)欄內(nèi)容3</p>
</aside>
header 定義文檔的頁(yè)眉
通常是一些引導(dǎo)和導(dǎo)航信息
<header>
<p>logo</p>
<nav>
<ul>
<li>Home</li>
<li>Html5</li>
</ul>
</nav>
</header>
footer 定義文檔或節(jié)的頁(yè)腳
在典型情況下，該元素會(huì)包含創(chuàng)作者的姓名、文檔的創(chuàng)作日期以及/或者聯(lián)系信息
<footer> <p>© 2019 All Rights Reserved. </p> </footer>
參考文獻(xiàn)
1 html5 | http://caibaojian.com/html5
2 w3school | https://www.w3school.com.cn/
3 MDN | https://developer.mozilla.org/zh-CN/docs/Web/HTML/
下面是其它網(wǎng)友的補(bǔ)充
百度 IFE 任務(wù)一要求構(gòu)建一個(gè)頁(yè)面結(jié)構(gòu)，看似簡(jiǎn)單，但需充分考慮到語義化。這篇文章簡(jiǎn)單談?wù)?HTML5 語義化中的頁(yè)面結(jié)構(gòu)語義化的一些經(jīng)驗(yàn)和理解。
1、為什么需要語義化
易修改、易維護(hù)。
無障礙閱讀支持。
搜索引擎友好，利于 SEO。
面向未來的 HTML，瀏覽器在未來可能提供更豐富的支持。
2、結(jié)構(gòu)語義化
語義元素均有一個(gè)共同特點(diǎn)——他們均不做任何事情。換句話說，語義元素僅僅是頁(yè)面結(jié)構(gòu)的規(guī)范化，并不會(huì)對(duì)內(nèi)容有本質(zhì)的影響。
下圖展示了一個(gè)典型的頁(yè)面結(jié)構(gòu)。
頭部
<header>元素有兩種用法，第一是標(biāo)注內(nèi)容的標(biāo)題，第二是標(biāo)注網(wǎng)頁(yè)的頁(yè)眉，如上圖你看到的那樣。除非必要（內(nèi)容標(biāo)題附帶其它信息的情況下：發(fā)布時(shí)間、作者等），一般不在內(nèi)容中使用<header>。因而，網(wǎng)頁(yè)中可以包含多個(gè)<header>元素。按照 HTML5 的規(guī)定，<header>都應(yīng)包含某個(gè)級(jí)別的標(biāo)題，所以應(yīng)隱式或顯式地包含標(biāo)題，通常將不希望顯示的標(biāo)題設(shè)置為display: none;，一方面遵守規(guī)范，另一方面則提供了無障礙閱讀而不至于影響到頁(yè)面設(shè)計(jì)。
導(dǎo)航欄
導(dǎo)航欄使用<nav>看起來是理所當(dāng)然的，進(jìn)一步，它也用于一組文章的鏈接。一個(gè)頁(yè)面可以包含多個(gè)<nav>元素，但通常僅僅在頁(yè)面的主要導(dǎo)航部分使用它。
《HTML5：The Missing Manual》中指出了在側(cè)欄使用<nav>標(biāo)簽的兩個(gè)案例：
<!-- 案例一 -->
<nav>
<!-- 此處是鏈接 -->
<aside></aside>
<aside></aside>
</nav>
<!-- 案例二 -->
<aside>
<nav>
<!-- 此處是鏈接 -->
</nav>
<section></section>
<div></div>
</aside>
如果側(cè)欄中包含其它不同于鏈接的其它區(qū)塊，那么，使用第二種方案顯然更為合適。
導(dǎo)航通常包含一組鏈接，普遍認(rèn)為，鏈接使用列表來組織。
<nav>
<ul>
<li><a href="#" title="鏈接">鏈接</a></li>
<li><a href="#" title="鏈接">鏈接</a></li>
<li><a href="#" title="鏈接">鏈接</a></li>
</ul>
</nav>
附注
<aside>元素并不僅僅是側(cè)欄，它表示與它周圍文本沒有密切關(guān)系的內(nèi)容。文章中同樣可以使用<aside>元素，來說明文章的附加內(nèi)容、解釋說明某個(gè)觀點(diǎn)、相關(guān)內(nèi)容鏈接等等。
當(dāng)<aside>用于側(cè)欄時(shí)，其表示整個(gè)網(wǎng)頁(yè)的附加內(nèi)容。通常的廣告區(qū)域、搜索、分享鏈接則位于側(cè)欄。側(cè)欄中的<section>元素規(guī)定了一個(gè)區(qū)域，通常是帶有標(biāo)題的內(nèi)容。
<section>標(biāo)簽適合標(biāo)記的內(nèi)容區(qū)塊：
與頁(yè)面主體并列顯示的小內(nèi)容塊。
獨(dú)立性內(nèi)容，清單、表單等。
分組內(nèi)容，如 CMS 系統(tǒng)中的文章分類區(qū)塊。
比較長(zhǎng)文檔的一部分，可能僅僅是為了正確規(guī)定頁(yè)面大綱。
<div>標(biāo)簽依然是可用的，當(dāng)你覺得使用其它標(biāo)簽都不太合適的時(shí)候。新的語義元素出現(xiàn)之前，我們總是這么干的！
頁(yè)腳
同可“包羅萬象”的<header>元素不同，標(biāo)準(zhǔn)規(guī)定<footer>標(biāo)簽僅僅可以包含版權(quán)、來源信息、法律限制等等之類的文本或鏈接信息。如果想要在頁(yè)腳中包含其它內(nèi)容，可以使用熟悉的<div>來幫忙。
<div>
<aside>
<!-- 其它內(nèi)容 -->
</aside>
<footer>
<!-- 法律、版權(quán)、來源、聯(lián)系信息等 -->
</footer>
</div>
主要內(nèi)容
在早先的 HTML5 版本中并沒有規(guī)定頁(yè)面主體的標(biāo)簽，相關(guān)的書中經(jīng)常會(huì)說：除去頭部、尾部、側(cè)欄等其它部分，剩下的自然是主體部分。
然而，HTML5.1 中規(guī)定了一個(gè)<main>標(biāo)簽來標(biāo)識(shí)主體內(nèi)容。<main>標(biāo)簽不能包含在頁(yè)面其它區(qū)塊元素中，通常是<body>的子標(biāo)簽，或者是全局<div>的子標(biāo)簽。<main>標(biāo)簽可以幫助屏幕閱讀工具識(shí)別頁(yè)面的主體部分，從而讓訪問者迅速得到有用的信息。
文章
<article>表示一個(gè)完整的、自成一體的內(nèi)容塊。如文章或新聞報(bào)道。<article>應(yīng)包含完整的標(biāo)題、文章署名、發(fā)布時(shí)間、正文。當(dāng)語義與表現(xiàn)發(fā)生沖突，例如有時(shí)需要將文章分多個(gè)頁(yè)面顯示，那么需要把每個(gè)頁(yè)面的文章區(qū)域都用<article>標(biāo)記。
文章中包含插圖時(shí)，使用新的語義元素<figure>標(biāo)簽。
<article>
<h1>標(biāo)題</h1>
<p>
<!-- 內(nèi)容 -->
</p>
<figure>
<img src="#" alt="插圖">
<figcaption>這是一個(gè)插圖</figcaption>
</figure>
</article>
上述情況下，<figcaption>包含了關(guān)于插圖的詳細(xì)解釋，則<img>的alt屬性可以略去。
總結(jié)
以上所述是小編給大家介紹的HTML5常用的語義化標(biāo)簽,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
- 這篇文章主要介紹了HTML5語義化元素的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-08-22
- HTML5 只有一個(gè)簡(jiǎn)單的文檔類型：<!DOCTYPE html>，表示瀏覽器會(huì)按照標(biāo)準(zhǔn)模式解析。今天小編給大家?guī)砹薍TML5新特性之語義化標(biāo)簽，感興趣的朋友一起看看吧2017-10-31
- b 和 i 標(biāo)簽在現(xiàn)在的 Web 標(biāo)準(zhǔn)潛規(guī)則中是不推薦使用，甚至是反對(duì)使用的，因?yàn)檎J(rèn)為他們只是“表現(xiàn)”粗體和斜體，而沒有任何“語義”。更多的用 strong2008-10-17
HTML5 語義化結(jié)構(gòu)化規(guī)范化
HTML結(jié)構(gòu)更加清晰、規(guī)范，學(xué)習(xí)HTML5優(yōu)化結(jié)構(gòu)的思路。 HTML5添加了一些新元素，用來標(biāo)識(shí)常用的結(jié)構(gòu)，是html更具語義化，可是我們無法直接使用，即使可能用到還要等他個(gè)十年2008-10-17- 本篇文章小編為大家介紹HTML標(biāo)簽語義化（含H5） ，有需要的朋友可以參考一下2013-04-08
這篇文章主要介紹了詳解HTML5常用的語義化標(biāo)簽的相關(guān)資料,需要的朋友可以參考下2019-09-27- 下面小編就為大家?guī)硪黄獪\談HTML的語義化和一些簡(jiǎn)單優(yōu)化。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-12
淺談?wù)Z義化的HTML結(jié)構(gòu)到底有什么好處
下面小編就為大家?guī)硪黄獪\談?wù)Z義化的HTML結(jié)構(gòu)到底有什么好處。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-05使用語義化標(biāo)簽去寫你的HTML 兼容IE6,7,8
下面小編就為大家?guī)硪黄褂谜Z義化標(biāo)簽去寫你的HTML 兼容IE6,7,8。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-04-14- html標(biāo)簽語義：即html標(biāo)簽的含義2012-11-17