《HTML标准》解读：详解语义类标签

最新推荐文章于 2023-09-17 11:14:52 发布

水鱼兄

最新推荐文章于 2023-09-17 11:14:52 发布

阅读量521

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44384265/article/details/127927689

版权

本文深入解析HTML语义标签，包括区域类标签（如article、section、nav等）、组合内容类标签（如列表、引用、注释）和文本级标签（如strong、em、mark等），阐述其语义和应用场景，帮助开发者更好地理解和运用HTML语义标签提升网页可访问性和SEO效果。

摘要由CSDN通过智能技术生成

本文为HTML标准解读系列文章，其他文章详见这里。

HTML的中文名叫做「超文本标记语言」，我曾在《HTML发展史》一文中谈到，标记语言可以分为三类：

所以HTML天生是带有“语义”的。这种特点使得它相比于其他的标记语言可以有更加灵活的呈现：

对于浏览器来说：可以根据语义调整内容的呈现。比如基于内容结构生成快速导航栏，跨页面生成一个目录索引。一些小屏幕，比如手机浏览器，可以基于自身尺寸调整标题和文本的大小、粗细。
对于视觉障碍的用户：可以提高为这些用户朗读的效果，比如强调的地方就使用重音，标题就读慢一点等等；
对于搜索引擎：可以基于语义给内容建立索引，提高检索效率；
对于开发者：由于内容本身带有语义，所以可以更好地维护。

不过，不同类型的标记语言并非界限分明的。比如，word文档现在也支持导出XML文件了。又比如，当你用不好HTML语义标签的时候，就有可能把HTML“降级”为表示性标记语言。

而掌握语义标签也并非易事。一方面，语义标签数目众多；另一方面，有的标签的语义是很相近的，容易混淆，比如<article>和<section>、各种可以加粗的标签。对此，我们应该先把所有的语义类标签做好一个大的分类，然后再“逐个击破“。

分类是降低认知成本有效手段。依据标准，可以根据标签“描述范围”的大小，从大到小把语义类标签分为3个类别：

区域类（Sections）标签：主要描述整体页面的结构以及标题。

<body>,<article>,<section>,<nav>,<aside>,<h1>...<h6>,<hgroup>,<footer>,<address>

组合内容类（Grouping content）标签：组织不同段落、句子的标签。

<p>,<hr>,<pre>,<blockquote>,<ol>,<ul>,<menu>,<li>,<dl>,<dt>,<dd>,<figure>,<figcaption>,<main>,<div>

文本级（Text-level）标签：通常作用在句子上或句子内的词组，表达特定的句意或词意。

<a>,<em>,<strong>,<small>,<s>,<cite>,<q>,<dfn>,<abbr>,<ruby>,<rt>,<rp>,<data>,<time>,<code>,<var>,<samp>,<kbd>,<sub>,<

关注