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移动应用开发》