功能型网站建设

HTML最佳实践可以帮助开发人员提供创新和高度互动的网站和网络应用程序。这些最佳实践可以帮助您开发功能最丰富、以业务为中心的应用程序。此外，组织可以利用这些最佳实践来提供无缝的用户体验。

今天，当我们谈论HTML时，我们通常会讨论HTML5。HTML5是一种强大的标记语言，允许Web开发人员创建Web文档。它易于使用和理解，几乎所有的浏览器都支持它。此外，它是几乎所有内容管理系统的基础。

作为经验最少的Web开发人员，比如“如何才能写出更好的HTML？”像这样的问题。频繁出现。本文旨在帮助你从正确的角度出发。

通用HTML编码方法

考虑到SEO的代码

HTML代码布局最佳实践

HTML脚本最佳实践

并验证和最小化代码。

您可能已经掌握了这种标记语言，但这里有一些HTML5最佳实践，可以让您更好地编写代码。

总是声明一个文档类型。

创建HTML文档时，会声明DOCTYPE，以告知浏览器您使用的标准。它的目的是正确地展示你的标记。例如:

声明应该在HTML文档的第一行。以下是其正误写法对比:

或者，您可以使用与您想要使用的HTML/XHTML版本相对应的文档类型。了解推荐的doctype语句列表，以帮助您选择正确的语句。

开发人员知道标记的目的是帮助Web浏览器区分HTML内容和普通内容。HTML标签包含开始标签、内容标签和结束标签。然而，他们经常对标签的正确位置、需要结束标签的元素或者何时省略标签感到困惑。

例如，哪里是放置标签的最佳位置？

脚本标签通常放在元素内部。但是现代HTML的最佳实践是将它们放在文档的底部，而不是在关闭标记以延迟下载之前。网页将首先加载文档对象模型，显示给用户，然后请求脚本，从而将时间减少到第一个字节。

浏览器从上到下逐行解释你的HTML文档。因此，当它读取头并遇到脚本标记时，它将向服务器发出请求以获取文件。这个过程本身没有问题，但是如果页面加载一个巨大的文件，时间会很长，会极大的影响用户体验。

根元素下是或语言属性。该属性有助于将HTML文档翻译成正确的语言。最佳实践是使该属性的值尽可能短。

比如日本主要用日语。因此，导航到日语时不需要国家代码。

HTML中的注释最常见的HTML最佳实践之一是检查什么该做，什么不该做。以下是HTML编码中一些已知的禁忌:

保持简单就像任何编码实践一样，“保持简单”的原则非常适用于HTML和HTML5。一般来说，HTML5兼容旧的HTML版本和XHTML。因此，我们建议避免XML声明或属性。

例如:

除非你想写XHTML文档，否则不需要这样声明代码。同样，您不需要XML属性，例如:

开发者应该考虑SEO编码。找不到的Web内容将不会被编入索引。因此，这里有一些SEO最佳实践可以考虑:

标签是一个方便的标签，但是滥用它可能会导致一些不直观的行为。因此，如果您声明了一个基本标记，那么文档中的每个链接都将是相对的，除非明确指定:

这个语法改变了一些链接的默认行为。例如，链接到只有网页名称和扩展名的外部网页:

否则浏览器会将其解释为:

这种解释变得令人困惑，所以总是使用绝对路径链接更安全。

另一方面，编写元标签描述严格来说并不是HTML最佳实践的一部分，但它仍然同样重要。属性是搜索引擎爬虫在索引你的页面时参考的属性，所以它对你的SEO健康至关重要。

让标签对网络搜索引擎友好。标签中的文本出现在谷歌的搜索引擎结果页面和用户的网页浏览器栏和标签中。

比如你搜索关键词“HTML5”的时候。该搜索结果中的标题指示特定的标题属性和作者。这在SEO和网站流量生成中非常重要。

在元素上使用有意义的alt属性是编写有效的语义代码的必要条件。在下表中,“不良实践”列显示了一个没有alt属性的示例。虽然同一列中的第二个示例具有alt属性，但它的值没有意义。

