html5語意化標籤有哪些

html5語意化標籤：1、header標籤；2、nav標籤；3、footer標籤；4、hgroup標籤；5、section標籤；6、article標籤；7、aside標籤；8、figure標籤；9、time標籤；10、address標籤。

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML語意化：

每個HTML標籤都有自己特定意義（語意），語意化是指使用語意恰當的標籤，讓頁面有良好的結構，頁面元素有意義，能夠讓人和搜尋引擎都容易理解。

看過一個比較形象的例子：

蓋一棟房子的時候，有的地方該用磚頭，有的部分該用瓷片，還有的地方得用水泥糊上，這樣蓋出來房子才會結實，整齊美觀。

如果硬是要瓷片替代磚頭，房子勉強也能蓋起來，但是這樣的房子不牢固，容易倒塌，外觀也不好看。

同樣，生活很多事物都有相似相同之處！ 該用什麼標籤表示就用什麼標籤表示，結構良好，更易人和搜尋引擎理解。還有一點，就是便於開發和維護啊，看過好多網頁結構，各種想吐槽好嗎?各種混亂不堪，外觀表現的任務交由css去實現就行啦，不要為了外觀表現而佈局！

語意化的意義與作用

• 去掉或遺失樣式的時候能夠讓頁面呈現出清晰的結構
• 使用者體驗：例如title、alt用來解釋名詞或解釋圖片資訊、label標籤的活用；
• 有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴標籤來確定上下文和各個關鍵字的權重；
• 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、行動裝置）以意義的方式來渲染網頁；
• 便於團隊開發和維護，語意化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

語意化都注意什麼？

• 盡可能少用無語意的p、span標籤等；使用HTML5中新增的較多強語意化標籤，;

• 不要使用樣式化標籤，如font、b、….等等等，完全可以用css實現樣式（再說HTML5中基本上將此類「樣式化標籤」廢除了！）

• 強調文本，盡量使用strong標籤加強強調，em標籤設定斜體

• 表格書寫規範：標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。 表頭和一般單元格要區分開，表頭用th，單元格用td；

• 表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途；(說實話，這個倒真沒怎麼注意到！)

• 每個input標籤對應的說明文字都需要使用label標籤，並且透過id屬性和相對應的input關聯起來。

HTML5語意化標籤：

#1.header：標籤定義「網頁」或「section」的頁首。

通常包含h1-h6元素或hgroup，作為整個頁面或一個內容區塊的標題。也可以包裹一節的目錄部分，一個搜尋框，一個nav，或任何相關logo。

<header>
     <h1 id="毕业生实习">毕业生实习</h1>
     <span>2016/08/05</span>
</header>
<!--之前使用的是无语义的div+class-->
<div class=&#39;header&#39;>...</div>

或

<header>
    <hgroup>
        <h1 id="网站标题">网站标题</h1>
        <h2 id="网站副标题">网站副标题</h2>
    </hgroup>
</header>

用法：

##可以是「網頁」或任意「section」的頭部部分；
• 沒有數限制。
• 如果hgroup或h1-h6自己就能運作的很好，那就不要用header。

---

2.nav：定義導覽連結的部分。

<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
        <li><a href="#">xxx</a></li>
    </ul>
</nav>
<!--之前使用的是无语义的div+class-->
<div class=&#39;nav&#39;>...</div>

用法：

用在整個頁面
• 主要導航部分上，不合適就不要用nav元素；
可用作
• 頁面導航的連結群組，並不是所有的連結群組都要放進nav元素中，只需將主要、基本的連結群組放進其中;

注意：例如，在頁腳中透過會有一組連結，包括服務條款，首頁，版權聲明等， 使用footer元素是最恰當的。

特定用途：傳統導覽條、側邊欄導覽、業內導覽、翻頁操作等

---

3.footer標籤：代表「網頁」或“section”的頁尾。

通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

<footer>
  作者：xxxx <br />
 Copyright © xxx.All rights reserved.
</footer>
<!--之前使用的是无语义的div+class-->
<div class=&#39;footer&#39;>...</div>

用法：

• 可以是“网页”或任意“section”的底部部分；
• 没有个数限制，除了包裹的内容不一样，其他跟header类似。
• 多用于包含服务条款，友情链接、作者信息、版权信息等

---

4. hgroup元素：“网页”或“section”的标题

当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合

<hgroup>
    <h1 id="主标题">主标题</h1>
    <h2 id="HTML-nbsp">HTML 5</h2>
</hgroup>

用法：

• 如果只需要一个h1-h6标签就不用hgroup
• 如果有连续多个h1-h6标签就用hgroup
• 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签

---

5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）

<section>
  <h1 id="section要包含标题">section要包含标题</h1>
  <p>section要包含内容...</p>
</section>

用法：

• article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用p
• 当容器需要标题和内容时，建议使用section标签，若只是普通的容器，应该用p元素较好！section标签非p！

---

6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)

<article>
   <header>
     <h1 id="标题处">标题处</h1>
   </header>
   <p>内容描述</p>
   <footer>脚部声明标注</footer>
</article>

用法：定义一个独立完整的内容部分（可包含标题，内容，脚注）时使用！

article、section间的相互嵌套关系：
拜读博文：http://www.html5jscss.com/html5-semantics-section.html

---

7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。

书籍中的定义很长很绕，在收集之后，发现主要有两种用法:（啃下概念）

1.用于article标签之内，此时表示的是该独立内容的附属信息部分；

<article>
        <p>article内容区</p>
        <aside>
            <span>附属信息1</span>
            <span>附属信息2</span>
            <span>附属信息3</span>
        </aside>
    </article>

2.用于article标签之外，此时作为页面或站点全局的附属信息部分。

    <aside>
        <h1 id="附属信息标题">附属信息标题</h1>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
        <a href="#">附属信息...</a>
    </aside>

用法：

• aside在article内表示主要内容的附属信息
• 在article之外则可做侧边栏，页面或站点全局的附属信息部分
• 如果是广告，其他日志链接或者其他分类导航也可以用

（一句话概括：不同的位置表示为对应区域的附属信息！）

---

8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。

figcaption标签：用于元素定义figure的标题。

1.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。

    <figure>
        <figcaption>figure的标题</figcaption>
        <img src="/static/imghwm/default1.png"  data-src="pic.jpg"  class="lazy"   alt="...">
    </figure>

---

9. time标签：定义时间或日期

<p>定义时间...<time>9:00</time></p>

<p>结合datetime属性定义日期...<time datetime="2016-08-08">时间</time></p>

以上为实践操作中可能会用到的标签，HTML5还新增了很多标签，但因为用途与浏览器兼容性问题，还是为人所慎用的！待拓展！

---

10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

表示文档或文章的作者/拥有者的联系信息，在body标签中表示文档的作者的联系信息；在article标签中表示文章作者的联系信息；

W3School示例文档：http://www.w3school.com.cn/tags/tag_address.asp

用法：

• 标签不应该用于描述通讯地址，除非它是联系信息的一部分。
• 元素通常连同其他信息被包含在 footer 元素中。

---

总结：掌握语义化含义、作用以及应当注意的细节，HTML5中常用的语义化新标签！知识点不在于多，而研究透彻应学以致用！

推荐教程：《html视频教程》

以上是html5語意化標籤有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！