HTML 5的革新——語義化標籤(一)
HTML 5的革新之一:語義化標籤一節元素標籤。
在HTML 5出來之前,我們用div
來表示頁面章節,但是這些div
都沒有實際意義。(即使我們用css樣式的id和class形容這塊內容的意義)。這些標籤只是我們提供給瀏覽器的指令,只是定義一個網頁的某些部分。但現在,那些之前沒“意義”的標籤因爲因爲html5的出現消失了,這就是我們平時說的“語義”。
看下圖沒有用div標籤來佈局
html5的佈局
嗯,如上圖那個頁面結構沒有一個div,都是採用html5語義標籤(用哪些標籤,關鍵取決於你的設計目標)。
但是也不要因爲html5新標籤的出現,而隨意用之,錯誤的使用肯定會事與願違。所以有些地方還是要用div的,就是因爲div沒有任何意義的元素,他只是一個標籤,僅僅是用來構建外觀和結構。因此是最適合做容器的標籤。
W3C定義了這些語義標籤,不可能完全符合我們有時的設計目標,就像制定出來的法律不可能流傳100年都不改變,更何況它才制定沒多久,不可能這些語義標籤對所以設計目標的適應。只是一定程度上的“通用”,我們的目標是讓爬蟲讀懂重要的東西就夠了。
結論:不能因爲有了HTML 5標籤就棄用了div,每個事物都有它的獨有作用的。
節點元素標籤因使用的地方不同,我將他們分爲:節元素標籤、文本元素標籤、分組元素標籤分開來講解HTML5中新增加的語義化標籤和使用總結。
header元素
header 元素代表“網頁”或“section”的頁眉。
通常包含h1-h6
元素或hgroup
,作爲整個頁面或者一個內容塊的標題。也可以包裹一節的目錄部分,一個搜索框,一個nav
,或者任何相關logo。
整個頁面沒有限制header元素的個數,可以擁有多個,可以爲每個內容塊增加一個header元素
<header> <hgroup> <h1>網站標題</h1> <h1>網站副標題</h1> </hgroup> </header>header的示例代碼
header使用注意:
- 可以是“網頁”或任意“section”的頭部部分;
- 沒有個數限制。
- 如果hgroup或h1-h6自己就能工作的很好,那就不要用header。
footer元素
footer
元素代表“網頁”或“section”的頁腳,通常含有該節的一些基本信息,譬如:作者,相關文檔鏈接,版權資料。如果footer
元素包含了整個節,那麼它們就代表附錄,索引,提拔,許可協議,標籤,類別等一些其他類似信息。
<footer> COPYRIGHT@小北 </footer>
footer
的示例代碼
footer使用注意:
- 可以是“網頁”或任意“section”的底部部分;
- 沒有個數限制,除了包裹的內容不一樣,其他跟header類似。
hgroup元素
hgroup
元素代表“網頁”或“section”的標題,當元素有多個層級時,該元素可以將h1
到h6
元素放在其內,譬如文章的主標題和副標題的組合
<hgroup> <h1>這是一篇介紹HTML 5語義化標籤和更簡潔的結構</h1> <h2>HTML 5</h2> </hgroup>
hgroup
示例代碼
hgroup使用注意:
- 如果只需要一個h1-h6標籤就不用hgroup
- 如果有連續多個h1-h6標籤就用hgroup
- 如果有連續多個標題和其他文章數據,h1-h6標籤就用hgroup包住,和其他文章元數據一起放入header標籤
nav元素
nav
元素代表頁面的導航鏈接區域。用於定義頁面的主要導航部分。
<nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav>
nav
實例
但是我在有些時候卻情不自禁的想用它,譬如:側邊欄上目錄,麪包屑導航,搜索樣式,或者下一篇上一篇文章,但是事實上規範上說nav只能用在頁面主要導航部分上。頁腳區域中的鏈接列表,雖然指向不同網站的不同區域,譬如服務條款,版權頁等,這些footer元素就能夠用了。
nav使用注意:
- 用在整個頁面主要導航部分上,不合適就不要用nav元素;
aside元素
aside
元素被包含在article元素中作爲主要內容的附屬信息部分,其中的內容可以是與當前文章有關的相關資料、標籤、名次解釋等。(特殊的section)
在article元素之外使用作爲頁面或站點全局的附屬信息部分。最典型的是側邊欄,其中的內容可以是日誌串連,其他組的導航,甚至廣告,這些內容相關的頁面。
<article> <p>內容</p> <aside> <h1>作者簡介</h1> <p>小北,前端一枚</p> </aside> </article>
aside
實例
aside使用總結:
- aside在article內表示主要內容的附屬信息,
- 在article之外則可做側邊欄,沒有article與之對應,最好不用。
- 如果是廣告,其他日誌鏈接或者其他分類導航也可以用
section元素
section
元素代表文檔中的“節”或“段”,“段”可以是指一篇文章裏按照主題的分段;“節”可以是指一個頁面裏的分組。
section通常還帶標題,雖然html5中section會自動給標題h1-h6降級,但是最好手動給他們降級。如下:
<section> <h1>section是啥?</h1> <article> <h2>關於section</h1> <p>section的介紹</p> <section> <h3>關於其他</h3> <p>關於其他section的介紹</p> </section> </article> </section>
section
示例代碼
section使用注意:
一張頁面可以用section劃分爲簡介、文章條目和聯繫信息。不過在文章內頁,最好用article。section不是一般意義上的容器元素,如果想作爲樣式展示和腳本的便利,可以用div。
- 表示文檔中的節或者段;
- article、nav、aside可以理解爲特殊的section,所以如果可以用article、nav、aside就不要用section,沒實際意義的就用div
article元素
article
元素最容易跟section
和div
容易混淆,其實article
代表一個在文檔,頁面或者網站中自成一體的內容,其目的是爲了讓開發者獨立開發或重用。譬如論壇的帖子,博客上的文章,一篇用戶的評論,一個互動的widget小工具。(特殊的section)
除了它的內容,article
會有一個標題(通常會在header
裏),會有一個footer
頁腳。我們舉幾個例子介紹一下article,好更好區分article、section、div
<article> <h1>一篇文章</h1> <p>文章內容..</p> <footer> <p><small>版權:html5jscss網所屬,作者:小北</small></p> </footer> </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包裹,就組成了一個團體。
article和section和例子就例舉這麼多了,具體情況具體分析,不易深究。漏了div
d,其實div
就是隻是想用來把元素組合或者給它們加樣式時使用。
article使用注意:
- 自身獨立的情況下:用article
- 是相關內容:用section
- 沒有語義的:用div
HTML5其他結構元素標籤
HTML5節元素標籤包括body
article nav aside section header footer hgroup
,還有h1-h6
address
。
-
address
代表區塊容器,必須是作爲聯繫信息出現,郵編地址、郵件地址等等,一般出現在footer。 -
h1-h6
因爲hgroup,section和article的出現,h1-h6定義也發生了變化,允許一張頁面出現多個h1。
HTML5語義化標籤還有第二篇HTML 5的革新——語義化標籤(二)。我們在構造語義化和結構化的標籤時的選擇也變得有些不慎重。也就是說,我們不應該濫用超語義化的元素。