您了解 HTML 和 Web 时，您可能会发现反复遇到一个通常未定义的特定单词。那个词是语义的。

你可能会读到诸如“我们去寻找语义元素”或“我们尽量做到语义化”之类的陈述，但永远无法清楚地了解语义这个词的含义。在本文中，我们将探索语义标记的世界，提出术语的有效定义，并将该概念应用于我们编写 HTML 标记的方式。

什么是语义标记？

根据 Dictionary.com 的说法，语义是指对单词或句子含义的正确解释。

从语义上使用一个词就是以一种与该词的含义正确对齐的方式使用它。当我们误用一个词时，我们并不是在语义上使用它。

许多 HTML 标签具有语义含义。也就是说，元素本身传达了一些关于包含在开始标签和结束标签之间的内容类型的信息。

例如，当浏览器遇到一个h1标题时，它会将该标记解释为表示该元素的内容h1构成了包含该元素的部分的最重要的标题。标签的语义含义h1是它用于标识特定网页或部分的最重要的标题。

启用语义标记的两种做法

如果我们要编写语义标记，必须采用两种不同的做法。

0. 语义标记要求根据其预期目的使用 HTML 元素。
1. 语义标记需要内容和表示的分离。

正确使用 HTML 元素

在编写语义标记时，我们使用 HTML 标签来告诉浏览器元素的内容。在语义标记中，标签不再只是让内容以人类可读的格式显示在网页上的一种方式。

标签本身成为一种告诉机器（无论是浏览器、计算机、智能手机还是其他智能设备）有关内容含义的方式。

要编写语义标记，我们必须正确使用 HTML 标签，以便我们的标记既是人类可读的，也是机器可读的。

分离内容和演示

过去，通常使用标记来定义样式和控制网页布局。

标题级别的选择不是基于层次结构，而是基于 Web 浏览器应用的样式，表格用于网页布局而不是组织表格数据，一些 HTML 标记（例如frameset）是为了明确定义网页而创建的布局等等。

当我们编写语义标记时，我们不能再根据视觉呈现来选择 HTML 元素。相反，我们根据语义含义选择 HTML 元素，然后使用CSS定义我们内容的视觉呈现。

在编写语义标记时，网页元素的表示与内容本身的标记完全分离和不同。

定义语义标记

考虑到这两种做法，我们可以这样定义语义标记：

语义标记是使用诸如 HTML 之类的标记语言通过正确选择标记元素来传达有关文档中每个元素的含义的信息，并保持标记和文档中包含的元素的视觉呈现之间的完全分离.

为什么语义标记很重要？

好的 CSS 可以使普通网站访问者看不到不好的标记。然而，再多的样式也不会让糟糕的标记对计算机化的访问者更有意义，例如搜索引擎网络爬虫、浏览器翻译工具或屏幕阅读器等辅助技术。

根据 Bruce Lawson的说法，HTML 元素的语义使用“增强了可访问性、可搜索性、国际化和互操作性”。换句话说，如果您希望所有访问者都可以访问您的网站、实现较高的搜索引擎排名、可供来自世界各地的访问者使用以及与其他 Web 服务有效交互，则必须编写语义标记。

编写语义标记是关于创建人类和计算机可读的 Web 内容。当人类和计算机都可以很好地阅读网络时，它就变得更易于访问，因为计算机能够更好地分析其内容、索引、交付它，并且开发人员能够更好地将不同的信息源结合到新的网络服务中.

我们如何编写语义标记？

我们通过正确选择和使用 HTML 标记以及通过选择传达有关标记所标记信息的某些标记来编写语义标记。

HTML 中有语义元素和非语义元素。非语义元素的示例是div和span。这些标签不会告诉计算机有关元素内容含义的任何信息。

虽然有用，并且在某些情况下可以很好地使用，但如果语义标签可用并且适合特定用途，请在使用非语义标签之前使用它。

许多语义标签来自谷歌和Opera等公司完成的网页标记分析。这些公司发现，许多网站使用id和class属性来暗示非语义元素内容的含义。

