你是如何理解 HTML 語義化的碍侦？(面試)

在了解 HTML 語義化之前筑舅，先科普一下下面幾個名詞：

• 語義：是語言所蘊含的意義 (語言的含義)。簡單的說仑氛，符號是語言的載體，符號本身沒有意義，只有賦予含義的符號才能夠被使用锯岖，此時語言就轉(zhuǎn)化為了信息介袜。

• SEO（Search Engine Optimization）: 譯為搜索引擎優(yōu)化，是一種 利用搜索引擎的規(guī)則提高網(wǎng)站在有關(guān)搜索引擎內(nèi)的自然排名 的方式出吹。能夠提高有效訪問量遇伞。

背景

最開始的時候，網(wǎng)頁是后臺去寫的捶牢，那個時候的 HTML 結(jié)構(gòu)可能是一堆 table 推砌而成鸠珠，連續(xù) table 的嵌套讓頁面做出來之后難以維護。(原始/荒野階段)

后來叫确，在沒有提出 HTML 結(jié)構(gòu)語義化之前的 HTML 結(jié)構(gòu)跳芳，相比荒野階段又有了一些改觀，就是 (美工階段)竹勉，舉例來說就是：如果所有標(biāo)簽都使用 div飞盆，只要靈活使用 CSS，你也能寫出視覺效果很好的頁面 (最泛濫的 div + CSS)次乓，但這就是一堆沒有語義的冷冰冰的標(biāo)簽吓歇。。

雖然視覺上達到了要求票腰，但是整個頁面一點語義也沒有城看。所以我們要盡可能避免使用一堆無意義的標(biāo)簽去堆自己的 HTML 結(jié)構(gòu)。

什么是語義化

這里的語義化杏慰，顧名思義测柠，就是在書寫 HTML 結(jié)構(gòu)的時候，要用相對應(yīng)的有一定語義的標(biāo)簽表示和標(biāo)記缘滥。

更專業(yè)的來說就是轰胁，根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）朝扼，便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器更好地解析赃阀。

HTML 本身就是一門標(biāo)記語言，所有標(biāo)簽都是有自己的語義的擎颖，例如我們常用的：

• div：division (分隔)
• span: span (范圍)
• ol: Ordered List （排序列表）
• ul: Unordered List (不排序列表)
• li: List Item (列表項目)
• ......

HTML 語義化榛斯，不僅對書寫者自己來說，易于閱讀搂捧，其他人閱讀你的代碼和結(jié)構(gòu)的時候也更容易理解驮俗，甚至是對于一些非開發(fā)者來說。

為什么要語義化

除了上述所說允跑，具體為什么要語義化意述，有以下幾點原因：

1. 各個語義化的標(biāo)簽都或多或少帶著關(guān)方設(shè)定好的樣式，若是整個頁面是由 div + CSS 構(gòu)成吮蛹，那么如果 CSS 沒有加載出來荤崇，對頁面來說可能將是一場噩夢；
   原因1：(當(dāng)然上述是極端情況)為了在沒有 CSS 的情況下(純粹的 HTML 頁面)潮针，頁面也能呈現(xiàn)出很好的內(nèi)容結(jié)構(gòu)术荤、代碼結(jié)構(gòu)：裸奔更好看
2. 各種標(biāo)簽的靈活使用，而不是使用單一標(biāo)簽實現(xiàn)頁面各種結(jié)構(gòu)和內(nèi)容每篷，例如：元素的 alt 和 title 同時設(shè)置時瓣戚，alt 作為圖片的替代文字出現(xiàn)，title 是圖片的解釋文字焦读；label 標(biāo)簽的活用子库；
   原因2：極大程度利用標(biāo)簽的特點，優(yōu)化用戶體驗
3. 和搜索引擎建立良好的溝通矗晃，有助于爬蟲爬取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重仑嗅；
   原因3：有利于 SEO
4. 難免會有些特殊設(shè)備需要訪問網(wǎng)頁（例如：屏幕閱讀器、盲人閱讀器和移動設(shè)備等）张症，此時代碼的語義化就顯得格外重要仓技；
   原因4：方便其他設(shè)備解析以語義化的方式來渲染網(wǎng)頁
