Vue 3移动Web开发与性能调优实战
上QQ阅读APP看书,第一时间看更新

2.7 语义化标签总结

前面几个小节介绍了HTML 5引入的一些新的语义化标签,其中包括用来呈现页面头部的<header>标签和页面尾部的<footer>标签、作为独立模块显示的<section>标签、页面导航<nav>标签和侧边栏<aside>标签,这几个标签在页面中的具体用法如图2-4所示。

图2-4 语义化标签总结

HTML 5之所以引入这些新的语义化标签,主要是为了让HTML代码更加规范和语义化。每当我们开始编写一个前端页面时,首先在心里应该有一个思路:如何将页面进行功能划分,划分之后如何按照每个模块的展示内容来选择合适的HTML 5语义化标签。

当然,有些程序员在网页呈现任何内容都统一使用<div>标签,我们称这种现象为“标签选择困难症”,虽然以这种方式使用标签并不会影响网页代码的运行,但是当其他程序员来阅读这些代码时,就会感到很乱。

HTML 5语义化标签的意义不仅在于更方便开发人员阅读代码文件和理清代码结构,而且对浏览器而言,能够更清晰地识别网页的结构。同时良好语义化代码的网站对于搜索引擎优化(Search Engine Optimization,SEO)功能更加友好,能够让搜索引擎清晰地捕捉到网页的主、次模块和内容,所以建议程序员尽可能使用语义化标签来构建HTML页面。

当然,上述所讲解的标签并不是所有的HTML 5新引入的标签,而是与语义化概念关系比较紧密的一些标签。