元描述是一个HTML元素，用于描述和总结网页的内容。它的目的是让用户找到页面的上下文。虽然元数据对SEO排名不再有帮助，但是元描述在页面SEO中仍然起着重要的作用。

这是一个示例代码，包括关键字、描述、作者姓名和字符集。字符集用于支持不同语言的几乎所有字符和符号。另一方面，您可以设置cookie，添加修订日期并允许页面刷新。

在锚元素中，最佳实践是使用title属性来提高可访问性。title属性增加了锚标记的含义。与它的href属性一起创建指向网页、电子邮件地址和文件的超链接。它用于链接同一页面中的位置或外部地址。

检查“不良实践”栏下的示例，该示例是多余的。如果用户使用屏幕阅读器阅读锚点标记，并向观众朗读两次相同的文本，这种类型的做法是显而易见的。屏幕阅读器是一种辅助技术，提供给有视觉障碍或学习障碍的人。作为一个好的做法，如果你只是重复锚点的文字，那么最好根本不用标题。

网站开发不仅仅是创建一段文字和标题，链接页面，你就大功告成了。有一些HTML方面的最佳实践可以考虑，以充分利用您的网站。

没有主要元素:和，HTML仍然可以工作。但是，如果缺少这些元素，页面可能无法正确呈现。因此，始终如一地使用适当的文档结构非常重要。

对于内容的主题分组，使用section元素。根据W3C规范，应该包含标题。有些开发人员完全忽略了title元素的使用，但是我们建议将它包括在内，以便更好地利用屏幕阅读器:

标签被用作外部资源的容器。这包括网页、图片、视频或插件。但是，您必须考虑到大多数浏览器不再支持Java Applet和插件。更何况，任何浏览器都不再支持ActiveX控件，现代浏览器都关闭了对Shockwave Flash的支持。

我们建议如下:

对于图片，使用标签。

对于从其他网站提取的HTML，请使用标签。

对于视频或音频，请使用和标记。

元素中的alt属性为搜索引擎和屏幕阅读器提供了有用的图像描述。当图像无法处理时，对用户来说特别方便:

如果有补充文字说明图像，请将alt属性留在空。这是为了避免冗余:

元素的内容有一些限制，就留在空吧。空的iframe元素总是安全的:

或者元素提供备份内容或者备份链接，就像处理图像一样。内容需要回滚，特别是对于HTML中新引入的元素:

HTML文档变得复杂，尤其是对于有大量内容的网页。最好将页面上的元素数量减少到您可以管理的数量。了解如何明智地使用标题元素，并遵循元素如何表示HTML的内容层次结构。这使得你的内容对你的读者、读屏软件和搜索引擎更有意义。

示例:

对于WordPress开发者和内容创建者，请使用元素作为博客文章的标题，而不是网站名称。这有助于搜索引擎抓取，这种方法是SEO友好的。

此外，使用正确的HTML元素来传达其包含的信息，从而实现语义和有意义的内容结构。例如，它们用来强调，强调，而不是他们的前辈或，他们现在被遗弃了。

使用for段落并避免使用
在段落之间添加新行也很重要。相反，利用CSS边距和/或填充属性来更好地定位内容。有时，您可能会发现自己很想使用标签进行缩进。避免这个陷阱——在引用文本时特别使用它。

HTML的最佳实践之一是在页面布局中使用语义适当的元素。几个元素将帮助您按部分组织布局。

由于HTML布局下的主题范围很广，最好快速突出布局中的注意事项。例如，HTML赋予页眉和页脚元素更多的语义，所以不要忽视标签的使用，因为它已经在任何给定的部分或文章中使用。除了控件、标签和文档的其他样式元素，它还用于页面或部分的标题、发布日期和其他介绍性内容。同样，你可以摆脱页脚只属于版权部分的想法——现在，你几乎可以在任何地方使用它。