例如，他们发现了很多看起来像这样的 div：<div id="nav">、<div id="header">和<div id="footer">。此类发现有助于 W3C 识别和定位新的语义标签以包含在 HTML5 中，例如：nav和。我们可以将最常见和最重要的语义元素分为四类：header``footer``article``aside

• 文档结构标签
• 文本含义标签
• 媒体类型标签
• 相关标签

文件结构

过去，div元素是识别和分组网站部分的主要方式。然而，随着 HTML5 的发布，除了标签提供的分组属性之外，我们还有几个新标签可供使用，这些标签提供语义含义div：

• header：用于网页标题的容器，通常包含网站徽标、标题元素和网站导航。
• footer：用于网页页脚的容器，除了导航链接和返回网页顶部的链接外，通常还包含作者身份、联系方式和版权信息。
• main：一个高级元素，用于包含单个网页独有的所有内容，并且不会在多个网页中重复。
• nav：包含站点导航链接块的元素。该元素通常放置在页面header和footer中，也可以在aside（侧边栏）元素中使用。
• section：该section元素用于标记文档的各个部分，例如长篇文章的章节或主要部分。
• aside：用于标识与页面上的主要内容相关但不属于文档主要流程的内容。例如，该什么是语义标记？

文本含义

在网络的早期，通常会看到这样的标记：

<style>
 .italics {     font-style: italic; }
</style> 
<p>Some paragraph content including one
   <span class="italics">italicized</span> word.
</p> 

今天我们（希望）不会梦想做这样的事情，因为span元素告诉浏览器和其他计算机访问者完全没有关于嵌套在开始和结束标记之间的文本的含义或目的。我们不会使用非语义标签，而是在应该以斜体显示的单词周围span添加标签。em通过使用em标签，使用屏幕阅读器或访问内容的其他计算机的访问者将了解应用标签以增加对已标记内容的强调。该em元素只是 HTML 标记如何为文本内容添加语义含义的一个示例。其他示例包括：

• h1, h2, h3, h4, h5, 和h6: 标题元素标签用于标识应该作为标题出现的文本。最高级别或最重要的标题是按照重要性降序排列的标题h1级别。h2``h6
• strong：带有标签的文本strong被赋予了额外的重要性，并且通常以粗体显示。
• mark：mark标签用于突出在特定上下文中具有特定重要性的文本。例如，它可用于突出显示搜索结果页面中搜索词的每次出现。
• cite：该cite元素用于标识部分内容源自的原始作品。
• blockquoteand q: blockquoteand q(quote) 元素用于识别从另一个来源直接引用的文本。
• time：该time元素可用于告诉浏览器、网络爬虫和其他智能设备，特定的内容位代表 24 小时制的时间或特定的日历日期。

我们的字体和 Web 排版教程提供了大量关于正确使用这些标签来为文本内容分配语义含义的详细信息。

媒体类型

HTML5 还包括三个标签，用于标识标签之间提供的媒体类型。这些标签有双重用途。首先，它们向浏览器发出信号，需要对特定技术资源（例如视频播放引擎）进行排队。其次，他们为内容赋予语义意义。

• audio：用于向文档添加一个或多个音频内容源，并允许浏览器根据访问者的设备和浏览器选择最佳选项。
• video：类似于audio元素，但用于将视频内容添加到标记文档。
• picture：图片元素用于允许网络浏览器根据媒体查询的结果从可用选项中选择最佳图像。

您可以在我们的HTML5 媒体教程中了解有关嵌入audio和video元素的更多信息。此外，我们关于在网络上使用图像的文章提供了有关何时使用该元素以及何时坚持使用该元素的更多信息。picture``img

相关标签

几个 HTML 元素用于表示多个元素之间的相关性。例如，使用有序列表 ( ol) 告诉浏览器列表中的项目彼此相关，需要以特定的顺序出现。用于表示多个元素之间相关性的其他元素包括：

