什么是語義元素？

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

為什么要語義化？

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

HTML5常用的語義元素

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

image.png

<h1>~<h6>元素
定義頁面的標(biāo)題，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>元素
用于定義頁面的介紹展示區(qū)域，通常包括網(wǎng)站logo、主導(dǎo)航、全站鏈接以及搜索框。也適合對頁面內(nèi)部一組介紹性或?qū)Ш叫詢?nèi)容進行標(biāo)記。

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

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

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

<main>元素
定義頁面的主要內(nèi)容，一個頁面只能使用一次。如果是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>元素
定義頁面獨立的內(nèi)容，它可以有自己的header、footer、sections等，專注于單個主題的博客文章，報紙文章或網(wǎng)頁文章。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)記文檔的各個部分，例如長表單文章的章節(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)是字體模型所支持的最小字號，那么 <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>元素
把文本定義為語氣更強的強調(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)容著重點（大量用于提升段落文本語義），通常呈現(xiàn)為斜體文字。

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

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

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

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

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

感謝原文作者@Demi
原文鏈接：https://blog.csdn.net/qq_38128179/article/details/80811339