新的HTML5语义元素

先看一个传统的HTML4的文档：

 <div class="header">

     <h1>My Site Name</h1>

     <h2>My Site Slogan</h2>

     <div class="nav">

         <ul><!-- Main Site Nav here --></ul>

     </div>

 </div>

 <div class="sidebar">

     <h3>Links Heading</h3>

     <ul><!-- Sidebar links --></ul>

 </div>

 <div class="main">

     <h4>Blog Post Title</h4>

     <div class="meta">

         Published by Joe on 01 May 2011 @ 12:30pm

     </div>

     <div class="post">

         <!-- Actual blog post -->

     </div>

 </div>

 <div class="footer">

     <ul><!-- Footer links --></ul>

     <!-- Copyright info -->

 </div>

=======分割线=======

以上这段代码能很好的运行，但是有两个问题：

1) 使用旧的标准，就必须使用自定义命名的class来区分不同的区域。这是没有问题的，但是命名的方式是由作者决定的。比如有人用head来表示头部，有人喜欢用heading，再或者有人用main来表示主体，但有人喜欢用body或者article。

2) 有些人喜欢用id而不是class来命名区块。

总的来说，就是传统的做法是对搜索引擎或者其它第三方软件不友好的，没有一个固定的，值得信赖的做法来区分每个区域。这就是为什么我们要使用新的语义元素。就像下面这样：

 <header>

     <hgroup>

         <h1>My Site Name</h1>

         <h2>My Site Slogan</h2>

     </hgroup>

     <nav>

         <ul><!-- Main Site Nav Here --></ul>

     </nav>

 </header>

 <nav>

     <h1>Links Heading</h1>

     <ul><!-- Sidebar links --></ul>

 </nav>

 <section>

     <article>

         <header>

             <h1>Blog Post Title</h1>

             <div class="meta">

                 Published by Joe on

                 <time datetime="2012-05-01T12:30+00:00">

                     01 May 2012 @ 12:30pm

                 </time>

             </div>

         </header>

         <section>

             <!-- Actual blog post -->

         </section>

     </article>

 </section>

 <footer>

     <ul><!-- Footer Links --></ul>

     <!-- Copyright info -->

 </footer>

=======分割线=======

1) <header> - 用于title和其它重要的细节（博客文章标题、永久链接、描述信息等）

2) <hgroup> - 标题的集合（<h1>到<h6>）

3) <nav> - 用于存放每个节点的链接。注意是重要节点的链接，例如主页链接或者表格目录等。

4) <section> - 用于定义一组内容，例如一个重要的表单或者一个主要的Wiki段落。Section能够拥有自己的header，navigation和footer。

5) <article> - 标记一个可以被重新发布的控件。例如RSS的内容、博客文章、评论等。Article也可以拥有自己的header，navigation和footer。

6) <time datetime="2012-05-01T12:30+00:00"> - 如果datetime属性被定义，则<time>的内容可以为任何值，但是如果没有定义datetime属性，则<time>内容必须是一个合法的日期或时间值。

另外还有两个重要的元素是<aside>和<mark>。<aside>用于定义一个与主要内容无关的区域，例如一个广告或者浮动的窗体。<mark>用于定义一个应该被标注或者高亮的区域，例如符合搜索条件的内容。

通过新的语义元素，不仅仅页面显得更简单，同时搜索引擎和人工辅助技术也会更容易理解页面。

巴特西

新的HTML5语义元素

最新文章

热门文章