目錄

?

什么是語(yǔ)義元素？

為什么要語(yǔ)義化？

HTML5常用的語(yǔ)義元素

---

很多面試官會(huì)問(wèn)：談?wù)勀銓?duì) HTML5語(yǔ)義化標(biāo)簽的理解。那么本篇博客專門解答一下這個(gè)問(wèn)題。

什么是語(yǔ)義元素？

語(yǔ)義是指對(duì)一個(gè)詞或者句子含義的正確解釋。很多html標(biāo)簽也具有語(yǔ)義的意義，也就是說(shuō)元素本身傳達(dá)了關(guān)于標(biāo)簽所包含內(nèi)容類型的一些信息。例如，當(dāng)瀏覽器解析到<h1></h1>標(biāo)簽時(shí)，它將該標(biāo)簽解釋為包含這一塊內(nèi)容的最重要的標(biāo)題。h1標(biāo)簽的語(yǔ)義就是用它來(lái)標(biāo)識(shí)特定網(wǎng)頁(yè)或部分最重要的標(biāo)題。

為什么要語(yǔ)義化？

• 代碼結(jié)構(gòu):?使頁(yè)面沒(méi)有css的情況下，也能夠呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)
• 有利于SEO: 爬蟲依賴標(biāo)簽來(lái)確定關(guān)鍵字的權(quán)重，因此可以和搜索引擎建立良好的溝通，幫助爬蟲抓取更多的有效信息
• 提升用戶體驗(yàn)： 例如title、alt可以用于解釋名稱或者解釋圖片信息，以及l(fā)abel標(biāo)簽的靈活運(yùn)用。
• 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù): 語(yǔ)義化使得代碼更具有可讀性，讓其他開(kāi)發(fā)人員更加理解你的html結(jié)構(gòu)，減少差異化。
• 方便其他設(shè)備解析: 如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備等，以有意義的方式來(lái)渲染網(wǎng)頁(yè)。

HTML5常用的語(yǔ)義元素

HTML5提供了新的語(yǔ)義元素來(lái)定義網(wǎng)頁(yè)的不同部分，它們被稱為“切片元素”，如圖所示??

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

大約有100多個(gè)HTML語(yǔ)義元素可供選擇，以下是常用的語(yǔ)義元素

結(jié)構(gòu)體	文本	一致
header h1 h2 h3 nav footer article section	p ul ol li blockquote	a strong em q abbr small

<h1>~<h6>元素

定義頁(yè)面的標(biāo)題，h1元素具有最高等級(jí)，h6元素具有最低的等級(jí)

<h1>top level heading</h1><section><h2>2nd level heading</h2><h3>3nd level heading</h3><h4>4th level heading</h4><h5>5th level heading</h5><h6>6th level heading</h6></section>

<header>元素

用于定義頁(yè)面的介紹展示區(qū)域，通常包括網(wǎng)站logo、主導(dǎo)航、全站鏈接以及搜索框。也適合對(duì)頁(yè)面內(nèi)部一組介紹性或?qū)Ш叫詢?nèi)容進(jìn)行標(biāo)記。

<header><h1>HTML Reference</h1><nav><a>Home</a><a>About</a><a>Contact</a></nav></header>

<nav>元素

定義頁(yè)面的導(dǎo)航鏈接部分區(qū)域，不是所有的鏈接都需要包含在<nav>中，除了頁(yè)腳再次顯示頂級(jí)全局導(dǎo)航、或者包含招聘信息等重要鏈接。

<nav><a>Home</a><a>About</a><a>Contact</a></nav>

<main>元素

定義頁(yè)面的主要內(nèi)容，一個(gè)頁(yè)面只能使用一次。如果是web應(yīng)用，則包圍其主要功能。

<main><h1>My blog test</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p><p>etc.</p></main>

?<article>元素

定義頁(yè)面獨(dú)立的內(nèi)容，它可以有自己的header、footer、sections等，專注于單個(gè)主題的博客文章，報(bào)紙文章或網(wǎng)頁(yè)文章。article可以嵌套article，只要里面的article與外面的是部分與整體的關(guān)系。

<article><header><h3><a href="">My blog post</a></h3></header><section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p></section><footer><small>Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="">Code</a></small></footer></article>

<section>元素

元素用于標(biāo)記文檔的各個(gè)部分，例如長(zhǎng)表單文章的章節(jié)或主要部分。

<section><h2>Section title</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p></section>

?<aside>元素

定義與主要內(nèi)容相關(guān)的內(nèi)容塊。通常顯示為側(cè)邊欄。

<aside><h3>About the author</h3><p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p></aside>

<footer>元素

定義文檔的底部區(qū)域，通常包含文檔的作者，著作權(quán)信息，鏈接的使用條款，聯(lián)系信息等

<footer>COPYRIGHT@dingFY_Demi</footer>

?<small>元素

為較不重要的內(nèi)容定義小字體。如果被包圍的字體已經(jīng)是字體模型所支持的最小字號(hào)，那么 <small> 標(biāo)簽將不起任何作用。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p><small>Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a></small>

?<strong>元素

把文本定義為語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容，以表示內(nèi)容的重要性。

HTML should only be used to write <strong>content</strong>, and keep CSS for <strong>styling</strong> the web page.

?<em>元素

標(biāo)記內(nèi)容著重點(diǎn)（大量用于提升段落文本語(yǔ)義），通常呈現(xiàn)為斜體文字。

HTML should only be used to write <em>content</em>, and keep CSS for <em>styling</em> the web page.

?<blockquote>元素

定義塊引用，瀏覽器會(huì)在 blockquote 元素前后添加換行，并增加外邊距。cite屬性可用來(lái)規(guī)定引用的來(lái)源

<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">Here is a long quotation here is a long quotation here is a long quotationhere is a long quotation here is a long quotation here is a long quotationhere is a long quotation here is a long quotation here is a long quotation.</blockquote>

<abbr>元素

解釋縮寫詞。使用title屬性可提供全稱，只在第一次出現(xiàn)時(shí)使用就ok。

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

?

本面試題為前端?？济嬖囶}，后續(xù)有機(jī)會(huì)繼續(xù)完善。我是歌謠，一個(gè)沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學(xué)習(xí)收藏）?

總結(jié)

以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题之第五十四篇之语义化标签（建议收藏）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。