5. 語義化更具有可讀性，遵循 W3C 標(biāo)準(zhǔn)的團隊都遵循這個標(biāo)準(zhǔn)俗他，可以減少差異化脖捻。
   原因5：便于團隊開發(fā)和維護

怎樣做到 和 怎樣算是語義化的 HTML 結(jié)構(gòu)

關(guān)于怎樣做到 HTML 語義化，我們需要注意以下幾點：

• 盡可能少的使用無語義的標(biāo)簽 div 和 span兆衅；(其實它們也并非完全無語義地沮，個人覺得是相對的)；
• 在語義不明顯時羡亩，比如：既可以使用 div 也可以使用 p摩疑，那么盡量使用相對比較有語義化的標(biāo)簽 p，因為 p 在默認情況下有上下間距夕春，對兼容特殊終端有利未荒；
• 不要使用純樣式標(biāo)簽，如：b及志、font片排、u 等，改用 CSS 設(shè)置速侈；
• 需要強調(diào)的文本率寡，可以包含在 strong 或 em 標(biāo)簽中，strong 默認樣式是加粗（不要用 b）倚搬，em 是斜體（不要用 i）冶共；
• 使用表格時，標(biāo)題要用 caption，表頭用 thead捅僵，主體部分用 tbody 包圍家卖，尾部用 tfoot 包圍，表頭和一般單元格要區(qū)分開庙楚，表頭用 th上荡，單元格用 td；
• 表單域要用 fieldset 標(biāo)簽包起來馒闷，并用 legend 標(biāo)簽說明表單的用途酪捡；
• 每個 input 標(biāo)簽對應(yīng)的說明文本都需要用 label 標(biāo)簽，并且通過 input 設(shè)置 id 屬性纳账，在 label 標(biāo)簽中設(shè)置 for= input的id 來讓說明文本和相對應(yīng)的 input 關(guān)聯(lián)起來逛薇；
• 補充：不僅寫 HTML 結(jié)構(gòu)需要語義化，用語義化標(biāo)簽疏虫，給元素寫 CSS 類名時永罚，也要遵循語義化原則，不要隨便取名字就用议薪，這樣以后重構(gòu)或者閱讀代碼時尤蛮，會很難讀懂。另外斯议，最好使用英文产捞，而不是用漢語拼音湊合代替（low）。

擴展

結(jié)構(gòu) (html) 才是重點哼御，樣式 (css) 是用來修是結(jié)構(gòu)的坯临。所以要先確定 html，確定標(biāo)簽恋昼，再來選用適合的 css看靠。

當(dāng)我們想表達文章的標(biāo)題，我們或許會這樣寫：

<div class="title">我是標(biāo)題</div>

這個時候看代碼的或者頁面的訪客或許可以理解我們的意思液肌，但是 搜索引擎 / 特殊設(shè)備 就要反復(fù)揣摩了挟炬，它們只能通過分析源碼來體現(xiàn)或猜測網(wǎng)站想要表達的內(nèi)容。然后我們像下面這樣：

<h1 class="title">這才是標(biāo)題</h1>

h1 突出標(biāo)題嗦哆，用 strong 來突出關(guān)鍵字谤祖，就是語義化的體現(xiàn)。如果你還需要不同的呈現(xiàn)老速，再通過 css 去實現(xiàn)粥喜。

h1 擁有最高的權(quán)值，在一個頁面中最好只使用1個 h1 來突出內(nèi)容橘券，太多的 h1 會分散其整個頁面的權(quán)重额湘，對搜索引擎也是非常不友好的卿吐。想要使用多個 h1~h6，可以使用 hgroup 標(biāo)簽包住(html5 新增語義化標(biāo)簽)锋华。

總結(jié)

