和等标签是非语义的 HTML 元素的典型例子。它们只是内容持有者，但并不意味着它们在页面上扮演什么样的内容或角色。

为什么我需要使用语义 HTML 标签？

除了语义 HTML 标签更容易阅读和理解这个明显的原因(例如，通过 Web 除了开发人员审查代码外，还有两个更具体的原因表明您应该始终使用语义标签。

辅助功能

对于有视力的用户来说，很容易识别网页的各个部分。页眉、页脚和主要内容在视觉上一目了然。

然而，对于盲人或视力受损和依赖屏幕阅读器 这对用户来说并不容易。

正确使用 HTML 语义标签会让这些读者更好地理解你的内容，因为他们的屏幕阅读器会更准确地传达你的内容。

搜索引擎优化

语义 HTML 标签对于SEO(搜索引擎优化)很重要，因为它们显示了内容在标签中的作用。

搜索引擎可以抓取这些信息(例如) Googlebot）更好地理解你的内容。这增加了在搜索引擎结果页面上选择相关关键字的内容 (SERP) 上排候选人的机会。

简而言之，具有正确实现的语义 HTML 的页面在 SEO 比那些没有实现的页面有优势。

HTML 语义标签的类型

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

让我们来看看最常见的语义 HTML 根据其用途，元素可分为两类：

• 结构的 HTML 语义标签
• 文本的 HTML 语义标签

结构的 HTML 语义标签

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

这些“结构”标签是在 HTML4 升级到 HTML5 时间介绍。这就是为什么它们通常被称为语义 HTML5 标签或语义 HTML5 元素。

这是一个完整的列表：

•  : header 标签定义了应视为页面或部分介绍信息的内容
• 但是二次导航是标签中的

• ：该标签包含页面的主要内容（也称为文本）。每页应该只有一个标签。
• ：文章标签定义了可以独立于其页面或网站的内容。这并不一定意味着“博客文章”。它更多地被视为“一件衣服”——一种可以在各种环境中使用的独立物品。
• ：使用
  它是一种分组相似主题附近内容的方法。section 标签不同于 article 标签。它不一定是独立的，但它构成了其他东西的一部分。 

文本的 HTML 语义标签

文本的语义 HTML 标签是 HTML 除格式外，标签还传达了文本的语义功能。

以下是一些最常见的例子：

• （标题）：H1 顶级标题的标签标记。通常每页只有一个。 H1 标题。

• 到

  （子标题）：不同重要级别的子标题。页面上可以有多个相同级别的标题。

• （段落）：独立文本。
• （锚点）：用于标记从一个页面到另一个页面的超链接。
  (有序列表)：以项目符号开头的项目列表按特定顺序显示。一个
  1. (列表)标签包含列表中的一个项目。
     (无序列表)：以序号开始，无需按特定顺序显示项目列表。一个
     • (列表项)标签包含列表中的一项。
     •  /
       

       ：引用文本。使用

       长行多行引用，使用 在较短的行内引用。

        

     • （强调）：应强调的文本。
     • （强调）：用于应强调的文本。
     • ：计算机代码的一段。
  2. 注：我们只列出了一些最常见的语义 HTML 标签。您可以使用许多其他内容(如

     、、

     、

      

     语义 HTML 技能和最佳实践

     最后，让我们介绍一些基于人们使用语义的内容 HTML 标签经常犯错误 HTML 实现技巧。

     不要使用语义 HTML 样式设置标签

     尽管 Web 浏览器将样式应用到许多语义标记中(例如， 标记中的文本通常是蓝色和下划线)，但这并不意味着 HTML 标记应用于设置文本样式。

     换句话说，就像你不会一样 标签用于“非链接”文本，只是为了让它变成蓝色和下划线，你不应该用其他语义标签作为纯风格的目的。

     以下是一些错误使用语义标签的典型示例：

     • 为什么不使用标题文本呢？
       

       到

       改变其字体大小的标签

     • 使用
       

       只是为了缩进不引用的文本

     • 使用 或 只是为不需要强调的文本添加粗体或斜体。

     为了风格目的，请始终使用 CSS。

     带有语义的标题标签嵌套

     始终按重要性对标题元素进行排序。

     例如，某个 H2 标题之后的一切 H3 标题应该是这样 H2 的子主题。

     

     这样，标题结构就可以在你的内容中创建主题的逻辑层次结构，并帮助读者和搜索引擎更好地理解和浏览文本。

     同样的建议-嵌套标签-适用于所有其他语义 HTML 标签。

     这给我们带来了下一条建议：

     不要只是复制你的视觉布局

     您的 HTML 实现不应仅仅是视觉布局的复制品。相反，它应该遵循页面的语义结构。

     让我们来看看这个例子：

     

     左侧 HTML 标签的使用是不正确的，因为它意味着页面包含四个不同的主题，而不是右侧的一个主题和三个子主题。

     在右边，我们有一个语义使用 HTML 正确构建的页面。页面的视觉布局虽然有四个独立的部分，但是 HTML 标记是根据内容的语义嵌套的。