网页设计：HTML标签语义化

标签语义化：

为了使我们的网站更好的被搜索引擎抓取收录，更自然的取得更高的流量，网站标签的语义化就显得尤为重要。所谓标签语义化，就是指标签的含义。

语义化的优点：

• 使页面没有css的情况下，也能够呈现出很好的内容结构；
• 有利于SEO，爬虫依赖标签来确定关键字的权重，因而可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息；
• 提升客户体验；
• 便于团队开发和维护，语义化使得代码更具备可读性；
• 方便其余设施解析，以有意义的方式来渲染网页；

常用的语义标签：

<h1>~<h6>标签：

定义页面的标题；

<h1>标题</h1>

<header>标签:

用于定义页面的详情展现区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组详情性或者导航性内容进行标记。

<header>    <h1>标题</h1>    <nav>          <ul>        <li></li>        <li></li>        <li></li>    </ul>    </nav></header>

<nav>元素

定义页面的导航链接部分区域，用于定义页面的主要导航部分;

<nav>    <ul>        <li></li>        <li></li>        <li></li>    </ul></nav>

<main>元素

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

<main>    <h1>标题</h1>    <p>内容</p>    <p>内容</p></main>

<article>元素

定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或者网页文章。article可以嵌套article，只需里面的article与外面的是部分与整体的关系。

<article>    <header>        <h3>            <a href=""></a>        </h3>    </header>    <section>        <p></p>    </section>    <footer>        <small>            <time datetime=""></time>             <a href=""></a>        </small>    </footer></article>

<section>元素

元素用于标记文档的各个部分，例如长表单文章的章节或者主要部分。

<section>    <h2></h3>    <p></p></section>

<aside>元素

定义与主要内容相关的内容块。通常显示为侧边栏。

<aside>     <h1></h1>     <p></p></aside>

<footer>元素

定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联络信息等

<footer>      底部内容</footer>

<small>元素

为较不重要的内容定义小字体。假如被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。

<p></p><small>    <time datetime=""></time>   <a href=""></a></small>

<strong>元素

把文本定义为语气更强的强调的内容，以表示内容的重要性。

<strong>内容</strong>

<em>元素

标记内容着重点（大量用于提升段落文本语义），通常呈现为斜体文字。

<em>内容</em>

<blockquote>元素

定义块引用，浏览器会在 blockquote 元素前后增加换行，并添加外边距。cite属性可用来规定引用的来源

<blockquote cite="">内容</blockquote>

<abbr>元素

解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。

<abbr title="">内容</abbr>