簡單的來說嗡官，就是當(dāng)需要表達段落的時候用 p 標(biāo)簽，需要表示標(biāo)題的時候逐級用 h1-h6 標(biāo)簽供置，整體文章用 article 標(biāo)簽等谨湘。HTML 語義化就是使用語義化的標(biāo)簽來實現(xiàn) HTML (結(jié)構(gòu))語義化和 代碼 （標(biāo)簽)語義化。因為這樣更能讓人讀懂頁面和代碼芥丧，更能發(fā)揮不同標(biāo)簽不同場景下的功能，同時還對搜索引擎和特殊設(shè)備友好坊罢，大家都遵循規(guī)范续担，減少差異化，有利于開發(fā)和維護活孩。

擴展：HTML 新增的語義化標(biāo)簽

header

該元素代表** 網(wǎng)頁 或 section 的頁眉 (頭部)**物遇。

通常包括 h1-h6 元素或 hgroup，作為整個頁面或者一個內(nèi)容塊的標(biāo)題憾儒。也可以包裹一節(jié)的目錄部分询兴，一個搜索框，一個 nav 或者任何相關(guān)的 logo起趾。(如果標(biāo)簽?zāi)茏约捍嬖谑ⅲ筒灰胔eader)

整個頁面沒有限制 header 元素的個數(shù)，可以為每個內(nèi)容塊增加一個 header 元素训裆。

footer

該元素代表 網(wǎng)頁 或 section 的頁腳 (底部)眶根，通常也含有該節(jié)的一些基本信息，譬如：作者边琉，相關(guān)文檔鏈接属百，版權(quán)資料等。如果footer元素包含了整個節(jié)变姨，那么它們就代表附錄族扰，索引，提拔定欧，許可協(xié)議渔呵，標(biāo)簽，類別等一些其他類似信息忧额。沒有個數(shù)限制厘肮，除了包裹內(nèi)容不一樣，其他跟 header 類似睦番。

hgroup

該元素代表 網(wǎng)頁 或 section 的標(biāo)題类茂，當(dāng)元素有多個層級時耍属，該元素可以將 h1 到 h6 元素放在其內(nèi)，譬如文章的主標(biāo)題和副標(biāo)題組合巩检。

• 如果只需要一個h1-h6標(biāo)簽就不用hgroup
• 如果有連續(xù)多個h1-h6標(biāo)簽就用hgroup
• 如果有連續(xù)多個標(biāo)題和其他文章數(shù)據(jù)厚骗，h1-h6標(biāo)簽就用hgroup包住，和其他文章元數(shù)據(jù)一起放入header標(biāo)簽

nav

該元素代表頁面導(dǎo)航鏈接區(qū)域兢哭，用于定義頁面的 主要導(dǎo)航部分领舰。

有些時候在一些并不是主要導(dǎo)航部分的地方，譬如：側(cè)邊欄上目錄迟螺，面包屑導(dǎo)航冲秽，搜索樣式，或者下一篇上一篇文章矩父，這些地方不適合就不要使用 nav 锉桑。事實上規(guī)范上說nav只能用在頁面主要導(dǎo)航部分上。頁腳區(qū)域中的鏈接列表窍株，雖然指向不同網(wǎng)站的不同區(qū)域民轴，譬如服務(wù)條款，版權(quán)頁等球订，這些footer元素就能夠用了后裸。

aside

該元素被包含在 article 元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章的相關(guān)資料冒滩、標(biāo)簽微驶、名詞解釋等。(特殊的 section)

在 article 元素之外使用作為頁面或站點全局的附屬信息部分旦部。沒有 article 與之對應(yīng)祈搜，最好不用。最典型的是側(cè)邊欄士八，其中的內(nèi)容可以是日志串連容燕，其他組的導(dǎo)航，甚至廣告婚度，這些內(nèi)容相關(guān)的頁面蘸秘。如果是廣告，其他日志鏈接或者其他分類導(dǎo)航可以用蝗茁。

section

該元素代表文檔中的 “節(jié)” 或 “段”醋虏，“段” 可以是指一篇文章里按照主題的分段；“節(jié)” 可以是指一個頁面里的分組哮翘。其還通常帶標(biāo)題颈嚼，雖然html5中section會自動給標(biāo)題h1-h6降級，但是最好手動給他們降級饭寺。

