您的位置: 首页  >  文章  >  学习《重学前端》—— 03-HTML语义： div 和 span 不是够用了吗?

学习《重学前端》—— 03-HTML语义： div 和 span 不是够用了吗?

分类: 文章 • 2024-02-18 16:08:16

HTML： 典型的“入门容易，精通困难”的一部分知识。

语义类标签

语义类标签特点： 视觉标签上互相差不多，区别：表示了不同的语义，比如 section、nav、p 等标签。

多数语义由文字来承载的，语义类标签则是纯文本的补充，比如标题、自然段、章节、列表，这些内容都是纯文本无法表达的，需要依靠语义类标签代为表达。

一般情况下只靠 div 和 span 就完全足够。但是语义类标签有自己无可替代的优点

  • 对开发者友好，使用语义标签增强了可读性，脱离 CSS 也可清晰地看出网页结构，同时便于开发和维护。
  • 对人类友好，语义类标签适宜机器阅读、文字表现力丰富，适合搜索引擎检索（SEO）、让搜索引擎爬虫更好地获取更多有效信息，提升网页搜索量、支持读屏软件、根据文章自动生成目录…

但是错误使用语义标签，会给机器阅读造成混淆、增加嵌套，给 CSS 编写加重负担。

对语义标签，“用对”比“不用”好，“不用”比“用错”好，应该追求“用对”它们。

几种重要场景

1、表达一定的结构

作为自然语言和纯文本的补充，用来表达一定的结构或者消除歧义。

在日语中，有一个语法现象叫做：ルビ，它的读音是 ruby（著名的 ruby 语言就是据此命名的），它中文的意思大约类似于注音或者意思的注解

在中国， ruby 的形式被玩出了新花样：表情包
学习《重学前端》—— 03-HTML语义： div 和 span 不是够用了吗?
这个图片很形象的表达了语义

在 HTML5 中，就引入了 ruby 标签，它由 ruby、rt、rp 三个标签来实现。

这些情况存在的语义，其实原本就存在了，只是我们用纯文本无法表达， HTML 作为一种“超文本”语言，支持这些文字表达就是必要的了。

2、没有语义标签会产生歧义

例子：

1、今天我吃了一个苹果。

上边这句话在不同的上下文中重点强调的词语不同

1、昨天我吃了一个香蕉。
2、今天我吃了一个苹果。

// 强调的是苹果

1、昨天我吃了两个苹果。
2、今天我吃了一个苹果。

// 强调的是个数（一个）

下边使用语义标签来消除歧义

1、今天我吃了一个 <em> 苹果 </em>。
2、今天我吃了 <em> 一个 </em> 苹果。

延伸：em 和 strong

两者都是表达强调， 表示 HTML 页面上的强调。 表示句子中的强调。

3、作为标题摘要的语义类标签（文章结构）

例如：古代小说中的“章 - 回”的概念，西方戏剧“幕”的区分

HTML 语义标签中，有不少是用于支持这样的结构的标签。

语义化的 HTML 能够支持自动生成目录结构，HTML 标准中还专门规定了生成目录结构的算法。

一篇文档会有一个树形的目录结构，由各级的标题组成，这个树形结构可能不会和 HTML 元素的嵌套关系一致。例如：


<h1>HTML 语义</h1>
<p>bala bala bala bala</p>
<h2>弱语义</h2>
<p>bala bala bala bala</p>
<h2>结构性元素义</h2>
<p>bala bala bala bala</p>

上面这段 HTML 几乎是平铺的元素，但是它的标题结构是：

  • HTML 语义
    • 弱语义
    • 结构性元素
    • …

h1 - h6 是最基本的标题，分别表示了文章中不同层级的标题，但是有些场景需要有副标题，为了避免产生额外的层级，可以使用 hgroup 标签。

接下来是使用和不使用 hgroup 标签的对比

1、不用 hgroup 标签

<h1>JavaScript 对象</h1>
<h2> 我们需要模拟类吗？ </h2>
<p>bala bala bala</p>

表现形式

  • JavaScrpit 对象
    • 我们需要模拟类吗？
    • …

2、使用 hgroup 标签

<hgroup>
    <h1>JavaScript 对象</h1>
    <h2>我们需要模拟类吗？</h2>
</hgroup>
<p>bala bala bala</p>

表现形式

  • JavaScript 对象——我们需要模拟类吗？
    • …

hgroup 中的 h1 - h6 标签被视为同一标题的不同组成部分。

HTML5 中，开始有 section 标签，这个标签会改变 h1 - h6 标签 的语义。 section 的嵌套会使其中的 h1 - h6 下降一级，所以在 HTML5 中，我们只需要 section 和 h1 标签就可以形成树形结构

<section>
    <h1>HTML 语义</h1>
    <p>bala bala bala</p>
    <section>
        <h1>弱语义</h1>
        <p>bala bala bala</p>
    </section>
    <section>
        <h1>结构性元素</h1>
        <p>bala bala bala</p>
    </section>
</section>

表现标题结构

  • HTML 语义
    • 弱语义
    • 结构性元素
    • …

4、作为整体结构的语义类标签

应用了语义化结构的页面，可以明确地提示出页面信息的主次关系，能够让浏览器很好地支持“阅读视图功能”，还可以让搜索引擎的命中率提升，同时对视障用户的读屏软件更友好

<body>
    <header>
        <nav>
        </nav>
    </header>
    <aside>
        <nav>
        </nav>
    </aside>
    <section></section>
    <section></section>
    <section></section>
    <footer>
        <address></address>
    </footer>
</body>

除此之外，还有 article ,这个标签是一种特别的结构，表示具有一定独立性质的文章。一个典型的场景是多篇新闻展示在同一个新闻专题页面中，类似报纸的多文章结构，适合用 article 来组织。

<body>
    <header>...</header>
    <article>
        <header>...</header>
        <section>...</section>
        <section>...</section>
        <footer></footer>
    </article>
    <article>
        <header>...</header>
        <section>...</section>
        <section>...</section>
        <footer></footer>
    </article>
    <article>
        <header>...</header>
        <section>...</section>
        <section>...</section>
        <footer></footer>
    </article>
    <footer>
        <address></address>
    </footer>
</body>

这是一个典型的多文章结构

其他一些新的标签

  • header: 通常出现在前部，表示导航或者介绍性内容。
  • footer: 通常出现在尾部，包含一些作者信息、相关连接、版权信息等。
  • aside: 表示和文章主题不太相关的部分，可能包含导航、广告等工具性内容。
    • aside: 容易被理解为侧边栏，实际上二者是包含关系，侧边栏是 aside , aside 不一定是侧边栏。

header 和 aside 都可能出现导航（nav）,二者区别是：header 中的导航是文章的目录; aside 的导航是关联页面，或者是整站地图。

footer 中包含 address , 很容易被误用：address 表示“文章（作者）的联系方式”，明确地只关联到 article 和 body， 并不是表示一个给机器阅读的地址

总结

整体上了解 HTML 语义。

  • 三个明确的场景
    • 自然语言表达能力的补充。
    • 文章标题摘要。
    • 适合机器阅读的整体结构。

最后，推荐 winter 老师的《重学前端》课程
学习《重学前端》—— 03-HTML语义： div 和 span 不是够用了吗?

相关推荐