目錄

?

什么是語義元素？

為什么要語義化？

HTML5常用的語義元素

---

很多面試官會問：談談你對 HTML5語義化標簽的理解。那么本篇博客專門解答一下這個問題。

什么是語義元素？

語義是指對一個詞或者句子含義的正確解釋。很多html標簽也具有語義的意義，也就是說元素本身傳達了關于標簽所包含內容類型的一些信息。例如，當瀏覽器解析到<h1></h1>標簽時，它將該標簽解釋為包含這一塊內容的最重要的標題。h1標簽的語義就是用它來標識特定網頁或部分最重要的標題。

為什么要語義化？

• 代碼結構:?使頁面沒有css的情況下，也能夠呈現出很好的內容結構
• 有利于SEO: 爬蟲依賴標簽來確定關鍵字的權重，因此可以和搜索引擎建立良好的溝通，幫助爬蟲抓取更多的有效信息
• 提升用戶體驗： 例如title、alt可以用于解釋名稱或者解釋圖片信息，以及label標簽的靈活運用。
• 便于團隊開發和維護: 語義化使得代碼更具有可讀性，讓其他開發人員更加理解你的html結構，減少差異化。
• 方便其他設備解析: 如屏幕閱讀器、盲人閱讀器、移動設備等，以有意義的方式來渲染網頁。

HTML5常用的語義元素

HTML5提供了新的語義元素來定義網頁的不同部分，它們被稱為“切片元素”，如圖所示??

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

大約有100多個HTML語義元素可供選擇，以下是常用的語義元素

結構體	文本	一致
header h1 h2 h3 nav footer article section	p ul ol li blockquote	a strong em q abbr small

<h1>~<h6>元素

定義頁面的標題，h1元素具有最高等級，h6元素具有最低的等級

<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>元素

用于定義頁面的介紹展示區域，通常包括網站logo、主導航、全站鏈接以及搜索框。也適合對頁面內部一組介紹性或導航性內容進行標記。

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

<nav>元素

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

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

<main>元素

定義頁面的主要內容，一個頁面只能使用一次。如果是web應用，則包圍其主要功能。

<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>元素

定義頁面獨立的內容，它可以有自己的header、footer、sections等，專注于單個主題的博客文章，報紙文章或網頁文章。article可以嵌套article，只要里面的article與外面的是部分與整體的關系。

<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>元素

元素用于標記文檔的各個部分，例如長表單文章的章節或主要部分。

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

?<aside>元素

定義與主要內容相關的內容塊。通常顯示為側邊欄。

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

<footer>元素

定義文檔的底部區域，通常包含文檔的作者，著作權信息，鏈接的使用條款，聯系信息等

<footer>COPYRIGHT@dingFY_Demi</footer>

?<small>元素

為較不重要的內容定義小字體。如果被包圍的字體已經是字體模型所支持的最小字號，那么 <small> 標簽將不起任何作用。

<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>元素

把文本定義為語氣更強的強調的內容，以表示內容的重要性。

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

?<em>元素

標記內容著重點（大量用于提升段落文本語義），通常呈現為斜體文字。

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

?<blockquote>元素

定義塊引用，瀏覽器會在 blockquote 元素前后添加換行，并增加外邊距。cite屬性可用來規定引用的來源

<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屬性可提供全稱，只在第一次出現時使用就ok。

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

?

本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。

歡迎一起私信交流。

“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。