语义化HTML
- 语义化与非语义化标签:HTML标签分为语义化标签(如
<h1>
,<footer>
,<nav>
)和非语义化标签(如<div>
,<span>
),语义化标签提供内容的额外含义。 - 语义化标签的作用:语义化标签清晰地定义了代码的目的和内容类型,易于阅读和理解。
- 语义化HTML的好处:使用语义化HTML能够提高代码的可读性,增强网站的可访问性,有助于更好的搜索引擎优化(SEO)。
在 HTML 中,标签可以根据语义被分为两类:
- 语义化标签(Semantic Tag)
- 非语义化标签(Non-semantic Tag)
语义化 HTML 元素清晰地定义了代码的目的和含义。
语义化标签
那些准确描述其目的并描述其内容类型的标签被称为语义化标签。例如,
<h1>标题</h1>
从上述代码中,我们可以准确判断 <h1>
标签内的内容是一个标题。
语义化标签的一些例子包括 <h1>
-<h6>
、<form>
、<table>
、<main>
等
非语义化标签
HTML 非语义化标签没有特定的含义或目的。它们用于创建通用的内容容器,而不提供任何额外的含义或上下文。例如,
<span>一些文本</span>
从上述代码中,我们无法提取文本的含义。这段代码可能来自文档的任何部分,因此它不会为文档增加语义价值。
非语义化标签的一些例子包括 <div>
、<span>
等
一些语义化标签的例子
有许多语义化 HTML 标签可以用来赋予网页内容意义。一些语义化 HTML 标签的例子包括:
语义化标签 | 描述 |
---|---|
<p> | 定义文档的一个段落 |
<header> | 定义文档或文档部分的头部 |
<footer> | 定义文档或文档部分的尾部 |
<nav> | 定义页面的一个包含导航链接的部分 |
<article> | 用于指定独立的、自成一体的内容 |
<aside> | 定义与其所处内容不同的一些内容,更像是一个侧边栏 |
<main> | 指定文档的主要内容 |
<section> | 定义文档的一个区段 |
<details> | 定义用户可以查看或隐藏的附加细节 |
<summary> | 定义 <details> 元素的可见标题 |
为什么使用语义化 HTML?
我们使用语义化 HTML 是因为它使得:
- 代码更易于阅读
- 网站更易于访问
- 有助于更好的搜索引擎优化(SEO)
我们将详细探讨这些方面。
语义化 HTML 使代码更易于阅读
一些语义化 HTML 标签,如 <main>
、<aside>
、<header>
等,并没有附加功能,其行为与 <div>
标签相同。然而,这些语义化标签使代码更易于阅读。
让我们看以下两个例 子。
使用语义化标签
<body>
<header>
<h1>标题</h1>
</header>
<section>
<main>
<article>这是网站的主要内容。</article>
</main>
<aside>额外信息。</aside>
</section>
<footer>版权所有 2022</footer>
</body>
浏览器输出
使用 <div>
标签
<body>
<div>
<h1>标题</h1>
</div>
<div>
<div>
<div>
这是网站的主要内容。
</div>
</div>
<div>额外信息。</aside>
</div>
<div>版权所有 2022</footer>
</body>
浏览器输出
正如您可以看到的那样,这两个示例创建了相同的输出。但是,第一个示例更容易理解。虽然这只是一个小例子,但在大型文档的情况下,它可能会为开发人员节省数小时的时间。
语义化 HTML 使网站更具可访问性
语义化 HTML 可以帮助提高残障人士的可访问性,因为它允许辅助技术(如屏幕阅读器)更轻松地解释和浏览页面的内容。例如,
使用 <h1>
标签来表示主标题,而不仅仅是使用 CSS 使文本变得大而粗,可以使屏幕阅读器正确识别内容为标题并赋予适当的重要性级别。
这有助于视力受损的用户更好地理解页面的结构和层次结构。
语义化 HTML 有助于更好的搜索引擎优化(SEO)
语义标签使搜索引擎更容易索引内容。它还有助于识别网页上的重要关键词,因为它们为内容提供了清晰的结构和层次结构。
例如,使用 <h1>
标签表示页面的主标题,使用 <h2>
和 <h3>
标签表示副标题,使用户和搜索引擎可以轻松识别页面上最重要的关键词。