实践笔记之HTML语义化的案例分析| 青训营

45 阅读2分钟

引言

语义化标签

之前的课程提到了HTML5语义化标签,常见的有以下:

<article></article>
<section></section>
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>

以上也是与内容划分有关的结构元素。

语义化

我们也了解到语义化相关的概念:

  • HTML中的元素、属性及属性值都拥有某些含义
  • 开发者应该遵循语义来编写HTML。
    • 如:有序列表用ol;无序列表用ul。
    • 如:lang属性表示内容所使用的语言。

我们也学到了遵循语义化,利于开发者修改、维护页面,利于浏览器展示页面,利于搜索引擎提取关键字、排序,利于屏幕阅读器给盲人读页面内容等等。

实例分析

接下来我们将根据具体网站案例进行实例分析。

语义化标签

就掘金的沸点分页面而言,可以看到头部的导航栏整体是被一个<header></header>标签包裹的,然后具体内容被包裹在<main></main>标签中。

屏幕截图 2023-08-28 204052.png

屏幕截图 2023-08-28 204341.png

然后导航栏除logo以外的其他部分都被包裹在了<nav></nav>标签里。同样的具体内容部分又细分了navmain部分。如此一来,结构非常清晰,设计的思路过程都有迹可循。

屏幕截图 2023-08-28 204445.png

屏幕截图 2023-08-28 204707.png

而某些未使用语义化标签的网站,则大量使用<div>,造成了结构比较混乱,可读性下降的结果,所以正如引言所说的,遵循语义化,使用语义化标签写页面可读性更强,结构和作用更清晰,利于开发者修改、维护页面,利于浏览器展示页面等等。

SEO

而且从已有的资料可以了解到标签语义化会对爬虫的爬取以及索引器处理起作用,利于搜索引擎提取关键字、排序。
所以,从这个角度来说使用语义化标签对SEO优化有一定作用。

总结

<div>和语义化标签都很重要,我们要视情况运用和优化。我们要学习与正确使用语义化标签,合理运用以提高自己网页的质量。