码迷,mamicode.com
首页 > Web开发 > 详细

如何理解HTML语义化的?

时间:2020-07-05 00:46:26      阅读:72      评论:0      收藏:0      [点我收藏+]

标签:冗余   搜索   历史   代码   html   网站   技术   并且   需要   

什么是语义化

其实说到语义化的问题,显而易见是有段不那么语义化的历史的。
最早的时候,前端并不是一个细分的岗位。通常由PHP后端来写HTML,但是他们并不会CSS,于是就用table来进行布局。但我们都知道,table其实是用来展示表格的,这一条就与语义化严重相悖。
后来前端慢慢分离成一个单独的岗位,他们会使用DIV+CSS布局,并且主要利用float和绝对定位进行布局,相比较使用table来布局,稍微符合了语义化。
前端发展到现在,对于整个页面各部分内容,都已经有相对应的标签去展示,比如会用h1展示标题,ul,ol等去展示列表,还有诸如p、ul、section、footer、nav等等标签。

所以语义化,其实就是用恰当的标签,去展示恰当的内容,而非table、div一把梭的方式。

为什么要尽量语义化

通过使用恰当语义的标签,可以让页面具有良好的结构和含义,因此好处也是显而易见的:

  1. 更省代码:更少的HTML代码。如果技术的革新不是为了省代码,那将毫无意义;
  2. 更清晰的DOM结构:你不再需要些一堆冗余且意义不明的标签,有利于书写css和js;
  3. 更有利于SEO:可以提高搜索引擎的有效爬取,提高网站的流量;
  4. 可读性:如果不幸网站的样式丢失,清晰的结构依然使你的页面可读性较高;
  5. 互用性:没人喜欢维护一坨烂代码,语义化的HTML代码,让你的团队维护更轻松。

如何理解HTML语义化的?

标签:冗余   搜索   历史   代码   html   网站   技术   并且   需要   

原文地址:https://www.cnblogs.com/qinglaoshi/p/13237156.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!