井井客

搜索

浅谈HTML5如何做到语义化标签

列了一些html本身的语义化标签以及html5新增的语义化标签,整理的虽然浅显,但是对新手来讲还是很实用的一篇文章。

浅谈HTML5如何做到语义化标签

1、什么是语义化标签?

理解什么叫语义化标签,通俗点说就是让搜索引擎/浏览器明白每个标签的意义,了解标签里面的内容在页面中的角色。而如何做到html语义化则是要求我们要知道在什么时候使用什么标签比较合理。

比如文章页中的文章标签我们会用h1标签说明这是页面标题,而页面导航则可以使用html5新增语义化标签中nav标签。

html成长到html5,语义化标签也在进步,了解语义化标签势在必行。

2、为什么使用语义化标签?

就像第一点说的那样,使用语义化标签可以让浏览器与搜索引擎更明白你的页面!总结为下面的四点

  1. 更容易被搜索引擎收录。
  2. 更容易让屏幕阅读器读出网页内容。
  3. 能够更好的体现页面的主题。
  4. 兼容性更好,支持更多的网络设备。

3、html语义化标签

先来看看最初的html语义化标签有哪些?

(1)A标签:实现超链接
强调:title属性的作用,鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大,主要方便搜索引擎了解链接地址的内容(语义化更友好)

(2)P标签:文章段落放到P标签中

(3)h1-h6:文章标题,栏目标题用H1[权重最高]-H6

(4)strong和em:特别强调某几个文字
但两者在强调的语气上有区别:em表示强调,strong表示更强烈的强调。并且在浏览器中em默认用斜体表示,strong用粗体表示。

(5)q标签:短文本引用
注意要引用的文本不用加双引号,浏览器会对q标签自动添加双引号

(6)blockquote标签:长文本引用
注意浏览器对blockquote标签的解析是 缩进样式

(7)address标签:为网页加入地址信息

(8)ul标签:无序列表

(9)ol标签:有序列表

(10)caption标签:为表格添加标题

4、Html5语义化标签

(1)article标签:装载显示一个独立的文章内容。

例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等 artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。

例如,一个博客文章,可以用article显示,然后一 些评论可以以article的形式嵌入其中。

<article>
<h1>文章标题</h1>
这是一篇文章
   <article>评论1...</article>
    <article>评论2...</article>
</article>

(2)section 标签:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<section>
   <h1>章节一</h1>
    <p>详细内容...</p>
</section>
<section>
   <h1>章节二</h1>
    <p>详细内容...</p>
</section>

(3)aside 标签: 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。

(4)hgroup 标签:用于对网页或区段的标题元素(h1-h6)进行组合。

例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。

<hgroup>
    <h1>网站标题</h1>
    <h2>网站副标题</h2>
</hgroup>

(5)header 标签:定义文档的页面组合,通常是一些引导和导航信息。

<header>
    <hgroup>
        <h1>网站标题</h1>
        <h2>网站副标题</h2>
    </hgroup>
</header>

(6)footer 标签:定义 section 或 document 的页脚。

在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

<footer> © 2016 jingjingke.com </footer>

(7)nav 标签:导航链接放在nav标签里。

nav标签里应该放入一些当前页面的主要导航链接。

例如在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等),就可以使用nav标签,当然,这不是必须的。

<nav>
    <ul>
        <li>首页</li>
        <li>文章</li>
        <li>作品</li>
    </ul>
</nav>

(8)time 标签:定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码,搜索引擎也能够生成更智能的搜索结果

(9)mark 标签:定义带有记号的文本。请在需要突出显示文本时使用mark标签。

(10)figure标签:规定独立的流内容(图像、图表、照片、代码等等)。

figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

(11)figcaption 标签:定义 figure 元素的标题(caption)。

"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figure> <figcaption>美女图片</figcaption> 
<img src="http://jingjingke.com/res/img/ceshi.png" width="100" height="100" />
</figure>

原文链接:http://www.tuicool.com/articles/vuYjUfM
推荐链接:http://www.html5jscss.com/html5-semantics-section.html

文章TAG:html5

作者:井井客整理来源:互联网
本文标题:浅谈HTML5如何做到语义化标签
本文链接:/c/25111.html

上一篇:JS给定时间和ID的每天重复倒计时
下一篇:jquery中的事件方法分类整理

文章分类

相关阅读

随便看看