1、什么是HTML語義化？

“語義化”指的是在需要更少的人類干預的情況下，能夠研究和手機信息，讓網頁能夠被機器理解，最終讓人類受益。

語義化的目的就是讓大家直觀的認識標簽（markup）和屬性（attribute）的用途和作用。很明顯Hx系列看起來很像標題，因為擁有粗體和較大的字號。<strong>,<em>用來區(qū)別于其他文字，起到了強調的作用。至于列表和表格很明顯的告訴你他們是做什么的。

2、HTML語義化有什么好處？

語義化的網頁的好處，最主要的就是對搜索引擎友好，有了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取，你網站的推廣便可以省下不少的功夫。 語義 Web 技術有助于利用基于開放標準的技術，從數據、文檔內容或應用代碼中分離出意義。 3、為什么要HTML語義化？

• 在沒有css的情況下，頁面也能呈現出比較好的內容結構、代碼結構。
• 用戶體驗較好：例如：label標簽的活用、title、alt用于解釋名詞或解釋圖片。
• 方便其他設備解析（閱讀器、移動設備）以意義的方式來渲染網頁。
• 便于團隊維護：語義化的HTML更具可讀性，團隊遵循W3C標準。
• 有利于SEO：和搜索引擎建立友好的交流，有利于爬蟲抓取更多的有效信息。

4、HTML語義化標簽

• header元素

?該元素是網頁或者section的頁眉部分，通常包含h標簽，包括網站標志、全局導航、全站鏈接、搜索框等。

也可以包含一節(jié)的目錄或者nav或者相關的logo。

一個頁面可以有多個header標簽。

eg、

<header><hgroup><h1>網站標題</h1><h1>網站副標題</h1></hgroup> </header>

• title元素

該元素用來簡短的描述網頁內容，在頁面中唯一存在。

搜索引擎會將title作為判斷頁面主要內容的指標，有效的title應該包含幾個與頁面內容密切相關的關鍵字，建議將title核心內容放在前60個字符中。

• foot元素

該元素代表網頁或section的頁腳，通常包含該節(jié)內容的基本信息，或者代表附錄、索引、許可協(xié)議、標簽類別等信息。

一個頁面中可以有多個footer，可以是任何網頁或section的底部。

eg、

eg、 <footer>COPYRIGHT@浮川之畔 </footer>

• hgroup元素

該元素代表網頁或section的標題。可以將h1到h6的標簽放在里面。

注：如果只有一個h標簽，就不用hgroup。

如果有多個連續(xù)的h標簽就用hgroup。

eg、

eg、 <hgroup><h1>這是一篇介紹HTML 5語義化標簽和更簡潔的結構</h1><h2>HTML 5</h2> </hgroup>

• nav標簽

該元素是頁面的導航鏈接區(qū)域，僅對頁面中重要的鏈接群使用。

用來定義頁面的主要導航部分。

eg、

<nav><ul><li>HTML 5</li><li>CSS3</li><li>JavaScript</li></ul> </nav>

• aside元素

該元素用來指定附注欄，通常被包含在article元素中作為主要內容的附屬部分，其中的內容可以是與當前文章有關的相關資料、標簽、名詞解釋等，是特殊的section。

?eg、

<article><p>內容</p><aside><h1>作者簡介</h1><p>浮川之畔，新入門碼農</p></aside> </article>

• main元素

該元素是頁面的主體內容，一個頁面只能使用一次。

• ?article元素

該元素包含一個報紙一樣的東西，代表一個在文檔、頁面或網站中自成一體的內容。

如果在article中再嵌套article就代表內嵌的article中的內容和外部的是有關系的。

eg、

<article><header><h1>一篇文章</h1><p><time pubdate datetime="2012-10-03">2012/10/03</time></p></header><p>文章內容..</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內部還可以嵌套section?

eg、

<article><h1>前端技術</h1><p>前端技術有那些</p><section><h2>CSS</h2><p>樣式..</p></section><section><h2>JS</h2><p>腳本</p></section></article>

section 內部嵌套article。article是大主體，section是構成這個大主體的一部分。

eg、

<section><h1>介紹: 網站制作成員配備</h1><article><h2>設計師</h2><p>設計網頁的...</p></article><article><h2>程序員</h2><p>后臺寫程序的..</p></article><article><h2>前端工程師</h2><p>給樓上兩位打雜的..</p></article></section>

使用注意：

自身獨立使用：article

相關內容使用：section

無語義使用：div

• section元素

該元素代表網頁中的‘節(jié)或段。“段”可以是指一篇文章里按照主題的分段；“節(jié)”可以是指一個頁面里的分組。

section標簽內通常帶有標題。

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

article、nav、aside可以理解為特殊的section，所以如果可以用article、nav、aside就不要用section，沒實際意義的就用div

eg、

<section><h1>section是啥？</h1><article><h2>關于section</h1><p>section的介紹</p><section><h3>關于其他</h3><p>關于其他section的介紹</p></section></article> </section>

• small元素

該元素指定細則，輸入免責聲明、注解、署名、版權等。只能用于短語，不能用在長的法律聲明。

• address元素

該元素用來表示作者、相關人士或組織的聯(lián)系信息。

• del元素

該元素表示被移除的內容。

• ins元素

該元素表示被添加的內容。

?

?

總結

以上是生活随笔為你收集整理的HTML语义化的理解的全部內容，希望文章能夠幫你解決所遇到的問題。

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