HTML5资料之语义标签

◆ 语义标签的概念：

有意义的标签，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，语义标签有利于搜索引擎或辅助设备理解HTML页面内容，对SEO优化有好处。

★ 传统的做法
通过增加类名如class=“header”、class=“footer”，使HTML页面具有语义性，但是不具有通用性。

★ HTML5
通过新增语义标签的形式来解决这个问题，本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成<div class=“nav”> 相当于 <nav>。

◆ 常用新语义标签：

<nav>：导航

<header>：页眉

<footer>：页脚

<section>：区块

<article>：文章，如文章、评论、帖子、博客

<aside>：侧边栏，如文章的侧栏

<figure>：媒介内容分组，与 ul > li 做个比较

<mark>：标记 (带用“UI”，不怎么用)

<progress>：进度 (带用“UI”，不怎么用)

<time>：日期

注：尽量避免全局使用header、footer、aside等语义标签。

◆ 传统网页布局：

<!-- 头部 -->
<div class="header">
 		 <ul class="nav"></ul>
</div>
     <!-- 主体部分 -->
     <div class="main">
        <!-- 文章 -->
     <div class="article"></div>
     <!-- 侧边栏 -->
     <div class="aside"></div>
     </div>
      <!-- 底部 -->
     <div class="footer"></div>

◆ HTML5经典网页布局：

<!-- 头部 -->
<header>
	<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
   <!-- 文章 -->
   <article></article>
   <!-- 侧边栏 -->
   <aside></aside>
</div>
<!-- 底部 -->
<footer></footer>