HTML 是任何网站的支柱。它是人们看到的第一件事。没有它，就没有网站。

因此，坚持良好的编码习惯非常重要。如果不遵循最佳实践，就会给网络用户带来糟糕的用户体验。

无论您是编码新手还是经验丰富的专业人士，HTML 中总会有新的东西需要学习。

在本文中，我们将讨论 HTML 的基本最佳实践。

让我们开始吧。

HTML 最佳实践

HTML 最佳实践 是帮助您创建易于维护和阅读的网站的规则。

构建基于 HTML 的网站时，请牢记以下一些准则：

仅使用一个

一个代码表的元素

HTML 中有六种不同的标题标签， <h1> 从 到 <h6> 。 <h1> 标签是主要标题（网页主题），而 <h6> 标签是最不重要的标题。

标签 <h1> 大于 <h2> 标签， <h2> 标签大于 <h3> 标签，一直到标签 <h6> 。每个标题的大小都根据其重要性而减小。

在一张代码表中 <h1> 使用多个元素非常重要

不要这样做：

Can Coding be fun?
The more you code the better you become



Coding is fun
It is always better when you have fun coding

在上面的例子中，我们 <h1> 在第一个和第二个上使用了标签 <div> 。以这种方式编码是可行的，但尽管您将实现相同的目标，但这不是最佳做法。

这样做：

Can coding be fun?
The more you code the better you become



Coding is fun
It is always better when you have fun coding

网页上 <h1> 只有一个

不要跳过 HTML 中的标题级别

到 <h1> 到 <h2> 到 <h3> 等等 <h4> 进行至关重要

不要使用 <h1> “然后跳转到” <h3> 。当您跳过标题级别时，使用屏幕阅读器的网页访问者很难理解网页内容。

屏幕阅读器是一种帮助视力有障碍的人通过音频或触摸访问和与数字内容（如网站或应用程序）交互的技术。屏幕阅读器的主要用户是盲人或视力非常有限的人。

您可以 在此处阅读有关屏幕阅读器的简介 .

不要这样做：

Coding is fun
It is always better when you have fun coding
Consistency is Key

这样做：

Can coding be fun?
The more you code the better you become
Coding is fun

使用图形元素在 HTML 中为图像添加标题

建议 <figure> 在为图片添加标题时使用 元素。 必须将 元素 <figcaption> 与 <figure> 元素一起使用才能使其发挥作用。

不要这样做：

This is a picture of a man working on his computer

上述示例将按预期工作，但这不是最好的方法。在图像加载失败的情况下， alt 文本和元素上的文本 <p> 。使用屏幕阅读器的 Web 访问者很难区分文本 <p> 和 alt 文本。

一定要记住，仅仅因为您的代码有效并不意味着您遵循了最佳实践。

这样做：

上述示例是向图像添加标题的最佳方式。

以这种方式向图片添加标题非常重要，因为：

• 搜索引擎优化：在搜索引擎上更容易找到您的图像。
• 使用屏幕阅读器的网络访问者将更容易理解您的网页内容。

不要使用 div 来创建页眉和页脚 - 而是使用语义元素

HTML 语义元素以更有意义的方式在网页上标记文档的结构。最佳做法是使用 HTML 语义元素来正确组装网页。

避免使用 <divs> HTML 语义代替。不要使用 <div> 元素来显示网页上的页眉和页脚。请改用语义 <header> 和 <footer> 元素。

该 <header> 元素显示网页的导航或开头部分。

该 <footer> 元素显示有关网页的版权信息或导航链接。

不要这样做：

Home
About
Contact



Home
About
Contact

在上面的例子中，我们使用 <div> 和 的 <header> 容器 <footer> 。以这种方式编码是可行的，但尽管您可以实现相同的目标，但这不是最佳做法。

这样做：

上述示例是将 <footers> 和 <headers> 到您的网页的最佳方式。

添加 <footer> 和 <header> 使用 HTML 语义元素非常重要，因为：

• p36

• p37

查看本文以了解有关 HTML 语义元素 .

避免使用 <b> 和 <i> 在网页上加粗和斜体文本

和 <b> 标签 <i> 也称为粗体和斜体标签。它们都用于突出显示网页上的文本中的单词。

您不应使用 <b> 和 <i> 来表示粗体和斜体，因为它们没有语义含义。请使用 font-weight CSS 属性或使用 <strong> 和 <em> 标签。

您可以使用 <strong> 标签使网页上的文本变得重要。它会突出显示或加粗网页上的文本。标签 <em> 会强调网页中的文本。它还会像标签一样以斜体显示文本 <i> 。

不要这样做：

Code at your own pace


code at your own pace

在上述示例中，显示的文本将以粗体和斜体显示。对于使用屏幕阅读器的 Web 用户来说，它并不重要。它没有语义含义。

规范 HTML5 规定， <b> 只有在没有其他可用标签时才应将 <i> 和

这样做：

Code at your own pace


code at your own pace

不要将块级元素放在行内元素内

块级元素在网页上从新行开始。默认情况下，它们从网页行首延伸到行尾。如果不使用 CSS，您将无法将更多内容内联到块元素中。

、 <p> , <h1>-<h6> 和 <div> 元素是块级元素的一些示例。

内联元素覆盖网页上最小的区域。它们不在网页上的新行上开始。

、 <span> , <em> 和 <a> 元素是内联元素的一些示例。

您不能将块元素放置在内联元素内。

不要这样做：

    
    
 Visit freecodecamp 
    

您不能 <p> 内部 <a> 因为 <p> 它是块级元素并且 <a> 是内联元素。

这样做：

Visit FreecodeCamp 
to learn Javascript

上面的例子是将内联元素嵌套在块级元素内的最佳方式。

值得注意的是：

• 块级元素不能嵌套在内联元素内。
• 内联元素可以嵌套在块级元素内。
• 内联元素和块级元素可以嵌套在块级元素内。

简单说明一下：在上面的例子中，嵌套的意思是放置在内部。因此，当我说它不能嵌套时，我指的是它不能放置在内部。

我希望您理解用于嵌套元素的这三个简单规则。

还可以使用 CSS 将块级元素转换为内联元素，反之亦然。使用 display: inline-block 和 display: inline 将块级元素转换为内联元素。

重要的是要记住，仅仅因为你的代码有效并不意味着你遵循了最佳实践。

这就是为什么我总是建议使用 W3C 标记验证服务 来仔细检查您的代码。

该验证器检查 HTML、XHTML、SMIL、MathML 等 Web 文档的标记有效性： W3c 标记验证服务 .

您可以通过复制其 URL 并将其粘贴到网站上或上传 HTML 文件来仔细检查您的代码。

结论

我希望本文能帮助您了解 HTML 最佳实践。我尝试仅包含最有用的提示，以便您可以立即开始使用它们！

和 LinkedIn： @cessss_ 与我联系 Success

我会尽快回复！谢谢阅读。