HTML語義化

一、含義--用正確的標籤作正確對事情。

二、目的--讓頁面的內容結構化，便於瀏覽器，搜索引擎解析。

三、好處--在沒有css樣式的狀況下，也以一種文檔格式顯示，易於閱讀；

               搜索引擎的爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重，易於SEO；

               使閱讀源代碼的人更加容易將網站分塊，便於閱讀和維護。

四、經常使用的標籤--

　　<header>

              能夠是網頁或任意section的頭部部分；

              沒有個數限制；

              若是<hgroup>或<h1>...<h6>本身能工做的很好，就不用。

　　<footer>跟<header>相似。

　　<hgroup>

              若是隻須要一個h1-h6標籤就不用hgroup；

　　　　若是有連續多個h1-h6標籤就用hgroup；

　　　　若是有連續多個標題和其餘文章數據，h1-h6標籤就用hgroup包住，和其餘文章元數據一塊兒放入header標籤。

　　<nav>用在整個頁面主要導航部分上。

　　<aside>

　　　　aside在article內表示主要內容的附屬信息；

　　　　在article以外則可作側邊欄，沒有article與之對應，最好不用；

　　　　若是是廣告，其餘日誌連接或者其餘分類導航也能夠用。

　　<section>

　　　　表示文檔中的節或者段；

　　　　article、nav、aside能夠理解爲特殊的section，因此若是能夠用article、nav、aside就不要用section，沒實際意義的就用div。

　　<article>--article內部嵌套article，有多是評論或其餘跟文章有關聯的內容。

<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標籤使用狀況，若是在article內部再嵌套article，那就表明內嵌的article是與它外部的內容有關聯的，如博客文章下面的評論，以下：

<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嵌套article來表示的實例

article內部嵌套article，有多是評論或其餘跟文章有關聯的內容。那article內部嵌套section通常是什麼狀況呢。以下：

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

文章裏的章節，一個article裏的section實例：由於文章內section部分雖然也是獨立的部分，可是它門只能算是組成總體的一部分，從屬關係，article是大主體，section是構成這個大主體的一部分。本網站的所有文章都是article嵌套一個個section章節，這樣能讓瀏覽器更容易區分各個章節所包括的內容。

那section內部嵌套article又有哪些狀況呢，以下

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

一個section裏的article實例：設計師、程序員、前端工程師都是一個獨立的總體，他們組成了網站製做基本配備，固然還有其餘成員~~。設計師、程序員、前端工程師就像article，是一個個獨立的總體，而section將這些自成一體的article包裹，就組成了一個團體。