HTML5的新语义化的标签-优快云博客

本文介绍了HTML5中新增的语义化标签，如<header>、<nav>、<article>等，并详细阐述了这些标签如何改善网页结构，提高可访问性和SEO效果。通过示例说明了每个标签的具体用法。

在HTML5之前采用HTML+CSS文档结构写法

上图展示典型的两列布局标记使用div的id和class类属型.它包含一个页眉，页脚，横向的导航栏.主要内容包含一篇文章和右边的侧边栏

缺点 1.不利于SEO搜索引擎对页面内容的抓取

2.文档结构定义不明确

于是HTML5出现，解决上述问题，专门添加页眉、页脚、导航、文章内容等跟结构相关的结构元素标签

div元素被替换成新的元素：header 页眉, nav 导航, section 区块, article 文章, aside 侧边栏 , footer 页脚.

优点：1 提升可访问性；

2 SEO；

3 结构清晰，利于维护；

HTML5结构代码

 1 <body>
 2   <header>...</header>
 3   <nav>...</nav>
 4   <article>
 5      <section>
 6        ...
 7     </section>
 8   </article>
 9   <aside>...</aside>
10   <footer>...</footer>
11 </body>

对HTML5语义化标签解释

<main> 定义主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<header> 页眉，可能包含标题元素，也可以包含其他元素，像logo、分节头部、搜索表单等

1 <header>
2  <hgroup>
3     <h1>页眉主标题</h1>
4     <h1>页眉副标题</h1>
5  </hgroup>
6 </header>

<nav> 定义主体模块或者导航链接的集合

1 <nav>
2   <ul>
3     <li><a href="#">Home</a></li>
4     <li><a href="#">About</a></li>
5     <li><a href="#">Contact</a></li>
6   </ul>
7 </nav>

<article>是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

 1 <article>
 2    <header>
 3        <hgroup>
 4              <h1>这是一篇介绍HTML 5结构标签的文章</h1>
 5              <h2>HTML 5的革新</h2>
 6       </hgroup>
 7       <time datetime="2011-03-20">2011.03.20</time>
 8    </header>
 9    <p>文章内容详情</p>
10 </article>

<aside>与一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者嵌入内容。

 1 <aside id="sidebar">
 2     <section class="widget">
 3         <h4 class="widgettitle">Sidebar</h4>
 4         <ul>
 5           <li><a href="#">WordPress</a> (3)</li>
 6           <li><a href="#">Design</a> (23)</li>
 7           <li><a href="#">Design </a>(18)</li>
 8         </ul>
 9     </section>
10 </aside>

<section>表示文档中的一个区域（或节），比如，内容中的一个专题组，一般来说会有包含一个标题（heading）。

一般通过是否包含一个标题 (<h1>-<h6> element) 作为子节点来辨识每一个<section>

1 <section>
2   <h1>这里是section标题...</h1>
3   <p>这里是section标题对应内容...</p>
4 </section>

<figure> 元素代表一段独立的内容.用于对元素进行组合。多用于图片与图片描述组合。

 1 <!-- Just a figure -->
 2 <figure>
 3   <img src="figure.png" alt="figure.png图片按" title="figure图片">
 4 </figure>
 5 <p>段落</p>
 6  
 7 <!-- Figure with figcaption -->
 8 <figure>
 9    <img src="figure.png" alt="figure.png图片按" title="figure图片">picture">   
10    <figcaption>figure图片描述</figcaption>
11 </figure>
12 <p>段落.....</p>

<footer> 定义了整个页面或其中一部分的页脚（并且通常包含原创作者，版权信息，联系方式和站点地图,文档相关的链接等信息）

1 <footer>
2   原创作者;版权信息;联系方式;文档相关链接等...
3 </footer>

<hgroup> 标签用于对网页或区段（section）的标题进行组合。使用新的HTML5元素hgroup，可以为header元素添加更多的信息。（头部主标题/副标题）

1 <hgroup>
2   <h1>Main title</h1>
3   <h2>Secondary title</h2>
4 </hgroup>

转载于:https://www.cnblogs.com/miaoxiaojiao/p/7921915.html