语义 HTML，又称语义标记，是指使用 HTML 标签传达内容的含义或语义。
语义添加到你的页面上 HTML 您可以提供额外的信息来帮助定义页面不同部分的角色和相对重要性。
(非语义标签与使用不直接传达含义的标签 HTML 相反。）
注意： HTML 这是一种用来构建网站的语言。本指南假设您是对的 HTML 对此有一个基本的了解。若您完全是初学者，请查看Web176教程：HTML 介绍指南会有所帮助。
什么是语义 HTML 标签？
语义 HTML 标签是定义其内容含义的标签。
例如，<header>、<article>和<footer>等标签是语义 HTML 标签。它们清楚地表明了它们所包含的内容的作用。
另一方面，<div>和<span>等标签是非语义的 HTML 典型的元素示例。它们只是内容持有者，但并不意味着它们在页面上扮演什么样的内容或角色。
为什么我需要使用语义 HTML 标签？
除了语义 HTML 标签更容易阅读和理解这个明显的原因(例如，通过 Web 除了开发人员审查代码外，还有两个更具体的原因表明您应该始终使用语义标签。
辅助功能
对于有视力的用户来说，很容易识别网页的各个部分。页眉、页脚和主要内容在视觉上一目了然。
然而，对于盲人或视力受损和依赖屏幕阅读器 这对用户来说并不容易。
正确使用 HTML 语义标签会让这些读者更好地理解你的内容，因为他们的屏幕阅读器会更准确地传达你的内容。
搜索引擎优化
语义 HTML 标签对SEO(搜索引擎优化)非常重要，因为它们显示了内容在标签中的作用。
搜索引擎可以抓取这些信息(例如) Googlebot）更好地理解你的内容。这增加了在搜索引擎结果页面上选择相关关键字的内容 (SERP) 上排候选人的机会。
简而言之，具有正确实现的语义 HTML 的页面在 SEO 比那些没有实现的页面有优势。
HTML 语义标签的类型
语义标签可以定义网页的不同部分。
让我们来看看最常见的语义 HTML 根据其用途，元素可分为两类：
- 结构的 HTML 语义标签
- 文本的 HTML 语义标签
结构的 HTML 语义标签
许多语义 HTML 标记传达页面的布局。
这些“结构”标签是在 HTML4 升级到 HTML5 时间介绍。这就是为什么它们通常被称为语义 HTML5 标签或语义 HTML5 元素。
这是一个完整的列表：
- <header> : header 标签定义了应视为页面或部分介绍信息的内容
- <nav>：导航链接采用导航标签。它可以嵌套在内 <header> 但是二次导航是标签中的 <nav> 页面的其他部分也经常使用标签。
- <main>：该标签包含页面的主要内容（也称为文本）。每页应该只有一个标签。
- <article>：文章标签定义了可以独立于其页面或网站的内容。这并不一定意味着“博客文章”。它更多地被视为“一件衣服”——一种可以在各种环境中使用的独立物品。
- <section>：使用 <section> 它是一种分组相似主题附近内容的方法。section 标签不同于 article 标签。它不一定是独立的，但它构成了其他东西的一部分。
- <aside>：aside 元素定义不是很重要的内容。通常用于侧栏-添加补充但不必要信息的区域。
- <footer>：在页面底部使用 <footer>。它通常包括联系信息、版权信息和一些网站导航。
文本的 HTML 语义标签
文本的语义 HTML 标签是 HTML 除格式外，标签还传达了文本的语义功能。
以下是一些最常见的例子：
- <h1>（标题）：H1 顶级标题的标签标记。通常每页只有一个。 H1 标题。
- <h2> 到 <h6>（子标题）：不同重要级别的子标题。页面上可以有多个相同级别的标题。
- <p>（段落）：独立文本。
- <a>（锚点）：用于标记从一个页面到另一个页面的超链接。
- <ol>(有序列表)：以项目符号开头的项目列表按特定顺序显示。一个 <li>(列表)标签包含列表中的一个项目。
- <ul>(无序列表)：以序号开始，无需按特定顺序显示项目列表。一个 <li>(列表项)标签包含列表中的一项。
- <q> / <blockquote>：引用文本。使用 <blockquote> 长行多行引用，使用 <q> 在较短的行内引用。
- <em>（强调）：应强调的文本。
- <strong>（强调）：用于应强调的文本。
- <code>：计算机代码的一段。
注：我们只列出了一些最常见的语义 HTML 标签。您可以使用许多其他内容(如 <summary>、<time>、<address>、<video> 等等)让你的网站内容更容易理解。找到更多 HTML 请查看W3Scholol语义元素提供的所有 HTML 标签列表。
语义 HTML 技能和最佳实践
最后，让我们介绍一些基于人们使用语义的内容 HTML 标签经常犯错误 HTML 实现技巧。
不要使用语义 HTML 样式设置标签
尽管 Web 浏览器将样式应用到许多语义标记中(例如，<a> 标记中的文本通常是蓝色和下划线)，但这并不意味着 HTML 标记应用于设置文本样式。
换句话说，就像你不会一样 <a> 标签用于“非链接”文本，只是为了让它变成蓝色和下划线，你不应该用其他语义标签作为纯风格的目的。
以下是一些错误使用语义标签的典型示例：
- 为什么不使用标题文本呢？ <h1> 到 <h6> 改变其字体大小的标签
- 使用 <blockquote> 只是为了缩进不引用的文本
- 使用 <strong> 或 <em> 只是为不需要强调的文本添加粗体或斜体。
为了风格目的，请始终使用 CSS。
带有语义的标题标签嵌套
始终按重要性对标题元素进行排序。
例如，某个 H2 标题之后的一切 H3 标题应该是这样 H2 的子主题。
这样，标题结构就可以在你的内容中创建主题的逻辑层次结构，并帮助读者和搜索引擎更好地理解和浏览文本。
同样的建议-嵌套标签-适用于所有其他语义 HTML 标签。
这给我们带来了下一条建议：
不要只是复制你的视觉布局
您的 HTML 实现不应仅仅是视觉布局的复制品。相反，它应该遵循页面的语义结构。
让我们来看看这个例子：
左侧 HTML 标签的使用是不正确的，因为它意味着页面包含四个不同的主题，而不是右侧的一个主题和三个子主题。
在右边，我们有一个语义使用 HTML 正确构建的页面。页面的视觉布局虽然有四个独立的部分，但是 HTML 标记是根据内容的语义嵌套的。
