构建可维护和可扩展网站的HTML最佳实践
HTML最佳实践可帮助开发人员提供创新且高度交互的网站和Web应用程序。这些最佳实践可帮助您开发功能最丰富且以业务为中心的应用程序。此外，组织可以利用这些最佳实践来提供无缝的用户体验。
今天，当我们谈论HTML时，我们通常会讨论HTML5。 HTML5是一种强大的标记语言，允许Web开发人员创建Web文档。它易于使用和理解，几乎所有浏览器都支持它。此外，它是几乎所有内容管理系统 (CMS) 的基础。
作为经验最少的Web开发人员，诸如“我如何编写更好的HTML？”之类的问题。经常出现。本文旨在帮助您从正确的角度开始。
通用HTML编码方法
您可能已经掌握了这种标记语言，但这里有一些HTML5最佳实践，可以让您更好地编写代码。
总是声明一个文档类型
创建HTML文档时， DOCTYPE声明来通知浏览器您使用的标准。其目的是正确呈现您的标记。例如：
| 版本 | 文档类型声明 |
|---|---|
| HTML 4.01 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| XHTML 1.1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| HTML5 | <!DOCTYPE html> |
<DOCTYPE>声明应位于HTML文档的第一行。以下是其正确和错误写法的比较：
| 最佳实践 | 不良做法 |
|---|---|
|
|
或者，您可以使用与您要使用的HTML/XHTML版本相对应的文档类型。了解推荐的doctype声明列表，以帮助您选择正确的声明。
HTML标签放置
开发人员知道标签的目的是帮助Web浏览器区分HTML内容和普通内容。 HTML标签包含开始标签、内容和结束标签。然而，他们经常对标签的正确放置、需要结束标签的元素或何时省略标签感到困惑。
例如，放置<script>标签的最佳位置在哪里？
脚本标签通常放置在<head>元素内。但是现代HTML最佳实践是将它们放在文档底部，而不是在关闭<body>标记之前，以延迟它们的下载。网页将首先加载文档对象模型 (DOM)，将其显示给用户，然后再请求脚本，从而减少到第一个字节 (TTFB) 的时间。
浏览器从上到下逐行解释您的HTML文档。因此，当它读取头部并遇到脚本标记时，它会向服务器发出请求以获取文件。这个过程本身没有什么问题，但是如果页面加载一个巨大的文件，它会花费很长时间并且极大地影响用户体验。
根元素
在根元素下是<lang>或language属性。此属性有助于将HTML文档翻译成正确的语言。最佳做法是使该属性的值尽可能短。
例如，在日本主要使用日语。因此，定位到日语时不需要国家/地区代码。
| 最佳实践 | 不良做法 |
|---|---|
<html lang="ja"> |
<html lang="ja-JP"> |
HTML中的注意事项
最常见的HTML最佳实践之一是检查该做什么和不该做什么。以下是HTML编码中一些已知的禁忌：
| 描述 | 良好做法 | 不良做法 |
|---|---|---|
| 在文本中，使用Unicode字符的等效HTML代码而不是字符本身。 | <p>Copyright © 2021 W3C<sup>®</sup></p> |
<p>Copyright © 2021 W3C<sup>®</sup></p> |
| 消除标签和属性值周围的空白。 | <h1>HTML5 Best Practices</h1> |
<h1 > HTML5 Best Practices </h1> |
| 练习一致性并避免混合字符大小写。 | <a href="#status">Status</a> |
<a HREF="#status">Status</a> |
| 不要用两个或多个空格分隔属性。 | <input type="text" name="LastName"> |
<input type="text" name="LastName"> |
把事情简单化
与任何编码实践一样，“保持简单”原则非常适用于HTML和HTML5。通常，HTML5与旧的HTML版本和XHTML兼容。因此，我们建议避免使用XML声明或属性。
例如：
<?xml version="1.0" encoding="UTF-8" standalone="yes"?> <!DOCTYPE html>
除非您想编写XHTML文档，否则您不需要这样声明代码。同样，您不需要XML属性，例如：
<p lang="en" xml:lang="en">...</p>
考虑到SEO的代码
开发人员应该考虑到SEO编码。未找到的Web内容也不会编入索引。出于这个原因，以下是一些需要考虑的SEO最佳实践：
添加有意义的元数据
<base>标签是一个方便的标签，但滥用它可能会导致一些不直观的行为。因此，如果你声明了一个基本标签，那么文档中的每个链接都将是相对的，除非明确指定：
<base href="https://www.wbolt.com/" />
此语法更改了某些链接的默认行为。例如，链接到只有页面名称和扩展名的外部网页：
href="coding.org"
或者浏览器会将其解释为：
href="https://www.wbolt.com/coding.org"
这种解释变得混乱，因此始终为链接使用绝对路径更安全。
另一方面，编写元标记描述严格来说并不是HTML最佳实践的一部分，但它仍然同样重要。 <meta name="description">属性是搜索引擎爬虫在索引您的页面时引用的属性，因此它对您的SEO健康至关重要。
设置适当的标题标签
<title>标签使网页搜索引擎友好。 <title>标签内的文本出现在Google的搜索引擎结果页面 (SERP) 和用户的Web浏览器栏和选项卡中。
例如，当您搜索关键字“HTML5”时。此搜索结果中的标题表示特定的标题属性和作者。这在SEO和网站流量生成中非常重要。
图像必须有Alt属性
对<img>元素使用有意义的alt属性是编写有效和语义代码的必要条件。在下表中，不良做法列显示了一个没有alt属性<img>尽管同一列中的第二个示例具有alt属性，但其值没有意义。
良好做法
<img id="logo" src="images/wbolt_logo.png" alt ="wbolt logo" />
不良做法
<img id="logo" src= "images/wbolt_logo.png " /> < img id="logo" src="images/wbolt_logo.png" alt="wbolt_logo.png" />
描述性元属性
元描述是一个HTML元素，用于描述和总结网页的内容。它的目的是让用户找到页面的上下文。尽管元数据不再对SEO排名有帮助，但元描述在页面SEO中仍然起着重要作用。
这是一个示例代码，其中包括关键字、描述、作者姓名和字符集。字符集用于支持几乎所有来自不同语言的字符和符号。另一方面，您可以设置cookie、添加修订日期并允许页面刷新。
<!DOCTYPE html>
<html>
<head>
<title>HTML Best Practices in Website Design</title>
<meta name = "keywords" content = "HTML, Website Design, HTML Best Practices" />
<meta name = "description" content = "Learn about HTML best practices." />
<meta name = "author" content = "John Doe" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Let's learn how to code HTML5!</p>
</body>
</html>
带有链接的标题属性
在锚元素中，最佳实践是使用标题属性来提高可访问性。 title属性增加了锚标签的含义。 <a>标签（或锚元素）与其href属性配对，创建指向网页、电子邮件地址和文件的超链接。它用于链接同一页面内的位置或外部地址。
检查不良实践列下的示例 – 它是多余的。如果用户使用屏幕阅读器阅读锚标记并向听众阅读相同的文本两次，则这种类型的做法很明显。屏幕阅读器是一种辅助技术，提供给视障人士或有学习障碍的人士。作为一种很好的做法，如果您只是重复锚点的文本，那么最好根本不要使用标题。
| 良好做法 | 不良做法 |
|---|---|
<a href="https://www.wbolt.com/themes" title="了解我们的主题.">点击这里</a> |
<a href="https://www.wbolt.com/themes" title="点击这里">点击这里</a> |
HTML代码布局最佳实践
网站开发不仅仅是创建一段文本和标题、 链接页面，您就完成了。有一些HTML中的最佳实践需要考虑以充分利用您的网站。
设置适当的文档结构
HTML文档在没有主要元素的情况下仍然可以工作： <html> 、 <head>和<body> 。但是，如果缺少这些元素，页面可能无法正确呈现。为此，始终如一地使用适当的文档结构很重要。
分组相关部分
对于内容的主题分组，请使用section元素。根据W3C规范， <section>应包含标题（H1、H2 等）。一些开发人员完全跳过标题元素的使用，但我们建议将其包含在内以更好地使用屏幕阅读器：
良好做法
<section> <h1>HTML Best Practices 2021</h1> <ul> <li><img src="img1.jpg" alt="description"></li> <li><img src="img2.jpg" alt="description"></li> </ul> </section>
不良做法
<section> <ul> <li><img src="img1.jpg" alt="description"></li> <li><img src="img2.jpg" alt="description"></li> </ul> </section>
嵌入式内容最佳实践
<embed>标签用作外部资源的容器。这包括网页、图片、视频或插件。但是，您必须考虑到大多数浏览器不再支持Java Applet和插件。更重要的是，任何浏览器都不再支持ActiveX控件，现代浏览器也关闭了对Shockwave Flash的支持。
我们推荐以下内容：
- 对于图片，使用
<img>标签。 - 对于从其他站点提取的 HTML，请使用
<iframe>标记。 - 对于视频或音频，使用
<video>和<audio>标签。
<img>元素中的 alt 属性提供了对搜索引擎和屏幕阅读器有用的图像描述。当无法处理图像时，它对用户特别方便：
| 良好做法 | 不良做法 |
|---|---|
<img alt="HTML Best Practices" src="/img/logo.png"> |
<img src="/img/logo.png"> |
如果有补充文本来解释图像，请将alt属性留空。这是为了避免冗余：
| 良好做法 | 不良做法 |
|---|---|
<img alt="" src="/img/icon/warning.png"> Warning |
<img alt="Warning Sign" src="/img/icon/warning.png"> Warning |
<iframe>元素的内容有一些限制，则将其留空。空的iframe元素总是安全的：
良好做法
< iframe src="/default.html"> </iframe >
不良做法
<iframe src="/default.html"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> </iframe>
<audio>或<video>元素提供后备内容或备份链接，就像处理图像一样。需要回退内容，特别是对于HTML中新引入的元素：
良好做法
<video> <source src="/mov/theme.mp4" type="video/mp4"> <source src="/mov/theme.ogv" type="video/ogg">... <iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe> </video>
不良做法
<video> <source src="/mov/theme.mp4" type="video/mp4"> <source src="/mov/theme.ogv" type="video/ogg">...</video>
减少元素数量
HTML文档变得复杂，尤其是对于包含大量内容的网页。最好将页面上的元素数量减少到您可以管理的数量。了解如何明智地使用标题元素并遵循<h1>到<h6>元素如何表示HTML的内容层次结构。这使您的内容对您的读者、屏幕阅读软件和搜索引擎更有意义。
例子：
<h1>The topmost heading</h1> <h2>This is a subheading that follows the topmost heading.</h2> <h3>This is a subheading that follows the h2 heading.</h3> <h4>This is a subheading that follows the h3 heading.</h4> <h5>This is a subheading that follows the h4 heading.</h5> <h6>This is a subheading that follows the h5 heading.</h6>
对于WordPress开发人员和内容创建者，请使用<h1>元素作为博客文章的标题而不是站点名称。这有助于搜索引擎抓取，并且这种方法对SEO友好。
此外，使用正确的HTML元素传达其包含的信息，以实现语义和有意义的内容结构。例如，使用<em>表示强调，<strong>表示重强调，而不是它们的前辈<i>或<b> ，它们现在已被弃用。
例子：
<em>emphasized text</em> <strong>strongly emphasized text</strong>
同样重要的是，将<p>用于段落，并避免使用<br />在段落之间添加新行。相反，利用 CSS 边距和/或填充属性来更好地定位您的内容。有时，您可能会发现自己很想将<blockquote>标签用于缩进。避免这个陷阱——在引用文本时专门使用它。
布局中的注意事项
最好的HTML最佳实践之一是在页面布局中使用语义适当的元素。几个元素将帮助您按部分组织布局。
由于HTML布局下的主题广泛，最好快速突出布局中的注意事项。例如，HTML赋予页眉和页脚元素更多的语义含义，所以不要忽视<header>标签的使用，因为它在任何给定的部分或文章中都使用过。除了控制<title>和<meta>标签以及文档的其他样式元素之外，它还用于标题、发布日期和页面或部分的其他介绍性内容。同样，您可以摒弃页脚仅属于版权部分的观念——现在，您几乎可以在任何地方使用它。
对于<nav>元素，您应该将其用于站点范围的导航。不需要声明角色，因为标签中已经隐含了用法。
| 良好做法 | 不良做法 |
|---|---|
<nav></nav> |
<nav role="navigation"></nav> |
至于<main>元素，它已经是最新HTML5版本的一部分，它表示文档正文的主要内容。因此，当我们的主要内容有更具体的标签时，就不再需要使用<div>
| 良好做法 | 不良做法 |
|---|---|
<main id="content"></main> |
<div id="content"></div> |
<article>用于内容块。它是独立的，无需进一步解释就有意义，而<section>标签用于将页面划分为不同的主题区域或对单个文章进行分区。不幸的是，许多开发人员仍然交替使用这两者。
考虑到<section>标签是比<article>标签更通用的标签。这意味着前者表示与手头主题相关的内容，但不一定是独立的。相反，后者是一个独立的属性。
但是当没有适合您的目的的标记标签时，您应该使用什么？答案是当没有其他元素起作用或者它是一个特定的风格元素时<div>就我们的目的而言，使用<div>也是一种不好的做法。
让我们回到<section>标签，它是一个语义标记标签。这不是一种风格，重要的是要强调它。实际上，良好的编码实践应该包括标题标签。
<section>的注意事项表明您不应该使用它来标记包装器、容器或任何其他纯粹的风格块。 <section>标签的糟糕编码实践的例子：
<section id="wrapper">
<section class="container-fluid">
<div id="main">
</div>
</section>
</section>
这是一个更好的方法，但它过度使用了<div>标签：
<div id="wrapper">
<div class="container-fluid">
<div id="main">
</div>
</div>
</div>
因此，更好的编码实践是：
<body id="wrapper">
<div class="container-fluid">
<main id="main">
</main>
</div>
</body>
许多布局中一个流行的部分是用于数据表示的<figure>元素主要用于图片。但是，它具有更广泛的可能用途，因为与文档相关的任何内容都可以放置在任何位置并包装在<figure>元素中。一些示例包括书中的插图、表格或图表。
<figure>是一个有趣特性,它不影响文档的大纲。因此，您可以使用它对具有共同主题的元素进行分组——例如，多个图像具有一个共同的<figcaption> ，甚至是一段代码。
<figure>对元素进行分组时，请使用<figcaption> 。 <figcaption>标题应该直接在开始的<figure>标签之后，或者直接在结束的</figure>标签之前：
<figure> <img src="image1.jpg" alt="Bird Image"> <img src="image2.jpg" alt="Tree Image"> <img src="image3.jpg" alt="Sun Image"> <figcaption>Three images related to a topic</figcaption> </figure>
HTML脚本编写最佳实践
HTML是Web开发中的核心技术之一。它具有强大的功能和功能，深受开发人员和企业主的欢迎。前端开发不断创新，为了跟上它，开发人员应该了解HTML脚本编写的最佳实践。
使用外部样式表
内联样式会使您的代码混乱且不可读。为此，始终链接到并使用外部样式表。此外，避免在CSS文件中使用import语句，因为它们会产生额外的服务器请求。
内联CSS和JavaScript也是如此。除了可读性问题之外，这会使您的文档变得更重且更难以维护，因此您可以避免内联代码。
使用小写标记
在代码中使用小写字符是行业标准做法。尽管使用大写或其他文本大小写仍会呈现您的页面，但问题不在于标准化，而在于代码可读性。
代码可读性是编码的一个重要方面，因为它有助于使应用程序可维护和安全。不仅如此，Web开发主要由一个团队组成。使您的代码可读可以使您的工作和您的团队的工作不那么复杂。
良好做法
<div id="test"> <img src="images/sample.jpg" alt="sample" /> <a href="#" title="test">test</a> <p>some sample text </p> </div>
不良做法
<DIV> <IMG SRC="images/sample.jpg" alt="sample"/> <A HREF="#" TITLE="TEST">test</A> <P>some sample text</P> </DIV>
脚本中的注意事项
虽然在编写HTML时有很多禁忌，但我们将分享脚本中的两个基本禁忌：
- 编写缩进且格式一致的代码：干净且编写良好的代码可提高您网站的可读性，这对您的开发人员和可能使用该网站的其他人来说是一个巨大的帮助。它还显示出极大的专业精神和对细节的关注，很好地反映了您作为开发人员的态度。
- 避免包含过多的注释：注释是必不可少的，可以使您的代码更易于理解。但是，HTML语法非常易于解释，因此除非您必须阐明语义和命名约定，否则不需要注释。
验证和最小化代码
验证和最小化代码用于尽早识别错误。不要等到你完成你的HTML文档——养成经常验证和识别错误的习惯。您可以手动进行验证，也可以使用任何已知的验证器工具，例如W3C标记验证器。
同时，通过删除任何不重要的东西（例如注释或空格）来练习缩小。确保编写干净简洁的代码以减小HTML文件的大小。您可以使用HTML Minifier等工具。
小结
许多2021年的HTML5最佳实践资源可在线获取以帮助您。但是，请记住编码的一般规则：一致性。本文提供了基本见解，希望起到抛砖引玉的作用，帮助您开启前端开发之旅。使用本指南，您将很快成为语义正确的HTML5专家。
当您准备好时，超越HTML所能提供的范围，并探索一些用于构建现代单页Web应用程序的开源HTML框架。它们在数据和UI之间提供出色的同步，并与CSS和JavaScript无缝协作。
评论留言