网页设计:HTML标签语义化

·  阅读 365

标签语义化:

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

语义化的优点:

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

常用的语义标签:

<h1>~<h6>标签

定义页面的标题;

<h1>一级标题</h1>
<h2>二级标题</h2>
 ......
<h6>六级标题</h6>
复制代码

<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>元素

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

<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> 
复制代码
分类:
前端
标签: