HTML5语义元素

  语义元素

article,aside,nav,section,header,footer

上面这些语义元素不会给页面内容造成任何视觉上的改变，它们只是提供html文档的结构，供计算机和开发者读取和阅读！

article元素

article元素对应一段独立的内容，可以将不同的article分节聚合在一起，并构成页面。article可以是以下内容。

1,一篇杂志或新闻稿件

2，一篇博客

3，一个论坛主题

4，一篇博客评论

article元素中可以放header,footer,section元素，section中 也可以放article元素。

鉴别内容是否合适article的最简单的办法是判断该内容能否在聚合后独立存在。

<article>
   <h1>标题</h1>
   <p>我喜欢动物，我将来肯定有一只小宠物！！</p>
</article>

 

aside元素

aside元素定义的是与主要 内容无关或者关系不大的内容。它也可以作为web页面的侧边栏出现，提供与整个网站而不是页面相关的信息。

aside的类型取决于aside所在的位置。如aside在article标签中，，则作用是定义与article相关的内容，例如，相关的article的词汇表或列表。如果aside位于article元素之外，则他的作用是定义整个网站相关的内容，如博客链接或广告这类侧边栏元素。

<article>
   <h1>标题</h1>
   <p>我喜欢动物，我将来肯定有一只小宠物！！</p>
   <aside>
      <h1>标题</h1>
      <p>侧边栏内容，其实可以是链接</p>
   </aside>
</article>

 <aside>
      <h1>标题</h1>
      <ul>
         <li>序列1</li>
         <li>序列2</li>
      </ul>
   </aside>

 

nav元素

    

　　<nav> 标签定义导航链接的部分。

      nav元素是一段链接到其他页面或网站的链接。无须将所有的页面链接列表都囊括在nav当中。该元素仅对应也面的主要导航。

      nav元素最好用于主导航，也是大部分用户唯一关心的导航。不过，主导航的内容始终是网站以及开发者决定的。一些网站主导航只有一个，其他作为内容链接存在。有的网站主导航则是有3~4个主导航。

      在基本主导航之外还可以用到nav元素的地方包括一下：

     1，内容表格

     2，上一页和下一页链接

     3，面包屑导航

<nav>
   <h1>标题</h1>
   <ul id='nav'>
       <li>序列1</li>
       <li>序列2</li>
       <li>序列3</li>
    </ul>
</nav>

 

section元素

  <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

  根据‘w3c’的定义，‘section’不仅仅是一个普通的容器元素。当一个元素只是为了样式化或者方便脚本使用时，，应该使用div元素。

 下面是帮助开发人员确定是否使用section元素的一些依据。

1，该分解是否有自己的标题？如果没有就不应该使用section元素。

2，该分节是否为页面大纲中的一部分？如果不是就不应该使用section元素

3，进行这个分节除了样式化是否还有别的目的？如果将一个section标签用作样式化的钩子，就应该用div元素代替。

可以在博客的aside中放入section元素。大部分博客都带有友情链接，最新博文，目录之类的aside,上面每一项都可加入section.

<section>
  <h1>标题</h1>
  <ul>
     <li>序列1</li>
      <li>序列2</li>
     <li>序列3</li>
  </ul>
</section>

header,footer元素

<header>元素描述了文档的头部区域

<header>元素注意用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

<footer> 元素描述了文档的底部区域.

<footer> 元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个 <footer>元素.

另外，header元素可以包含一个分节标题和关于这个分节的介绍信息，例如，内容表格，日期和相关图标。尽管大部分情况下header出现在文档的开头，但也可以出现在任意分节元素的开端，如：article,aside,nav.

footer元素和header元素类似，它可以出现在任意分节元素的结尾，提供相关的信息，例如：作者，版权信息，和相关链接。

 

ps:此内容大部分来自《html5移动应用开发》