HTML 中的语义标签

2024年8月28日 | 阅读 4 分钟

超文本标记语言

HTML，即超文本标记语言，是互联网发展的支柱，作为在网络上构建内容的标准标记语言。它提供了一组元素和标签，用于定义网页的结构，指示不同内容部分的用途及其关系。

HTML 文档的基本构建块是 HTML 标签本身，它包含所有内容。在此之中，文档分为两个基本部分：头部和主体。头部包含元信息，包括页面标题、字符集以及指向外部样式表或脚本的链接。主体封装了可见内容，包括文本、图像、链接和其他多媒体元素。

HTML 使用标签来定义各种元素及其属性。例如，<p> 标签表示一个段落，<h1> 到 <h6> 标签表示不同级别的标题，<a> 标签创建链接。此外，HTML 支持使用 <img> 标签包含图像，并使用 <table> 标签，有助于组织和呈现数据。

属性进一步增强了 HTML 元素的功能。例如，<img> 标签中的 src 属性指定图像源，<a> 标签中的 href 属性定义链接目的地。

随着 HTML5 的出现，新的语义元素，如 <article>、<section> 和 <nav>，为内容提供了更好的结构意义。HTML5 还通过 <audio> 和 <video> 标签引入了对音频和视频播放的本地支持。

HTML 是一种灵活的语言，用于构建网页内容，允许浏览器以有意义的方式呈现信息。它的简洁性和广泛采用使其成为任何涉足 Web 开发的人的必备技能。作为万维网的基础，HTML 不断发展，使开发人员能够创建日益复杂和交互式的在线体验。

语义标记，或语义 HTML，是使用 HTML 标签来表达它们所包含内容的语义（意义）。

通过包含语义 HTML 元素，您可以为您的网站添加更多信息，以阐明各种组件的功能和相对重要性。

（与使用间接表达意义的标签的非语义 HTML 形成对比。）

具有语义属性的 HTML 标签允许定义其内容。

语义 HTML 标签有如 <header>、<article> 和 <footer>。它们使它们所传达的内容的目的非常明确。

相反，非语义 HTML 组件通常由 <div> 和 <span> 等标签表示。它们只是内容容器；它们不指定它们所包含的内容类型或它们应如何在页面上放置。

除了显而易见的原因（它使 Web 开发人员更容易阅读和理解 HTML 中的语义标签）之外，您还应该始终使用语义 HTML 元素，原因还有两个更具体。

对于视力受损的人来说，浏览网页是一项简单的任务。主要内容、标题和页脚都清晰可见。

对于依赖屏幕阅读器且失明或视力障碍的人来说，这就不那么简单了。

当您正确使用 HTML 语义标签时，您的信息将更准确地传达给这些阅读者的屏幕阅读器，从而提高他们对其的理解。

语义 HTML 标签有助于搜索引擎优化 (SEO)，因为它们强调了所包含内容的重要性。

搜索引擎爬虫（例如 Googlebot）可以更好地理解您的材料，这要归功于此信息。这增加了搜索引擎将您的材料作为相关关键字的候选查找表 (SERP) 进行排名的可能性。

简而言之，正确使用语义 HTML 的页面在搜索结果中的排名将高于不使用的页面。借助 Site Audit 等程序可以发现可能损害您的 SEO 的 HTML 标签问题。

网页的不同部分可以通过语义标签定义。

让我们检查最流行的语义 HTML 组件，它们根据用途分为两组

许多语义 HTML 标签传达了页面的布局。

当 HTML4 更新到 HTML5 时，添加了某些“结构化”标签。因此，它们也经常被称为语义 HTML5 元素或标签。