帮助您选择正确 HTML 标签的简短指南

语义正确的 HTML 标签会告知浏览器和开发者其内容。它还能帮助键盘和辅助技术浏览网站。

HTML 标签有100 多个，但哪些是语义的，哪些不是呢？

非语义元素： div、span 等。与语义元素不同，它们不包含任何关于其内容的额外信息。

语义元素： header、main、footer、article、img、p、h1 等。

当你创建一个新的 HTML 文件时，你会看到如下内容：



<html>
    <head>
        ...
    </head>
    <body>
        ...
    </body>
</html>

我将重点关注body 元素内部的内容并仅命名最重要的标签。

HTML 标签可以分成不同的组，它帮助我理解整个概念，我认为这是解释它的最好方式，所以让我们开始吧。

内容分区或地标

我的博客主页布局如下：

标题和导航

在我的主页中<header>，您可以找到徽标，它是一个链接，指向主页和<nav>包含指向我其他页面链接的元素。
您还可以在这里放置一些关于页面的介绍、搜索栏或其他元素。

主要的

该<main>元素在每个页面上包含不同的内容。它包含当前页面的主要信息或应用程序的主要功能。

页脚

该<footer>标签用于为某个部分或整个文档创建页脚。<footer>一个页面中可以包含多个元素，这些元素通常包含数据，例如：作者联系信息、版权信息、相关链接等。

一边

<aside>您还可以在我的页面右侧找到。它包含补充内容。如果我删除它，主要内容不会丢失。例如，您可以在这里放置目录、相关文章等。

部分

在“我的”元素中<main>，您可以找到该<section>标签。如果文档的某个部分没有更具体的 HTML 元素，您可以使用此标签将相关元素分组。此元素应始终包含标题。

H1-H6

标题元素：<h1> <h2> <h3> <h4> <h5>和<h6>是不同部分的标题。<h1>是最高级别的标题，每页都需要一个，但每页只能有一个。<h6>是最低级别的标题。如果标题用完了，还有另一个选择：第七个标题

您应该使用地标的原因是，屏幕阅读器和其他辅助技术可以在这些元素之间来回跳转。
例如，所有页面都有相同的标题、相同的徽标、相同的导航，但使用键盘快捷键，您可以跳过它们，从主标签的内容开始。

文本内容元素

这些可以帮助您组织页面上的书面内容，并向搜索引擎和屏幕阅读器提供有关内容的信息。

磷

<p>代表段落。换句话说，就是一段文本。你会经常用它来包裹你的文本内容。

ul, ol, li

<ul>- 无序列表，<ol>- 有序列表，<li>- 列出两种列表的元素。如果您需要创建列表，则必须使用它们。

<ul>如果顺序不重要，列表项会被包裹在中。它会在每个列表项前放置项目符号。

<ol>如果列表项的顺序很重要，请选择。默认情况下，它会按升序在每个项目前添加一个数字。

图表、标题、区块引用、引用

我将用一个例子来解释所有这些。请看以下代码块：



<figure>
    <blockquote cite="https://www.htmhell.dev/24-a-placeholder-is-not-a-label/">
        Every form input element needs a label.
    </blockquote>
    <figcaption>Manuel Matuzović, <cite>A placeholder is not a label - HTMHell</cite></figcaption>
</figure>

<figure>并<figcaption>相辅相成。
是<figure>一个可选的独立元素，但通常带有标题。此标题即为<figcaption>元素。

<blockquote>用于引用，用于标明作者、出处等。（您可以使用此标签的 cite 属性来提供此引用来源的 URL）。
<cite>元素保存对引用内容的引用。例如，作者姓名、引用材料的标题等。这是我们下一组元素（内联文本元素）的第一个元素。

内联文本元素

您可以将文本的较小部分（如单词、句子等）包装到不同的标签中，以定义其样式、含义或结构。

一个

<a>或锚元素是具有href属性的链接，可指向其他网页、文件、电子邮件地址、电话号码或同一页面上的位置。

em

使用此元素来强调任何文本内容。 屏幕阅读器会以不同的方式读取文本的这一部分。浏览器会以斜体字体样式呈现此文本内容，但并非仅将其用于样式设置。

强的

使用此元素标记比文本其余部分更重要的内容。屏幕阅读器会以不同的方式读取文本的这一部分。浏览器会以粗体字体样式呈现此文本内容，但不会仅将其用于样式设置。

问

简短的行内引用，无需占用整段文字。（您可以使用此标签的 cite 属性来提供引用来源的 URL）

图像和多媒体

声音的

音频用于将声音嵌入到您的网站。

图片

img 用于将图像嵌入到您的网站。

视频

视频用于将视频嵌入到您的网站。

表格内容

我认为一个例子是解释这些元素最简单的方法：

桌子

<table>创建一个包含行和列的二维表

头

<thead>是定义列标题的一行或多行

日

<th>是作为一组单元格标题的单个单元格。这组单元格可以是一列或一行，并且必须通过 scope 属性进行定义。scope 属性的值可以是 col 或 row。

主体

<tbody>包装表格的主要内容，通常位于 thead 和 tfoot 元素之间。

tr

<tr>定义表格中的一行单元格。

TD

<td>代表表格数据。这是一个保存信息的单元格。

tfoot

这是表格末尾的一行，总结了其内容。

表格

形式

<form>元素包装了整个表单，用户可以使用它来输入数据并将其提交到服务器。

字段集

<fieldset>将相关的输入分组到表单中。字段集需要标题，而这个标题就是图例元素。例如，如果您有一个包含送货地址和账单地址的表单，您可以使用 fieldset 元素创建两组输入。

传奇

<legend>元素定义字段集的标题。

输入

用户可以与<input>元素交互来输入数据。有许多不同类型的输入字段，用于输入不同类型的信息，例如文本、颜色、文件等。

选择和选项

<select>是一种特殊的输入字段，带有下拉菜单。此下拉菜单包含<option>标签。

文本区域

用户可以在此字段中输入多行文本

按钮

该<button>标签创建一个可点击的元素，看起来像一个按钮。它用于提交表单。

其他的

内嵌框架

您可以使用该元素将其他 HTML 文件嵌入到您的网站<iframe>。例如，您可以将 Spotify 的歌曲或 YouTube 的视频插入您的网站。

图片

<picture>其用途与元素几乎相同<img>，但您可以指定更多来源，浏览器会自行决定最适合自己的格式。如果您想使用新的图像格式，例如 .avif（在我撰写本文时，该格式尚未得到广泛支持），则应使用其他格式（例如 png）并加上<source>标签。

来源

使用此元素，您可以为<picture>、<audio>和<video>元素指定多个源，如下所示：



<picture>
    <source srcset="image.png">
    <source srcset="image.webp">
    <img src="image.avif" alt="" />
</picture>

SVG

我可以用更复杂的方式来描述它，但<svg>它主要用于显示矢量图形图像，您可以将其放大或缩小到任意尺寸而不会变得像素化。

边玩边学

Paul Foster打造了这款超棒的记忆游戏。快来测试一下自己，明天打破自己的记录吧！

如果您选择了正确的元素，您的代码将更容易被其他开发者阅读，
辅助技术用户也将更容易使用您的网站，
搜索引擎也会提高您网站的排名（SEO）。
有时，您应该停下来思考一下，是否有比您想要使用的更好的 HTML 元素。

如果您遗漏了某些内容或发现任何不准确的信息，请告诉我，我会尽快添加或更正。

最初发表于Use Less Divs

文章来源：https://dev.to/polgarj/a-short-guide-to-help-you-pick-the- Correct-html-tag-56l9