• ul: 无序列表用于表示列表中项目之间的关系，并表明它们不需要按特定顺序来理解。
• figure：该figure元素用于将一段内容（例如图像、图表、图形或文本）和由figcaption标签标记的标题组合在一起。通过在标签之间嵌套标题和内容，figure可以识别嵌套元素之间的关系。我们的图片页面包含有关实施此有用标签的更多信息。
• address：该属性用于将联系人信息与包含该address元素的父元素相关联。例如，当添加到 时article，该address元素提供文章作者的联系信息，当添加到网页时footer，address标识网页所有者的联系信息。

结束的想法

如果您是 HTML 新手，请花时间学习如何在语义上使用所有这些不同的 HTML 标记。如果您不确定您使用的标签是否正确，请花几分钟时间进行一些研究。正如我们所见，使用正确的标签很重要。如果您已经使用 HTML 一段时间了，请花点时间了解新的 HTML5 元素以及如何正确使用它们。在过去的几年里，HTML 变得越来越复杂，继续使用div带有class和id属性，但语义 HTML5 标记的可访问性和互操作性承诺足以接受这些新的语义元素。

那么你已经了解清楚语义标记了吗？

正确的标签做正确的事情。html语义化让页面的内容结构化，结构更清晰。便于开发者阅读和写出更优雅的代码,使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。同时让浏览器的爬虫和机器更好的理解和分析,利于SEO。

目标

语义化标签有什么用？

有哪些结构语义标签？

什么是HTML语义化

就是用正确的标签做正确的事。如h1标签，把适当的标签用在合适的地方，使页面结构更加的清晰。

标题标签 h1~h6

加重标签 strong

高亮标签 mark

引用标签 blockquoto

html语义化有什么作用

1. 使用html语义化，能使页面结构更清晰，便于解析。

2. 有利于SEO。搜索引擎爬虫依赖于html标签来确定上下文和关键字权重。

3. 使用html语义化，在没有css样式的时候页面也能正确清晰的呈现

4. 有利于各种设备的解析，如盲人阅读器，屏幕阅读器，以特殊的方式来渲染网页

5. 有利于团队合作开发与维护，语义化更具有可读性。

头部--header元素

<header>元素描述了文档的头部区域，通常是一个网站的头部

在页面中你可以使用多个<header> 元素，常用在嵌套结构里

尾部--footer元素

<footer>元素描述了文档的底部区域，通常是一个网站的底部

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

导航链接--nav元素

<nav> 标签定义导航链接的部分。

整体--article元素

<article> 标签定义独立的内容，通常是指一个独立的整体，例如文章的内容作为一个整体，右边的侧边栏作为一个整体。

章节--section元素

<section> 标签定义文档中的节、区段，整体中的某个模块。

根据W3C HTML5文档: section 包含了一组内容及其标题。

副区域--aside元素

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）

独立的流内容--figure元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题，应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

总结

TML 的语义化标签是指用于描述内容结构和含义的标签。

这些标签不仅仅用于样式和布局，更重要的是通过标签本身传达出内容的语义和结构，使得页面具有更好的可读性、可访问性和搜索引擎优化。

以下是一些常见的 HTML 语义化标签：

1. <header>：表示页面或页面内部的头部，通常包含网站的标题、导航栏、标志等。
2. <nav>：表示导航栏，用于包含页面的导航链接。
3. <main>：表示页面的主要内容，每个页面应该只有一个<main>标签。
4. <article>：表示独立的、完整的文章或内容块，如博客文章、新闻报道等。
5. <section>：表示页面中的一个独立区域或部分，可以包含相关的内容组合。
6. <aside>：表示页面的侧边栏或附属内容，通常包含与主要内容相关但可以独立存在的内容。
7. <footer>：表示页面或页面内部的底部，通常包含版权信息、联系方式等。
8. <figure>和<figcaption>：<figure>表示一组与文档相关的图像、图表或代码等媒体内容，而<figcaption>则表示这些内容的标题或说明。
9. <time>：表示日期和时间，用于标记具体的时间信息。
10. <blockquote>：表示一个块引用，通常用于引用其他来源的文本。

通过使用这些语义化标签，我们可以更清晰地描述页面的结构和内容