在我们学习HTML的过程当中的时候,很多人不以为然,认为学习HTML很简单,小菜一碟,其实说实话,学好HTML其实看似简单,其实里面蕴含的内容是非常多的,譬如说语义化这一点就值得我们好好深入学习!
语义化不仅仅值得我们深入学习,也是我们成为一个优秀前端工程师必要的一环,深刻理解语义化和应用才能够不断的提升前端开发的能力!
此时,屏幕面前的你可能会笑着说:"嗨!这还不简单,HTML我已经非常熟悉了,每天写,这不是初级工程师蔡学的吗?这我还能不会吗?" 其实在你有可能提出这样的感叹前,你也许应该好好反思一下自己,看似简单的背后,是否有将HTML运用得很好,又是否能够深入理解HTML,做到温故而知新!
上文提到的,语义化就离不开语义化标签,因为HTML最常见的就是标签了,这是一篇讲语义类标签的Blog!
语义类标签是什么?有什么好处?
其实在上一篇文章中,稍微讲到了所谓的语义化,但是可能还不够详细,于是有了这篇文章,其实所谓的语义化标签是我们工作中常常用到的一类标签,虽然说表现上是互相差不多的,但是实际上主要的区别体现在不同的语义,譬如大家见到的section,article,nav都是语义类标签!
尽管如此,我还要介绍一下HTML5中所带来的标签上的变化: https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list 可以通过该链接查看,其中带有对应的HTML5标识符的表示HTML5中新增的标签!
如果说你点击了该链接,看到了对应的新增标签,你有什么收获或者说有什么思考?
新增的标签,大多数都是都是纯文字类的补充,在章节这一部分的内容,就可以明确看到:
| Element | Description |
|---|---|
| <section> | HTML文档中的一个章节 |
| <nav> | 只包含导航链接的章节 |
| <article> | 独立于内容其余部分的完整独立内容块。 |
| <header> | 定义页面或章节头部 |
| <footer> | 定义页面或章节尾部 |
| <aside> | 和内容页面关联度较低的内容 |
| <main> | 定义文档中主要或重要内容 |
是不是突然明朗了很多,通过以上的表格中可以看到,具体的标签代表具体的意思!标签承载我们要表达的内容!
其实在以前很多工程师在写代码的时候,更多的是使用div或者span走天下,多数都不用复杂的语义标签!
那么值得我们思考的问题来了,这种做法是否可行呢?到底好不好呢?
我的答案是:这种做法可行,但是并不好! HTML多用于描述'软件界面'多过于'富文本',对应的软件界面中的东西,实际上几乎是没有语义的,很多时候一些功能,并没有界定用什么标签/语义化标签来做! 此时的你可能会反驳,你不是说不好吗,既然没有界定用语义化标签来做, 那么为什么还说不好! 虽然说没有界定用什么标签来做,但是,在很多工作场景中,语义类标签也有他们自己无可替代的优点,正确的使用语义标签可以带来很多好处!
- 语义类标签对开发者更加友好,使用语义类标签可以增强可读性,即便是没有CSS的时候,我们可以通过标签清晰地看出对应的网页结构,可以提升团队的开发效率和维护!
- 除了对人类友好之外,语义类标签十分适宜机器阅读,文字表现力更加的丰富,与此同时更加适合搜索引擎检索(SEO),可以让搜索引擎爬虫有效地获取到更多的有效信息,提升网页的搜索量,并且语义类标签可以支持读屏软件,可以更具文章自动生成目录等!
但是,如果说使用不恰当的话,会造成反面作用,会使得表意不明!错误的使用标签,会给及其造成阅读混淆,增加嵌套的话,会使得我们编写CSS增加很多负担!
因此我们对待语义化标签应该保持一种中立的态度:"用对"比"不用"要好,"不用"比"用错"好,我们应该去追求"用好"它!
语义类标签应用场景
- 作为自然语言和纯文本的补充,用来表达一定的结构或者歧义的消除
很多时候不同语境中的意思不同,我们用纯文本是无法表达的,但是HTML作为超文本标记语言的语义化可以很好地帮助我们理解和表示!
我们使用em标签做示范:
今天我吃了一个香蕉!
这段话其实这样意思很明确,但是如果说放到不同的上下文语境当中的话,意思是完全不同的!
昨天我吃了一个香蕉
今天我吃了一个梨子
再比如:
昨天我吃了两把香蕉
今天我吃了半个梨子
其中通过看文中的内容,通过不同的读音,也能够发现表示的不同的意思! 但是没有对应的上下文的时候,我们应该如何消除同一句话在不同地方的歧义呢?
在HTML中的em标签表示重音:
今天我吃了<em>一个</em>苹果
今天我吃了一个<em>苹果</em>
这样一来我们就能够很好的明白文中所要表达的意思!
- 作为标题摘要的语义类标签
文章的结构也是作为语义重要的使用场景,HTML也应该支持这样的场景,对应的语义标签中也有不少是用于支持这样结构的标签!
一篇文档会有一个属性的目录结构,由各个级别的标题组成,树形结构可能不会跟HTML元素的嵌套关系一致!
h1~h6是最基本的标题部分,表示了文章中不同层级的标题,有些时候为了避免副标题产生额外的层级,我们使用hgroup!
有/无 hgroup中的h1~h6被视为统一标题的不同组成部分!
但是如果说使用到了HTML5中的section,会改变h1h6的语义,section的嵌套会导致h1h6下降一级,我们只需要section和h1就足以形成文档的树形结构:
<section>
<h1>HTML 语义</h1>
<p>blaah lalah balah</p>
<section>
<h1>若语义</h1>
<p>blaah lalah balah</p>
</section>
<section>
<h1>结构性元素</h1>
<p>balah balah</p>
</section>
</section>
- HTML 语义
- 弱语义
- 结构性元素
- 作为整体性结构的语义类标签
随着越来越多的浏览器退出阅读模式,以及各种非浏览器终端的出现,语义化的HTML适合机器阅读的特性变得越来越重要!
应用语义化标签的界面,可以很清楚的提示出页面的结构信息,以及对应的主次关系,让浏览器很好地支持"阅读视图功能!" 让浏览器的命中率提升的同时,也对视障用户的读屏软件更加的友好!
<body>
<header>
<nav></nav>
</header>
<aside>
<nav></nav>
</aside>
<section></section>
<section></section>
<section></section>
<footer>
<address></address>
</footer>
</body>
其实这样一来就很快就能够理解HTML的层次关系,通过语义化标签能够帮助我们更好的理解项目布局结构!
总结
其实以上我们介绍而基本原则和HTML稳当的整体结构,并且整体上了解了HTML语义!
我们应该分开一些场景来看语义,在适合的场景下可以获得更好的效果,其中介绍到的场景如下:
- 自然语言表达能力的补充
- 文章标题摘要
- 适合机器阅读的整体结构
如果你有什么好的建议或者想法请在评论区告诉我!
网友评论