实践笔记:HTML语义化 | 青训营

157 阅读1分钟

什么是HTML标签语义化?

通俗的说,用标签的含义来命名标签

语义化的目的:使用恰当的HTML标签来增强网页内容的结构和含义,使得页面内容对于解析器和人来说都更加容易理解。它不仅仅可以提高网站的可读性和可访问性,还有助于优化搜索引擎排名。

下面通过具体案例来解释:

我选取了中文古诗网作为案例

屏幕截图 2023-08-09 175453.png

屏幕截图 2023-08-09 175606.png

这是原本网页的内容与html内容,可以看到,标题“登鹳雀楼”处于标签<h1>中,有一些样式与超链接,进行具体内容跳转,整个网页结构合理,符合人们的阅读习惯,同时对开发人员友好,易于找出相关内容。

屏幕截图 2023-08-09 181128.png

屏幕截图 2023-08-09 181235.png 利用F12打开开发者工具,删掉一些标签,样式后如上,可以观察到,排版结构的美观受到了影响,网页效果展示并不理想。

如何使用HTML语义化?

html语义化其实就在我们日常开发中,很多标签例如<main><header><title><body><h1>都属于语义化标签的范围,这些标签能够帮助我们构建清晰的内容层次结构,符合人们阅读习惯的网站,设计CSS、JS时的思路方法都有着重要的意义。

在开发中要遵循:先确定语义的HTML,再选合适的CSS。

在学习html标签时,就要根据语义去记忆,在编写html时根据语义去使用。HTML网页中任何元素的实现都要依靠HTML标签。