Web语义化

浅浅的花香味﹌ 2022-05-10 20:53 151阅读 0赞

# 什么是Web语义化？ #

如今互联网已经到了web3.0时代了，HTML语言在不断的进化并发挥着越来越重要的地位；而我们制作的网页也从当初的table表格嵌套发展到了div+css，这是进步的标志。然而我们似乎看到了一个不太好的想象：整个网页大量的使用div标签进行分隔页面内容，有的甚至整个页面只有div一种html标签存在，这种div滥用现象使得网页制作似乎就只剩下了div。时代是进化着的，所以，诞生了web语义化这个概念。包括两个方面：**html语义化及css命名语义化**。

web语义化可以简单的理解为：**用便于理解的特定语言来定义特定的事物**。

# 为什么要web语义化？ #

首先，人可以通过视觉的划分判断内容的语义，搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能的对搜索引擎友好，所以就要尽可能地使标签语义化。

以前以我对web开发的粗浅理解，觉得写一个好的符合标准的页面只需要把结构和表现分离，然后不要使用table，p等标签就行了，至于通篇都是div我也不会觉得有什么问题，因为css很强大。但是，所有的标签都是有自己的语义的，下面给出一部分标签的语义：

div语义：division（分隔）

span语义：span（范围）

ol语义：ordered list（有序列表）

ul语义：unordered list（无序列表）

li语义：list item（列表项）

…………

如果无视标签语义和默认样式，所有标签都用div，其实也是可以写出来视觉效果很好的页面，只要你灵活运用css。但是那样的话虽然视觉上达到了要求，但是整个页面一点语义都没有，搜索引擎还是看不懂，所以，要记住：

结构html才是重点，样式css是用来修饰结构的，所以，要先确定html，确定标签，再来选用合适的css。

其次，SEO的时候我们经常用h1来突出标题，用strong来突出关键字，这确实就是语义化的体现。就目前的搜索引擎来说并不能像访客那样很直观的去查看网页，它只有分析源码来体现或猜测网站要表达的内容。比如我们想表达某篇文章的标题，我们或许会这样写：

<div id="title">文章的标题</div>

访客或许能理解我们的意思，但搜索引擎就要反复揣摩了，更好的讨好搜索引擎我们可以这样来写：

注意：h1拥有最高的权值，在一个页面中最好只使用1个h1来突出你的内容，太多的h1会分散其整个页面的权重，对搜索引擎也是非常的不友好。

语义化优势：

正如上边的小例子，语义化的代码更小，下载也就更快了。另外语义化代码也能够更加快速的帮助新的前端工程师理解我们的代码。当然语义化代码也是我们能力的体现。

# 怎样进行语义化？ #

## 1、html语义化 ##

简而言之，就是在你看到内容的时候想想用什么标签能更好的的描述它，就用什么标签。很明显Hx系列看起来更像标题，因为拥有粗体和较大的字号，<strong>,<em>用来区别与其他文字，起到了强调的作用。至于列表<ul>、<ol>等和表格<table>很明细的告诉你他们是做什么的。如：

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，作为标题使用，并且依据重要性递减，<h1>是最高的等级。

<p>段落标记，知道了<p>作为段落，我们就不会再使用<br/>来换行了，而且不要<br/><br/>来区分段落与段落。<p>中的文字会自动换行，而且换行的效果优于<br>。段落与段落之间的空隙也可以利用css来控制，很容易而且清晰的区分出段落与段落。再利用行高（line-height）很容易的定义出行间距，再定义首字下沉等效果，那就更完美了。

## 2、css命名语义化 ##

一般而言，css类名的语义化声明方式应当考虑你的页面中某个相对元素的“用意”，像left-bar,red-text,small-title……这些都属于结构化定义的例子。

让我们看看下面的这个例子：

![70][]

而现在我们想把页面中的元素调换一下位置，如果你使用的事结构化方式（1），那么你就要把所有css类重新进行定义，因为他们的位置变了。在布局（3）中，我们看到元素都倒转了：right-bar现在成了“left-bar”，而left-content成了“right-content”，如果你使用语义化方式则避免了此类问题。

![70 1][]

换句话说，使用语义化方式的话，你在修改网站布局的时候可以仅仅修改相关css类的属性即可，而不用修改它们的类名了，如果网站的代码很庞大，这将节省大量的时间。

参考链接：

[http://blog.bingo929.com/css-coding-semantic-naming.html][http_blog.bingo929.com_css-coding-semantic-naming.html]  CSS代码命名惯例语义化的方法

[https://blog.csdn.net/yzy1840/article/details/4712166][https_blog.csdn.net_yzy1840_article_details_4712166] HTML语义化

[https://blog.csdn.net/li2274221/article/details/25188497][https_blog.csdn.net_li2274221_article_details_25188497] 关于web语义化

[70]: /images/20220511/3a31f26e53ab47f0a3fe49066af658cd.png
[70 1]: /images/20220511/9e938e4291d449d38268390ca9b1af88.png
[http_blog.bingo929.com_css-coding-semantic-naming.html]: http://blog.bingo929.com/css-coding-semantic-naming.html
[https_blog.csdn.net_yzy1840_article_details_4712166]: https://blog.csdn.net/yzy1840/article/details/4712166
[https_blog.csdn.net_li2274221_article_details_25188497]: https://blog.csdn.net/li2274221/article/details/25188497