什么是语义HTML？
语义HTML，也称为语义标记，指的是使用HTML标记来传达包含在其中的内容的含义或语义。
通过向页面添加语义HTML标记，可以提供额外的信息，帮助定义页面不同部分的角色和相对重要性。
（与非语义HTML相反，非语义HTML使用不直接传达含义的标记。）
注意:HTML是一种用于构建网站的语言。本指南假定您对HTML有基本的了解。如果你是一个完全的初学者，看一看HTML入门指南会很有帮助。
什么是语义HTML标签？
语义HTML标记是定义其包含的内容的含义的标记。
例如，像
、
和
这样的标签都是语义HTML标签。它们清楚地表明它们所包含的内容的作用。
另一方面，像
和 这样的标签是典型的非语义HTML元素。它们仅作为内容持有人，但不指示它们包含什么类型的内容或内容在页面上扮演什么角色。
为什么我需要使用语义HTML标签？
除了语义HTML标记更容易阅读和理解（例如，web开发人员审查代码）这一显而易见的原因之外，还有两个更具体的原因说明为什么应该始终使用语义标记。
可访问性
对于视力正常的用户来说，很容易识别网页的各个部分。页眉、页脚和主要内容在视觉上都很明显。
然而，对于盲人或视力受损的用户来说，依赖屏幕阅读器就不那么容易了。
正确使用HTML语义标记将允许这些阅读器更好地理解您的内容，因为它们的屏幕阅读器将更准确地传达您的内容。
搜索引擎优化
语义HTML标记对SEO（搜索引擎优化）很重要，因为它们指示了标记内内容的角色。
这些信息使搜索引擎爬虫，如Googlebot，更好地了解你的内容。这增加了您的内容被选为相关关键词搜索引擎结果页面（SERP）排名的候选内容的机会。
简单地说，具有正确实现语义HTML的页面在SEO中比那些没有实现语义HTML的页面更有优势。
你可以使用像Site Audit这样的工具来发现可能影响你SEO的HTML标签问题。
（现在创建一个免费的试用账户来跟随，看看你会发现什么问题。）
在工具中输入您的域并配置您的抓取设置。
转到“问题”选项卡。
在“搜索方式”框中搜索“标签”。
点击“为什么以及如何修复它”以了解有关每个站点问题的更多信息。
HTML语义标签的类型
语义标签可以定义网页的不同部分。
让我们来看看最常见的语义HTML元素，根据它们的用法分为两类：
用于结构的HTML语义标签
用于文本的HTML语义标记
用于结构的HTML语义标签
许多语义HTML标签传达了页面的布局。
这些“结构性”标签是在HTML4升级到HTML5时引入的。这就是为什么它们通常也被称为语义HTML5标签或语义HTML5元素。
以下是完整的清单：
: header标签定义了应该被视为页面或节的介绍性信息的内容
：导航标签用于导航链接。它可以嵌套在
标记中，但辅助导航
标记也通常用于页面的其他地方。
：此标签包含页面的主要内容（也称为主体）。每页应该只有一个标签。
: article标签定义了可以独立于其所在页面或站点的内容。它并不一定意味着“博客文章”。把它想象成“一件衣服”——一件可以在各种环境中使用的独立物品。
：使用
是对相似主题的附近内容进行分组的一种方式。section标签不同于article标签。它不一定是独立的，但它构成了其他事物的一部分。
: aside元素定义不太重要的内容。它通常用于侧栏——添加补充但非必要信息的区域。
：在页面底部使用
。它通常包括联系信息、版权信息和一些站点导航。
文本的HTML语义标签
文本的语义HTML标记是一种HTML标记，除了格式之外，它还传达它们所包含的文本的语义功能。
下面是一些最常见的例子：
(heading): h1标记标记顶层标题。通常每页只有一个H1标题。
至
（副标题）：不同重要程度的副标题。在一个页面上可以有多个相同级别的标题。
（段落）：一个独立的文本段落。
（锚）：用于标记从一个页面到另一个页面的超链接。
（有序列表）：以特定顺序显示的项目列表，从项目符号开始。一个
(list item)标签在列表中只包含一个项目。
（无序列表）：不需要以特定顺序显示的项目列表，从序数开始。一个
(list item)标签包含列表中的单个项目。
/
：引用文本。对于长而多行的引语使用
，对于短而内联的引语使用 。
（强调）：用于需要强调的文本。
（强强调）：用于需要强强调的文本。
：一个计算机代码块。
注意:我们只列出了一些最常见的语义HTML标记。你可以使用许多其他的——比如