语义化新感悟

语义化

语义化,指对文本内容的结构化(内容语义化),选择合乎语义的标签(代码语义化),便于开发者阅读,维护和写出更优雅的代码的同时,让浏览器的爬虫和辅助技术更好的解析。

1、语义化的作用

通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.
语义化的(X)HTML文档有助于提升你的网站对访客的易用性,比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说,则有助于它们建立索引,并可能给予一个较高的权值。
事实上SEO最有效的一种办法,就是对网页的HTML结构进行重构,实质上就是语义化。

2、为什么要关注语义化

  • 可访问性:帮助辅助技术更好的阅读和转译你的网页,比如各种网页阅读软件;
  • 可检索性:有了良好的结构和语义,可以提高搜索引擎的有效爬取,提高网站流量;
  • 国际化:全球只有13%的人口是英语母语使用者,因此通用的语义化标签可以让各国开发者更容易弄懂你网页的结构;
  • 互用性:减少网页间的差异性,帮助其他开发者了解你网页的结构,方便后期开发和维护;

3、常用语义化的标签

  • h1~h6:标题标签有加粗放大功能,但若只是为了突出效果的话请使用“CSS font-weight font-size”
  • i:表示一段普通文本中,因为某种原因和正常文本不同,例如专业术语、外语短语或排版用的文字,其通常表现为斜体,他的出现不会改变语义;
  • b表示样式上的粗体;其包含文本,不具备强调重要性的作用,也不影响语态和语气,仅仅是从样式上让包含文本特殊化;
    常用语关键字,文本驱动软件中的可执行语句或者一篇文章的导语,说明书中的产品/功能名称等;
  • strong表示强调带有着重意味,意在传达内容的重要性(需要尽快被看到)、严重性或者紧急性,;

4、H5语义化标签

在HTML5出来之前,我们习惯于用div来表示页面的章节或者不同模块,但是div`本身是没有语义的。但是现在,HTML5中加入了一些语义化标签,来更清晰的表达文档结构。

使用H5语义化布局的页面

5、感悟

学习了语义化的内容后,解决了我以前一直不了解的问题,我以前一直不能明白为什么一个加粗功能有两个标签“b”“strong”,而且在菜鸟教程查找时得到的答案是语气的不同,我就不能理解在网页上咋能看到语气不同,他又没有加音标。学习了之后才知道原来和语音软件和搜素引擎有关。

猜你喜欢

转载自blog.csdn.net/weixin_48549175/article/details/109534068