<section>
    <h1>section是啥阻课？</h1>
    <article>
        <h2>關(guān)于section</h1>
        <p>section的介紹</p>
        <section>
            <h3>關(guān)于其他</h3>
            <p>關(guān)于其他section的介紹</p>
        </section>
    </article>
</section>

一張頁面可以用section劃分為簡介叫挟、文章條目和聯(lián)系信息。不過在文章內(nèi)頁限煞，最好用article抹恳。section不是一般意義上的容器元素，如果想作為樣式展示和腳本的便利署驻，可以用div奋献。

article、nav旺上、aside可以理解為特殊的section瓶蚂，所以如果可以用article、nav抚官、aside就不要用section扬跋，沒實際意義的就用div。

article

該元素最容易跟 section 和 div 容易混淆凌节，其實 article 代表一個在文檔，頁面或者網(wǎng)站中自成一體的內(nèi)容洒试，其目的是為了讓開發(fā)者獨立開發(fā)或重用倍奢。譬如論壇的帖子，博客上的文章垒棋，一篇用戶的評論卒煞，一個互動的widget小工具。（特殊的section）

除了它的內(nèi)容叼架，article會有一個標(biāo)題（通常會在header里）畔裕，會有一個footer頁腳。

如果在 article 內(nèi)部再嵌套 article乖订，那就代表內(nèi)嵌的 article 是與它外部的內(nèi)容有關(guān)聯(lián)的扮饶，如博客文章下面的評論。article 內(nèi)部嵌套 article乍构，有可能是評論或其他跟文章有關(guān)聯(lián)的內(nèi)容甜无。

<article>

    <header>
        <h1>一篇文章</h1>
        <p><time pubdate datetime="2012-10-03">2012/10/03</time></p>
    </header>

    <p>文章內(nèi)容..</p>

    <article>
        <h2>評論</h2>

        <article>
            <header>
                <h3>評論者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈哈哈</p>
        </article>

        <article>
            <header>
                <h3>評論者: XXX</h3>
                <p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p>
            </header>
            <p>哈？哈哥遮？哈岂丘？</p>
        </article>

    </article>

</article>

那 article 內(nèi)部嵌套 section 一般是從屬關(guān)系，article 是大主體眠饮，section 是構(gòu)成這個大主體的一部分奥帘。本網(wǎng)站的全部文章都是 article 嵌套一個個 section 章節(jié)，這樣能讓瀏覽器更容易區(qū)分各個章節(jié)所包括的內(nèi)容仪召。

<article>

    <h1>前端技術(shù)</h1>
    <p>前端技術(shù)有那些</p>

    <section>
        <h2>CSS</h2>
        <p>樣式..</p>
    </section>

    <section>
        <h2>JS</h2>
        <p>腳本</p>
    </section>

</article>

而 section 內(nèi)部嵌套 article 相當(dāng)于 section 將自成一體的 article 包裹寨蹋，組成一個團體松蒜。

<section>
    
    <h1>介紹: 網(wǎng)站制作成員配備</h1>

    <article>
        <h2>設(shè)計師</h2>
        <p>設(shè)計網(wǎng)頁的...</p>
    </article>

    <article>
        <h2>程序員</h2>
        <p>后臺寫程序的..</p>
    </article>

    <article>
        <h2>前端工程師</h2>
        <p>給樓上兩位打雜的..</p>
    </article>

</section>

• 自身獨立的情況下：用article
• 是相關(guān)內(nèi)容：用section
• 沒有語義的：用div

HTML5節(jié)元素標(biāo)簽包括body article nav aside section header footer hgroup ，還有h1-h6 address钥庇。

address 代表區(qū)塊容器牍鞠，必須是作為聯(lián)系信息出現(xiàn)，郵編地址评姨、郵件地址等等,一般出現(xiàn)在 footer难述。
h1-h6 因為 hgroup，section 和 article 的出現(xiàn)吐句，h1-h6 定義也發(fā)生了變化胁后，允許一張頁面出現(xiàn)多個 h1。

參考博文

HTML 5的革新
HTML 結(jié)構(gòu)語義化
如何理解 HTML 結(jié)構(gòu)的語義化