距HTML5標(biāo)準(zhǔn)規(guī)范制定完成并公開發(fā)布已經(jīng)有好些年了，面試時(shí)也少不了要問對(duì)HTML5語(yǔ)義化得理解。但是在實(shí)際運(yùn)用時(shí)，真正使用HTML5標(biāo)簽來開發(fā)的似乎不是很多（ps：查看了幾個(gè)巨頭公司網(wǎng)站推論），可能一部分原因是仍有部分用戶使用在使用低版本瀏覽器。

但是就我個(gè)人而言，因選取一些標(biāo)簽時(shí)會(huì)比較糾結(jié)，所以仍使用了div。（PS：正是因?yàn)檫@樣，才有了這篇文章的，沒錯(cuò)，以后要注意語(yǔ)義化了）

什么是語(yǔ)義化？就是用合理、正確的標(biāo)簽來展示內(nèi)容，比如h1~h6定義標(biāo)題。

語(yǔ)義化優(yōu)點(diǎn)：

易于用戶閱讀，樣式丟失的時(shí)候能讓頁(yè)面呈現(xiàn)清晰的結(jié)構(gòu)。
有利于SEO，搜索引擎根據(jù)標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重。
方便其他設(shè)備解析，如盲人閱讀器根據(jù)語(yǔ)義渲染網(wǎng)頁(yè)
有利于開發(fā)和維護(hù)，語(yǔ)義化更具可讀性，代碼更好維護(hù)，與CSS3關(guān)系更和諧。

今天先介紹主體結(jié)構(gòu)標(biāo)簽，如圖所示：

1、<header>

<header>定義文檔或者文檔的部分區(qū)域的頁(yè)眉，應(yīng)作為介紹內(nèi)容或者導(dǎo)航鏈接欄的容器。

在一個(gè)文檔中，您可以定義多個(gè)<header>元素，但需要注意的是<header>元素不能作為<address>、<footer> 或 <header> 元素的子元素。

2、<nav>

<nav>描述一個(gè)含有多個(gè)超鏈接的區(qū)域，該區(qū)域包含跳轉(zhuǎn)到其他頁(yè)面或頁(yè)面內(nèi)部其他部分的鏈接列表。

在一個(gè)文檔中，可定義多個(gè)<nav>元素。

3、<main>

<main> 定義文檔的主要內(nèi)容，該內(nèi)容在文檔中應(yīng)當(dāng)是獨(dú)一無二的，不包含任何在文檔中重復(fù)的內(nèi)容，比如側(cè)邊欄，導(dǎo)航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框（除非搜索框作為文檔的主要功能）。

需要注意的是在一個(gè)文檔中不能出現(xiàn)多個(gè)<main>標(biāo)簽。

4、<article>

<article>元素表示文檔、頁(yè)面、應(yīng)用或網(wǎng)站中的獨(dú)立結(jié)構(gòu)，是可獨(dú)立分配的、可復(fù)用的結(jié)構(gòu)，如在發(fā)布中，它可能是論壇帖子、雜志或新聞文章、博客、用戶提交的評(píng)論、交互式組件，或者其他獨(dú)立的內(nèi)容項(xiàng)目。

當(dāng)<article>元素嵌套使用時(shí)，則該元素代表與外層元素有關(guān)的文章。例如，代表博客評(píng)論的<article>元素可嵌套在代表博客文章的<article>元素中。

5、<aside>

<aside> 元素表示一個(gè)和其余頁(yè)面內(nèi)容幾乎無關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分且可以被單獨(dú)的拆分出來而不會(huì)影響整體。通常表現(xiàn)為側(cè)邊欄或嵌入內(nèi)容。

6、<footer>

<footer>定義最近一個(gè)章節(jié)內(nèi)容或者根節(jié)點(diǎn)元素的頁(yè)腳。一個(gè)頁(yè)腳通常包含該章節(jié)作者、版權(quán)數(shù)據(jù)或者與文檔相關(guān)的鏈接等信息。

使用footer插入聯(lián)系信息時(shí)，應(yīng)在 footer 元素內(nèi)使用 <address> 元素。

注意不能包含<footer>或者<header>

7、<section>

<section>表示文檔中的一個(gè)區(qū)域（或節(jié)），比如，內(nèi)容中的一個(gè)專題組。

如果元素內(nèi)容可以分為幾個(gè)部分的話，應(yīng)該使用 <article> 而不是 <section>。
不要把 <section> 元素作為一個(gè)普通的容器來使用，特別是當(dāng)<section>僅僅是為了美化樣式或方便腳本使用的時(shí)候，應(yīng)使用<div>。

這幾個(gè)標(biāo)簽，比較容易混淆的是<section>、<article>，所以這里特別說明：

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

通俗來說就是<article>比<section>更具有獨(dú)立性、完整性?？赏ㄟ^該段內(nèi)容脫離了所在的語(yǔ)境，是否完整、獨(dú)立來判斷。

最新評(píng)論