对于元素，您应该将它们用于站点范围的导航。不需要声明角色，因为用法已经隐含在标签中。

至于元素，它已经是最新HTML5版本的一部分，它代表了文档体的主要内容。所以，当我们的主要内容有了更具体的标签，就没必要再用了。

用于内容块。它是独立的，有意义的，无需进一步解释，而标签用于将页面划分为不同的主题区域或划分单独的文章。不幸的是，许多开发人员仍然交替使用这两者。

考虑到标签比标签更通用。这意味着前者代表的是与手头话题相关的内容，但不一定是独立的。相反，后者是一个独立的属性。

但是在没有适合自己用途的划线标签的情况下，应该用什么呢？答案是，当其他元素都不起作用或者它是一个特定的样式元素时，对于我们的目的来说，这也是一个糟糕的实践。

让我们回到标签，这是一个语义标签tag。这不是风格，重要的是强调。事实上，良好的编码实践应该包括标题标签。

的注释指示您不应该使用它来标记包装、容器或任何其他纯样式块。标签不良编码实践的例子:

这是一个更好的方法，但是它过度使用了标签:

因此，更好的编码实践是:

许多布局的一个流行部分是，用于数据表示的元素主要用于图片。但是，它有更广泛的可能用途，因为任何与文档相关的东西都可以放在任何地方，并包装在元素中。一些例子包括书中的插图、表格或图表。

是一个有趣的特性，它不影响文档的轮廓。因此，您可以使用它来对具有共同主题的元素进行分组——例如，多个图像具有共同的甚至是一段代码。

对元素进行分组时，使用。标题应该紧接在开始标签之后或结束标签之前:

HTML是Web开发的核心技术之一。具有强大的功能和作用，深受开发者和企业主的喜爱。前端开发不断创新，为了跟上它，开发人员应该知道HTML脚本的最佳实践。

内联样式会使你的代码混乱和不可读。为此，请始终链接并使用外部样式表。此外，避免在CSS文件中使用import语句，因为它们会生成额外的服务器请求。

内联CSS和Javascript也是如此。除了可读性问题，这将使你的文档更重，更难维护，所以你可以避免内联代码。

在代码中使用小写字符是行业标准惯例。虽然使用大写或其他文本大小写仍然会呈现您的页面，但问题不是标准化，而是代码可读性。

可读性是编码的一个重要方面，因为它有助于应用程序的可维护性和安全性。不仅如此，Web开发主要由一个团队组成。让你的代码可读可以让你和你的团队的工作不那么复杂。

虽然写HTML时有很多禁忌，但我们会在脚本中分享两个基本禁忌:

用一致的格式编写缩进式代码:干净且编写良好的代码可以提高你的网站的可读性，这对你的开发者和其他可能使用网站的人来说是一个很大的帮助。也表现出了极大的专业性和对细节的关注，很好的体现了你作为开发者的态度。

避免包含太多的注释:注释是使代码更容易理解的必要条件。然而，HTML语法非常容易解释，所以不需要注释，除非你必须阐明语义和命名约定。

并且验证和最小化代码用于尽可能早地识别错误。不要等到你完成你的HTML文档，养成经常检查和识别错误的习惯。您可以手动验证它，也可以使用任何已知的验证工具，比如W3C tag verifier。

同时，通过删除任何不重要的东西来练习缩小。确保编写干净简洁的代码来减小HTML文件的大小。可以使用HTML Minifier之类的工具。

许多2021年HTML5最佳实践资源可在线获得，以帮助您。但是，请记住编码的一般规则:一致性。本文提供基本见解，希望能起到抛砖引玉的作用，帮助你开启前端开发之旅。使用这个指南，你将很快成为一个语义正确的HTML5专家。

当您准备好了，就超越HTML所能提供的范围，探索一些用于构建现代单页面Web应用程序的开源HTML框架。它们在数据和用户界面之间提供了极好的同步，并且可以与CSS和Javascript无缝协作。