「这是我参与2022首次更文挑战的第3天，活动详情查看：2022首次更文挑战」。
HTML是任何网站的支柱。这是人们首先看到的。没有它，就没有网站。
因此，坚持良好的编码实践很重要。如果你不遵循最佳实践，你将为 Web 用户带来糟糕的用户体验。
无论你是编码新手还是经验丰富的专业人士，在 HTML 中总有一些新东西需要学习。
在本文中，我们将讨论 HTML 的基本最佳实践。
让我们开始吧。💃
HTML 最佳实践
HTML 最佳实践是帮助你创建易于维护和阅读的网站的规则。
以下是构建基于 HTML 的网站时要牢记的一些准则：
一张代码表只使用一个 < h1 > 元素
HTML 中有六个不同的标题标签， <h1>到<h6>. <h1>标签是主要标题（网页的主题），而标签<h6>是最不重要的标题。
<h1>标签比<h2>标签大，标签<h2>比<h3>标签大，一直到<h6>标签。每个标题的大小都根据其重要性而减小。
<h1>避免对一张代码表使用多个元素是很重要的。
不要这样做⬇️：
<main>
<div>
<h1>Can Coding be fun?</h1>
<p>The more you code the better you become</p>
</div>
<div>
<h1>Coding is fun</h1>
<p>It is always better when you have fun coding</p>
</div>
</main>
在上面的示例中，我们<h1>在 first 和 second 上使用了标签<div>。以这种方式编码会起作用，但是尽管你会实现相同的目标，但这并不是最佳实践。
改为这样做⬇️：
<main>
<div>
<h1>Can coding be fun?</h1>
<p>The more you code the better you become</p>
</div>
<div>
<h2>Coding is fun</h2>
<p>It is always better when you have fun coding</p>
</div>
</main>
<h1>网页上只有一个元素对于搜索引擎优化 (SEO) 至关重要。它可以帮助搜索引擎了解网页的全部内容（网页的主要思想）。
不要跳过 HTML 中的标题级别
使用标题标签时，从<h1>到<h2>到<h3>到<h4>等等是至关重要的......
使用标题标签时不要使用<h1>然后跳转。<h3>当你跳过标题级别时，使用屏幕阅读器的网络访问者很难理解你的网页内容。
屏幕阅读器是一种技术，可帮助难以查看数字内容并与数字内容（例如网站或应用程序）通过音频或触摸进行交互的人。屏幕阅读器的主要用户是盲人或视力非常有限的人。
不要这样做⬇️：
<h1>Coding is fun</h1>
<h3>It is always better when you have fun coding</h3>
</h5>
改为这样做⬇️：
<h1>Can coding be fun?</h1>
<h2>The more you code the better you become</h2>
<h3>Coding is fun</h3>
使用 figure 元素为 HTML 中的图像添加标题
<figure>建议在为图像添加标题时使用该元素。将<figcaption>元素与元素一起使用<figure>以使其工作非常重要。
不要这样做⬇️：
<div>
<img src=“a-man-coding.jpg” alt=“A man working on his computer”>
<p>This is a picture of a man working on his computer</p>
</div>
上面的示例将按预期工作，但不是最好的方法。在图像无法加载的情况下，你将在屏幕上显示alt文本和元素上的文本。<p>对于使用屏幕阅读器的网络访问者来说，很难分辨出<p>和alt文本之间的区别。
永远记住，仅仅因为你的代码有效并不意味着你遵循了最佳实践。
改为这样做⬇️：
<figure>
<img src=“a-man-coding.jpg” alt=“A man working on his computer”>
<figcaption> This is a picture of a man working on his computer</figcaption>
</figure>
上面的示例是为图像添加标题的最佳方式。
以这种方式为图像添加标题很重要：
- 搜索引擎优化：在搜索引擎上更容易找到您的图像。
- 使用屏幕阅读器的网络访问者更容易理解您的网页内容。
不要使用 div 来创建页眉和页脚 - 改用语义元素
HTML 语义元素在网页上以更有意义的方式标记文档的结构。最佳实践是使用 HTML 语义元素来正确组装您的网页。
避免使用<divs>代替 HTML 语义。不要使用<div>元素在您的网页上显示页眉和页脚。改用语义<header>和<footer>元素。
该<header>元素显示网页的导航或打开部分。
该<footer>元素显示有关网页的版权信息或导航链接。
不要这样做⬇️：
<div class="header">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="footer">
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
在上面的示例中，我们使用<div>标签作为<header>and的容器<footer>。以这种方式编码会起作用，但是尽管您会实现相同的目标，但这并不是最佳实践。
改为这样做⬇️：
<header>
<h1></h1>
</header>
<footer>
<a href="index.html">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</footer>
上面的示例是添加<footers>和添加<headers>到您的网页的最佳方式。
添加<footer>和<header>使用 HTML 语义元素很重要，因为：
- 使用你的语义元素
header，并footer让你的代码更易于阅读。 - 它为网络访问者提供了更好的用户体验。使用屏幕阅读器的网络访问者更容易理解您的网页内容。
查看本文以了解有关HTML 语义元素的更多信息。
避免在网页上使用<b>和加粗和斜体文本<i>
和标签也称为粗体和斜体标签<b>。<i>它们都用于突出显示网页文本中的单词。
你不应该使用<b>and<i>来表示粗体和斜体，因为它们没有语义含义。使用font-weightCSS 属性或使用<strong>and<em>标记。
你使用<strong>标签使网页上的文本变得重要。它突出显示或加粗网页上的文本。标签强调网页中的<em>文本。它还像<i>标签一样以斜体显示文本。
不要这样做⬇️：
<p><i>Code at your own pace</i><p>
<p><b>code at your own pace</b><p>
在上面的示例中，显示的文本将以粗体和斜体显示。对于使用屏幕阅读器的网络用户来说，这并不重要。它没有语义意义。
****HTML5规范说，<b>and<i>标签只能在没有其他标签可用的情况下作为最后的手段使用 。
改为这样做⬇️：```
Code at your own pace
code at your own pace
```
不要将块级元素放在行内元素中
块级元素在网页的新行中开始。默认情况下，它们从网页的行首延伸到网页的结尾。如果不使用 CSS，您将无法向块元素内嵌添加更多内容。
、<p>和元素是块级元素的一些示例<h1>-<h6>。<div>
内联元素覆盖网页上的最小区域。它们不会从网页的新行开始。
的<span>，<em>和所述<a>元件是一些内联元件的例子。
你不能将块元素放置在内联元素中。
不要这样做⬇️：
<a href="#" >
<p> Visit freecodecamp </p>
</a>
你不能<p>在<a>元素内换行，因为<p>它是块级元素并且<a>是内联元素。
改为这样做⬇️：
<p>
Visit <a href="www.freecodecamp. org" target="_blank">FreecodeCamp</a>
to learn Javascript
</p>
上面的示例是将内联元素嵌套在块级元素中的最佳方式。
需要注意的是：
- 块级元素不能嵌套在内联元素中。
- 内联元素可以嵌套在块级元素中。
- 内联和块级元素可以嵌套在块级元素内。
简单说明一下：在上面的例子中，嵌套的意思是放在里面。所以当我说它不能嵌套时，我指的是它不能放在里面。
我希望你理解这三个用于嵌套元素的简单规则。
也可以使用 CSS 将块级元素转换为内联元素，反之亦然。使用display: inline-blockanddisplay: inline将块级元素转换为内联元素。
重要的是要记住，仅仅因为您的代码有效并不意味着您正在遵循最佳实践。
这就是为什么我总是建议使用W3C 标记验证服务来仔细检查您的代码。
该验证器检查 HTML、XHTML、SMIL、MathML 等 Web 文档的标记有效性：W3c 标记验证服务。
您可以通过复制其 URL 并将其粘贴到站点或上传您的 HTML 文件来仔细检查您的代码。
结论
我希望这篇文章能帮助你了解有关 HTML 最佳实践的一两件事。我尽量只包含最有用的提示，以便你可以立即开始使用它们！
