什么是语义HTML？
语义HTML，又称语义标记，指的是使用传达其中所含内容的含义或语义的HTML标记。
通过向您的页面添加语义HTML标签，您提供了额外的信息，有助于界定您页面不同部分的作用和相对重要性。
(相对于非语义HTML而言，后者使用的是不直接传达意义的标签。)
注意。 HTML是一种用于构建网站的语言。本指南假设你对HTML有基本了解。如果你是一个完全的初学者，看一个 HTML介绍指南 会有帮助。
语义HTML标签是指定义其包含的内容的含义的标签。
例如，标签如 <header>。, <文章>，以及 <footer>。 是语义的HTML标签。它们清楚地表明它们所包含的内容的作用。
另一方面，像<div> 和 <span> 是非语义学HTML元素的典型例子。它们只是作为内容的承载者，但没有说明它们包含什么类型的内容，也没有说明这些内容在页面上扮演什么角色。
除了语义化的HTML标签更容易阅读和理解这一明显的原因之外–例如，网络开发人员在审查代码的时候–还有两个更具体的原因，即你应该始终使用语义化标签。
可访问性
对于视力正常的用户来说，识别网页的各个部分是很容易的。标题、页脚和主要内容在视觉上都很明显。
然而，对于那些患有慢性病的用户来说，这就不是那么容易了。 盲人或视力障碍者 并依赖屏幕阅读器。
正确使用HTML语义标签将使这些读者能够更好地理解您的内容，因为他们的屏幕阅读器会更准确地传达您的内容。
搜索引擎优化
语义化的HTML标签对于 SEO (搜索引擎优化)，因为它们表明了标签内内容的作用。
这些信息给 搜索引擎爬虫，如谷歌机器人，对你的内容有更好的理解。这增加了你的内容被选为相关关键词在搜索引擎结果页（SERP）上排名的候选人的机会。
简单地说，具有正确实施语义HTML的页面在SEO方面比那些没有的页面更有优势。
语义标签可以定义一个网页的不同部分。
让我们来看看最常见的语义HTML元素，根据其用途分为两类。
用于结构的HTML语义标签
许多语义学的HTML标签传达了一个页面的布局。
这些 “结构性 “标签是在HTML4升级到HTML5时引入的。这就是为什么它们通常也被称为语义HTML5标签或语义HTML5元素。
这里有一个完整的列表。
- <header>:标题标签定义了应被视为一个页面或章节的介绍性信息的内容。
- <nav>。:导航标签用于导航链接。它可以嵌套在<header>标签中，但二级导航<nav>标签也通常用于页面的其他地方。
- <主>:这个标签包含一个页面的主要内容（也叫主体）。每个页面应该只有一个标签。
- <article>:文章标签定义了可以独立于其所在页面或网站的内容。它不一定意味着 “博客文章”。可以把它想象成 “一件衣服”–一个可以在各种情况下使用的独立项目。
- <section>:使用<section>是一种将类似主题的附近内容分组的方式。章节标签与文章标签不同。它不一定是自成一体的，但它是其他东西的一部分。
- < aside>:旁白元素定义了不太重要的内容。它通常用于侧边栏–增加补充性但不重要的信息的区域。
- <footer>:你在页面的底部使用<footer>。它通常包括联系信息、版权信息和一些网站导航。
文本的HTML语义标签
用于文本的HTML语义标签是指那些除了格式化之外，还传达它们所包含的文本的语义功能的HTML标签。
以下是一些最常见的例子。
- <h1> (标题)。的 H1标签 标志着最高级别的标题。每个页面通常只有一个H1标题。
- <h2> to <h6> (副标题)。不同级别的小标题。在一个页面上可以有多个同一级别的标题。
- <p> (段落)。一个独立的文本段落。
- <a> (锚）。用来标记从一个页面到另一个页面的超链接。
- <ol> (有序列表):一个以特定顺序显示的项目列表，以子弹头开始。一个<li>（列表项）标签包含列表中的一个项目。
- <ul> (无序列表)。一个不需要按特定顺序显示的项目的列表，以序号开始。一个<li>（列表项）标签包含列表的一个项目。
- <q> / <blockquote>。对文本的引用。使用<blockquote>进行长的、多行的引用，使用<q>进行短的、内联的引用。
- <em> (强调):用于需要强调的文字。
- <strong>。 (强烈强调)。用于应强烈强调的文本。
- <code>:一个计算机代码块。
备注： 我们只列出了一些最常见的语义化HTML标签。您可以使用许多其他的标签，比如<摘要>、<时间>、<地址>、<视频>等等，以使您网站的内容更容易理解。要发现更多的HTML语义元素，请查看 所有HTML标签的列表 由W3Schools提供。
语义化HTML技巧& 最佳实践
最后，让我们根据人们在使用语义HTML标签时所犯的常见错误，来介绍一些HTML实施技巧。
不要将语义HTML标签用于样式设计
尽管网络浏览器对许多语义标签都应用了样式（例如，<a>标签内的文本通常是蓝色的，并有下划线），但这并不意味着HTML标签应该被用来为你的文本设置样式。
换句话说，就像你不会为了让一个 “非链接 “文本变成蓝色和下划线而对其使用<a>标签一样，你也不应该为了纯粹的风格化目的而使用其他语义标签。
下面是一些错误地使用语义标签的典型例子。
- 对不是标题的文本使用<h1>到<h6>标签，目的是改变其字体大小
- 使用<blockquote>只是为了缩进不是引号的文本
- 使用<strong>或<em>只是为了给不需要强调的文字添加粗体或斜体。
出于样式设计的目的，总是使用CSS。
考虑到语义的标题标签的嵌套
始终按重要性排列标题元素。
例如，在某个H2标题之后的所有H3标题应该是该H2的副标题。
这样一来，标题的结构就为你这篇内容中的主题创造了一个合理的层次结构，并帮助读者和搜索引擎更好地理解和浏览文本。
提示。 使用Semrush的 网站审计 工具，以确定H1标题、其他HTML的问题，以及你的网站可能遭受的页面SEO错误。
同样的建议–按其含义嵌套标签–适用于所有其他语义的HTML标签。
这就把我们带到了下一条建议。
不要只是复制你的视觉布局
你的HTML实现不应该仅仅是视觉布局的复制。相反，它应该遵循页面的语义结构。
让我们来看看这个例子。
左边的HTML标签的用法是不正确的，因为它表示该页面包含四个不同的主题，而不是像右边所示的一个主题和三个副主题。
在右侧，我们有一个使用语义HTML的正确构建的页面。虽然在页面的视觉布局中存在着四个独立的部分，但是HTML标签是根据内容的语义来嵌套的。