html5 新標籤

時間 2019-11-13

標籤 html5 html 標籤欄目 HTML5 简体版

原文原文鏈接

在以前的HTML頁面中，你們基本上都是用了Div+CSS的佈局方式。而搜索引擎去抓取頁面的內容的時候，它只能猜想你的某個Div內的內容是文章內容容器，或者是導航模塊的容器，或者是做者介紹的容器等等。也就是說整個HTML文檔結構定義不清晰，HTML5中爲了解決這個問題，專門添加了：頁眉、頁腳、導航、文章內容等跟結構相關的結構元素標籤。css

在講這些新標籤以前，咱們先看一個普通的頁面的佈局方式：

上圖中咱們很是清晰的看到了，一個普通的頁面，會有頭部，導航，文章內容，還有附着的右邊欄，還有底部等模塊，而咱們是經過class進行區分，並經過不一樣的css樣式來處理的。但相對來講class不是通用的標準的規範，搜索引擎只能去猜想某部分的功能，另外就是此頁面程序交給視力障礙人士來閱讀的話，文檔結構和內容也不會很清晰。而HTML5新標籤帶來的新的佈局則是下面這種狀況：

相關的HTML代碼是：
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
   <section>...</section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>html

　有了上面的直接的感官的認識後，咱們下面一一來介紹HTML5中的相關結構標籤。ide

section標籤
  <section>標籤，定義文檔中的節。好比章節、頁眉、頁腳或文檔中的其它部分。通常用於成節的內容，會在文檔流中開始一個新的節。它用來表現普通的文檔內容或應用區塊，一般由內容及其標題組成。但section元素標籤並不是一個普通的容器元素，它表示一段專題性的內容，通常會帶有標題。

  當咱們描述一件具體的事物的時候，一般鼓勵使用article來代替section；當咱們使用section時，仍然可使用h1來做爲標題，而不用擔憂它所處的位置，以及其它地方是否用到；當一個容器須要被直接定義樣式或經過腳本定義行爲時，推薦使用div元素而非section。

<section>
   <h1>section是什麼？</h1>
   <h2>一個新的章節</h2>
   <article>
    <h2>關於section</h1>
    <p>section的介紹</p>
    ...
   </article>
</section>佈局

article標籤
  <article>是一個特殊的section標籤，它比section具備更明確的語義，它表明一個獨立的、完整的相關內容塊，可獨立於頁面其它內容使用。例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等等。通常來講，article會有標題部分（一般包含在header內），有時也會包含footer。article能夠嵌套，內層的article對外層的article標籤有隸屬關係。例如，一篇博客的文章，能夠用article顯示，而後一些評論能夠以article的形式嵌入其中。
<article>
  <header>
   <hgroup>
    <h1>這是一篇介紹HTML 5結構標籤的文章</h1>
    <h2>HTML 5的革新</h2>
   </hgroup>
   <time datetime="2011-03-20">2011.03.20</time>
  </header>
  <p>文章內容詳情</p>
</article>網站

nav標籤
   nav標籤表明頁面的一個部分，是一個能夠做爲頁面導航的連接組，其中的導航元素連接到其它頁面或者當前頁面的其它部分，使html代碼在語義化方面更加精確，同時對於屏幕閱讀器等設備的支持也更好。
<nav>
<ul>
  <li>厚德IT</li>
  <li>FlyDragon</li>
  <li>J飛龍天驚</li>
</ul>
</nav>搜索引擎

aside標籤
   aside標籤用來裝載非正文的內容，被視爲頁面裏面一個單獨的部分。它包含的內容與頁面的主要內容是分開的，能夠被刪除，而不會影響到網頁的內容、章節或是頁面所要傳達的信息。例如廣告，成組的連接，側邊欄等等。

<aside>
  <h1>做者簡介</h1>
  <p>厚德IT</p>
</aside>spa

header標籤
  <header>標籤訂義文檔的頁眉，一般是一些引導和導航信息。它不侷限於寫在網頁頭部，也能夠寫在網頁內容裏面。一般<header>標籤至少包含（但不侷限於）一個標題標記（<h1>-<h6>），還能夠包括<hgroup>標籤，還能夠包括表格內容、標識、搜索表單、<nav>導航等。
<header>
<hgroup>
  <h1>網站標題</h1>
  <h1>網站副標題</h1>
</hgroup>
</header>orm

footer標籤
footer標籤訂義section或document的頁腳，包含了與頁面、文章或是部份內容有關的信息，好比說文章的做者或者日期。做爲頁面的頁腳時，通常包含了版權、相關文件和連接。它和<header>標籤使用基本同樣，能夠在一個頁面中屢次使用，若是在一個區段的後面加入footer，那麼它就至關於該區段的頁腳了。
<footer>
COPYRIGHT@厚德IT
</footer>htm

hgroup標籤
   hgroup標籤是對網頁或區段section的標題元素（h1-h6）進行組合。例如，在一區段中你有連續的h系列的標籤元素，則能夠用hgroup將他們括起來
<hgroup>
  <h1>這是一篇介紹HTML 5結構標籤的文章</h1>
  <h2>HTML 5的革新</h2>
</hgroup>索引

figure 標籤
   用於對元素進行組合。多用於圖片與圖片描述組合。
<figure>
  <img src="img.gif" alt="figure標籤" title="figure標籤" />
  <figcaption>這兒是圖片的描述信息</figcaption>
</figure>

總結：有了新的結構性的標籤的標準，讓HTML文檔更加清晰，可閱讀性更強，更利於SEO，也更利於視障人士閱讀。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。