HTML 语义化标签案例分析

简单的说，HTML 语义化标签是指能够更直观地认识标签和属性的用途和作用的 🏷标签。常见的语义化标签有 <main>、<nav>、<asede>等，它们能够利用本身传达它所包含内容的一些信息，使浏览器和搜索引擎直观地认识标签和属性的用途和作用。

当然，语义化标签的受惠对象也包括 Web 开发者们 🥰。恰当的语义化标签可以使代码结构清晰，增强代码的可读性，🥳有利于团队开发合作；对于无障碍服务，语义化标签还能够😎方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备），以语义的方式来渲染网页；还有一点重要的是，🧐它有利于搜索引擎优化（SEO）。

历史

HTML 语义化标签的历史📅可以追溯到 HTML5 的推出。HTML5 是由 W3C（万维网联盟）和 WHATWG（Web 超文本应用技术工作组）共同开发的，旨在改进 HTML4 和 XHTML1.0 的不足之处，提供更多的功能和更好的用户体验。

HTML5 的开发始于 2004 年，当时 W3C 和 WHATWG 开始合作，共同开发一个新的 HTML 标准。2008 年，W3C 发布了 HTML5 的第一个工作草案，2012 年发布了候选推荐标准，最终在 2014 年 10 月 28 日正式发布了 HTML5 标准。

在 HTML5 之前，网页布局通常使用大量的 <div> 标签来实现，这种方式虽然简单易用，但是却不利于页面结构的清晰表达。为了解决这个问题，HTML5 推出了一系列新的语义化标签，例如 <header>、<nav>、<main> 等等。这些标签能够更好地表达页面结构中各个部分的含义，使页面更加清晰易懂。

现如今，语义化标签已经成为网页开发中的一个重要部分，被广泛应用于各种网页项目中。

比如著名的 VitePress 框架，就使用了很多语义化标签，比如下图中展示的 <header>：

​

​

SEO

SEO 是英文 Search Engine Optimization 的缩写，中文翻译过来就是 “搜索引擎优化” 。它是一种方式，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。

语义化标签与 SEO

语义化标签能够更好地表达页面结构中各个部分的含义，使页面更加清晰易懂。这对搜索引擎优化（SEO）有很大的帮助，因为它能够帮助搜索引擎更好地理解网页内容，从而提高网页在搜索结果中的排名。

举个例子，假设你有一个博客网站，你可以使用 <article> 标签来标记每篇博客文章，使用 <header> 标签来标记文章标题，使用 <footer> 标签来标记文章的作者和发布日期等信息。这样，当搜索引擎爬取你的网页时，它就能够更好地理解你的内容，并将其与其他相关内容进行比较，从而提高你网页在搜索结果中的排名。

如果你想要数值化的查看某些网页的 SEO 程度，可以在浏览器中安装 🔨lighthouse 浏览器插件。这个插件可以评估目标网页的性能、SEO 等多个方面，并给出直观的评分，帮助开发者更好的完善自己的网站，以优化用户体验，并在搜索引擎中获取更高的排名，以增高曝光度。

🧰 Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

​

​

后话

先短暂的讲这么多。说实话，我现在对这块感触不是很深，因为手上还没有什么能拿得出手的项目让我专注于提高浏览量（悲）。

😘 加油！