HTML语义化的案例分析 | 豆包MarsCode AI刷题

Hiraeth
139 阅读6分钟

HTML语义化介绍

在百度百科中，语义的概念是语言所蕴含的意义。放在计算机科学这一具体领域，可以把它理解成抽象的计算机符号如何来更直观地表示现实世界事物的概念和含义。具体来看HTML标签，存在无语义元素和语义元素两种：

  • 无语义元素：

    • <div>：流式内容的通用容器
    • <span>：通用的行级容器

  • 语义元素：

    • <h1>-<h6>：呈现六个不同级别的标题
    • <input>：用于创建各种类型的交互性表单
    • <ol>：表示有序列表
    • <ul>：表示无序列表
    • <img> <table> <button> ......
    • HTML5新增的语义化标签

从以上列举可知，HTML标签中绝大多数的标签都是语义化的。字节青训营在前端与HTML的课程中提到，HTML传递的是内容而不是样式。虽然可以用CSS来调节<div>或<span>的样式达成一些语义标签的样式效果，但可读性会明显下降，并没有对要展示的数据有任何的解释或描述。

举个例子：

<h2>Example</h2>
<div>Example</div>

<style>
  div {
  font-size: 1.5em;
  font-weight: bold;
}
</style>

image-20241103214321246

用<div>模拟<h2>，样式看起来没有区别，但失去了h2本身自带的标题含义。

除此之外，语义化标签的优点还包括：

  • 可读性提升：不仅对普通读者或开发者提供了清晰的结构，还帮助屏幕阅读器更好理解网页内容，改善残障人士的体验，这也是提升网页无障碍的重要一步。
  • 搜索引擎优化（SEO）：搜索引擎利用页面的语义结构来理解内容的主题和上下文，使用语义化标签可以帮助搜索引擎更好地抓取和索引页面，网站搜索排名与此密切相关。
  • 可维护性增强：一些语义化标签（如 <article>、<aside>、<section> 等）不仅传达了内容的意义，还清晰展示了网页的具体布局，开发者能够更快理解，更好上手维护和更新。

HTML5新增语义化标签

HTML5新增的语义化标签更多指示了页面不同部分的结构。例如，<header> 通常包含页面的标题和<nav>导航信息，而 <article> 则表示独立的内容块。这样可以让开发者在编写代码时自然地将相关内容分组。

image-20241103105730061

以下是一些常见的H5新语义元素：

  • <header>：页眉

  • <footer>：页脚

  • <main>：文档的主内容

  • <section>：文档的一个区域。W3C 的 HTML 文献定义为有主题的内容组，通常具有标题

  • <article>：独立的内容文档

  • <nav>：导航链接集合

  • <aside>：页面主内容之外的某些内容（比如侧边栏）

  • <time>：定义日期/时间。该元素可包含 datetime 属性，用于将日期转换为机器可读格式。

除此之外还有如<details> <figcaption>......标签，更多具体的内容介绍可以查看W3C文档

HTML语义化案例分析

以掘金首页的HTML为例

image-20241104192420725

页面用<header> <nav> <main>总体先化分为三个部分，而每个部分里面又同样用了<header> <nav> <aside>等再进行区域细分。

对于同样的<header> <nav> 等标签，通过不同类名来表示它在不同板块中所起到的不同作用，例如，在该页面中有主导航、次导航、子页面导航等结构，将 <nav> 元素和不同类名结合，能更好地看出页面的层次结构。

以下是对各个区域的详细作用分析：

  • header.main-header 作为整个网站的主标题头部，包含了掘金的logo、导航菜单、用户中心入口等关键内容，不仅在首页有这一部分，在文章等页面也有该通用头部
    • nav.main-nav：主要的导航链接，帮助用户不同的内容板块或栏目间切换。
  • nav.view-nav.index-nav-before 次导航区域，用于给主页展示的不同文章或帖子进行分类，针对的是该页面本身内容，这一部分让用户能够快速进行过滤和筛选。
  • main.main-container 主内容区域，是网页的核心内容板块，承载大部分信息。
    • header.list-header 内容列表的标题区域，用于指示当前显示的列表排序方式。
    • aside.index-aside.aside 侧边栏区域，通常用来显示补充信息或推荐内容，这里包括了文章，作者，推荐话题等。在用户的主要浏览对象之外，增加用户的参与度。

我看到的语义化可能做得不太好的网页是澎湃新闻的主页（没有拉踩QAQ我是前端新人，有说的不对的地方希望大佬们指正QAQ）

放一下原主页和标记了HTML结构的主页（因为画图叠的色块层数有点多，原来内容不是很清晰）

image-20241104201748243

image-20241104201805988

直观上可以看出来几个问题：

  • 标签使用不够语义化

    各个板块的结构基本上都用了通用的div元素来搭建，如 div.container、div.index-leftside等，没有表达出元素的具体作用。

    • 例如，div.index-content_Uhtm 部分是一些热榜和推荐内容，可以使用 <aside> 标签来明确这是辅助信息区域。
    • ul.index_ulcontext_K_L_pV 使用了 ul 标签，只表现出来这是一个列表。但实际上其内容还具有导航的特殊性质，使用 <nav> 会更合适。

  • 类名的描述性较差

    首先有两个较大的区块只用了div，甚至没有进行类的命名，增加了代码的理解难度。而已有的类名对功能的描述也并不直观。

    • 例如， index_leftside从命名上看是首页左侧部分的含义，但实际上它只位于内容部分的左侧，而这也体现不出实际的内容用途，可以使用类似news-content或者news-list-container这样的类名。

  • main标签使用不清晰

    main 标签用于页面的核心内容，而这里的整个页面被一个 main 包裹，显然很难定义真正的核心内容。

    • 可以把原本是div.container的标签换为<main>标签表示主体内容，把div.index_nav_cbLaK标签改为<header>，来表示整个网站的头部，这样更能明确不同内容板块的作用和层级。

通过案例的对比，我们能看出HTML 语义化的重要性。前端工程化中，代码的可读性和可维护性是关键要求，因此对于开发者而言，采用语义化标签、清晰的类名和层次结构，是实现高质量、可维护性强的前端项目不可或缺的基础。

avatar
文章
阅读
粉丝