和 JavaScript、CSS 比较，HTML 经过三十多年的开展，好像逐步走进无人问津的旮旯，怎么才能让 HTML 再次回到人们视界的中心。
作者 | Yaser Adel Mehraban
译者 | 谭开畅，责编 | 屠敏
出品 | CSDN（ID：CSDNnews）
以下为译文：
有多少次，身为开发者的你编写了一个HTML块而没有意识到或许编码得并不抱负?
为什么
HTML一向处于无人问津的旮旯，由于JavaScript和CSS总是招引人们的留意力。
请在脑海里先保存这种形象，由于我要用一些简略的技巧来发挥作用，让HTML再次回到人们视界的中心。
以下是创立一望而知、可保护和可扩展的代码的一些办法，其很好的应用了HTML5的语义符号元素，并将在支撑的浏览器中正确呈现。
其缘由就不赘述了，让咱们来看看具体是什么吧。
文档类型
在index.html的顶部方位，请保证声明晰DOCTYPE。这将在一切浏览器中激活标准方式，并奉告浏览器该怎么编译文档。请记住DOCTYPE不是HTML元素。
HTML5是这样的：
<!DOCTYPE html>留意:假如应用了结构，这已预先写好。假如没有，我强烈主张运用像Emmet这样的代码片段，它在VS代码中可用。
想了解更多关于其他文档类型的信息吗?点击这儿检查参阅文件：https://html.com/tags/doctype/。
可选标签
有些标签在HTML5中是可选的，首要是由于元素是隐式呈现的。信不信由你，你能够省掉<html>标签，而页面呈现得也很好。
<!DOCTYPE HTML><head><title>Hello</title></head><body><p>Welcome to this example.</p></body></html>上面是一个有用的HTML，但在某些情况下就不能这样做了。例如标签后边跟着注释：
<!DOCTYPE HTML><!-- where is this comment in the DOM? --><head><title>Hello</title></head><body><p>Welcome to this example.</p></body></html>上面是无效的，由于注释坐落<thml>标签之外，解析树发生了更改。
完毕标签
应一直记住完毕标签，不然某些浏览器在呈现页面时会呈现问题。出于可读性和其他原因，主张保存这些内容，稍后我会具体介绍。
<div id="example"><img src="example.jpg" alt="example" /><a href="#" title="test">example</a><p>example</p></div>以上都是有用的标签，但也有一些特例，如下。
自闭合标签是有用的，但不是必需的。这些元素包含:
<br>, <hr>, <img>, <input>, <link>, <meta>,<area>, <base>, <col>, <command>, <embed>, <keygen>, <param>, <source>, <track>, <wbr>留意:一般元素永久不能有自闭合标签。
<title />上面显然是无效的。
字符集
预先界说字符集。最好是将它放在顶部元素中。
<head><title>This is a super duper cool title, right ?</title><meta charset="utf-8"></head>上面是无效的，标题无法正确呈现。正确写法是将字符集移到顶部方位。
<head><meta charset="utf-8"><title>This is a super duper cool title, right ?</title></head>言语
不疏忽可选标签的另一个原因是在运用特点时。在这种情况下，咱们应该界说web页面的言语，这关于可拜访性和查找十分重要。
<html lang="fr-CA">...</html>标题
永久不要疏忽标题标签，不然可拜访性太差了。我个人就永久不会运用这样的网站,由于我刚翻开它即刻在20多个页面后就找不到了(浏览器选项卡不会有任何显现)。
base标签
这是一个十分有用的标签，应该慎重运用。它将设置应用程序的根本URL。一旦设置好，一切链接都将相关于这个根本URL，这或许会导致一些不必要的行为:
<base href="http://www.example.com/" />经过以上设置，href="#internal"将被编译为href=http://www.example.com/#internal。或许href="example.org"将被编译为href="http://www.example.com/example.org"。
描绘
这个meta标签十分有用，尽管严格来说它不是最佳写法。但在查找引擎时，这是超级有用的。
<meta name="description" content="HTML best practices">这有一个帖子“查找引擎优化正盛行”：https://yashints.dev/blog/2019/06/11/seo-tips。
语义标签
尽管能够运用div创立UX工程师的线框，但这并不意味着有必要这样做。语义HTML为页面供给了含义，而不单纯是内容显现。像p、section、h{1-6}、main、nav等标签都是语义标签。假如运用p标签，用户将知道这表明一段文本，浏览器也知道怎么展现它们。
语义HTML超出了本文的规模。可是咱们应该进行检查，就比方写作所用的笔，而咱们有鼠标。
hr不应该用于格式化
<hr>不是格式化元素，所以不要用它来格式化内容。在HTML5中，这个标签代表了内容的主题别离。正确的用法是这样的:
<p>Paragraph about puppies</p><p>Paragraph about puppies' favourite foods</p><p>Paragraph about puppies' breeds</p><hr><p>Paragraph about why I am shaving my head </p>运用title特点时要当心
title特点是一个功能强大的东西，它能够协助说明页面上元素的操作或意图，比方东西提示。可是，它不能与图画上的alt等其他特点交换。
HTML 5 标准道:
现在不鼓舞依靠title特点，由于许多用户署理不依照标准的拜访方法来露出该特点（例如，运用鼠标等设备来唤出提示框，而不包含只用键盘或触控键盘的用户，或许现代手机或平板电脑）。
请阅览有关怎么正确运用此特点的更多信息：https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute。
单引号或双引号
我见过的许多代码库，他们的符号中混合了这两种方式。这并不好，特别是当你运用一个依靠于单引号的结构时，比方php，当你在一个语句中运用单引号时，就像我现在做的相同。另一个原因是保持一致，这总是好的。不要这样写:
<img alt="super funny meme" src='/img/meme.jpg'>而写为：
<img alt="super funny meme" src="/img/meme.jpg">省掉布尔值
当涉及到特点的布尔值时，主张省掉，由于它们不增加任何值，还会增加符号的权重。
public class MyActivity extends AppCompatActivity {<audio autoplay="autoplay" src="podcast.mp3"><!-- instead --><audio autoplay src="podcast.mp3">省掉类型特点
不需要向scriptand款式标签增加type特点。某些服务(如W3C的符号验证东西)还会呈现验证过错。
验证符号
能够运用W3C的符号验证等服务以保证有用的符号。
回绝内联款式
HTML中写的是内容，其怎么展现取决于款式。将展现方式留给CSS吧，不要运用内联款式，这将有利于开发人员和浏览器了解你的符号。
总结
这些仅仅编写标签时要记住的冰山一角。还有许多很好的资源能够让你深化了解，强烈主张你重复阅览。
《GitHub HTML最佳实践》：https://github.com/hail2u/html-best-practices
《W3C School HTML款式攻略》：https://www.w3schools.com/html/html5_syntax.asp
期望你喜爱本文，并能写出高雅的标签。
原文：https://dev.to/yashints/let-s-write-html-like-a-pro-28h5
本文为 CSDN 翻译，转载请注明来历出处。
【END】