前言
HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。本文章意在告诉大家如何写出便于开发，适配移动端，便于SEO优化的HTML文档。
规范
-
【建议】HTML标签最好仅使用小写字母。虽然HTML 标签不区分大小写，不过，从一致性、可读性等各方面来说，最好仅使用小写字母。
-
【建议】在我们的HTML代码中，我们让每一个嵌套的元素以两个空格缩进。 你使用什么风格来格式化你的代码取决于你 (比如所对于每层缩进使用多少个空格)，但是你应该坚持使用某种风格。
-
【必要】我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束（因为文本编辑）。
| 原义字符 | 等价字符引用 |
|---|---|
| < | `<` |
| > | `>` |
| " | `"` |
| ' | `'` |
| & | `&` |
提示: 维基百科上有一个包含所有可用HTML字符实体引用的列表：XML和HTML字符实体引用列表。
-
【必要】勤写注释。注释是被浏览器忽略的，而且是对用户不可见的，它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。
-
【建议】
<div>非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用， 否则文档的升级和维护工作会非常困难。 -
【必要】元素
<id>必须保证页面唯一。
元数据：元素
-
【必要】指定文档中字符编码——
<meta charset="utf-8">。utf-8是一个通用的字符集，它包含了任何人类语言中的大部分的字符。 -
【建议】添加作者和描述。许多
<meta>元素包含了name和content特性：-
name指定了meta 元素的类型； 说明该元素包含了什么类型的信息。 -
content指定了实际的元数据内容。
这两个meta 元素对于定义你的页面的作者和提供页面的简要描述是很有用的 ，因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多 （这些行为术语上被称为 Search Engine Optimization, or SEO.）。
-
在HTML中应用CSS和JavaScript
- 【建议】
<link>元素经常位于文档的头部，<script>放在文档的尾部（在</body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（如果脚本加载某个不存在的元素，浏览器会报错）。。
为文档设置主语言
-
【必要】值得一提的是可以（而且有必要）为站点设定语言， 这个可以通过添加
lang属性到HTML开始标签中来实现。<html lang="zh-CN">如果你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引 (例如，允许它在特定于语言的结果中正确显示)，对于那些使用屏幕阅读器的视障人士也很有用(比如， 法语和英语中都有“six”这个单词，但是发音却完全不同)。
编辑结构层次
-
【建议】最好只对每个页面使用一次
<h1>— 这是顶级标题，所有其他标题位于层次结构中的下方。 -
【建议】确保在层次结构中以正确的顺序使用标题。不要使用
<h3>来表示副标题，后面跟<h2>来表示副副标题 - 这是没有意义的，会导致奇怪的结果。 -
【建议】在可用的六个标题级别中，应该在每页使用不超过三个，除非认为有必要使用更多。具有许多级别的文档（即，较深的标题层次结构）变得难以操作并且难以导航。
强调
- 【建议】如果没有更合适的元素，那么使用
<b>、<i>或<u>来表达传统上的粗体、斜体或下划线表达的意思是合适的。然而，始终拥有可访问性的思维模式是至关重要的。
<i>被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
<b>被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
<u>被用来传达传统上用下划线表达的意义：专有名词，拼写错误……
使用下划线的忠告：因为我们常常会认为网页中的下划线代表着一个超链接**，**所以最好只用下划线来代表超链接。而在语义适合的情况下不得不使用
<u>元素时，可以使用CSS来改变<u>元素对应的下划线的默认样式，从而和超链接的下划线区分开来。
链接
-
【建议】不要重复URL作为链接文本的一部分——URL看起来很丑，当屏幕朗读器一个字母一个字母的读出来的时候听起来就更丑了。
-
【建议】不要在链接文本中说**“链接”或“链接到”**——它只是噪音。
-
【建议】保持你的链接标签尽可能短——长链接尤其惹恼屏幕阅读器用户，他们必须听到整件事读出来。
-
【必要】尽可能使用相对链接。
-
检查代码要容易得多——相对URL通常比绝对URL短得多，这使得阅读代码更容易。
-
如果你使用绝对URL而不是相对URL，你就会不断地让你的浏览器做额外的工作，这意味着它的效率会降低。
-
-
【建议】链接到非HTML资源 ——留下清晰的指示。当链接到一个需要下载的资源（如PDF或Word文档）或流媒体（如视频或音频）或有另一个潜在的意想不到的效果（打开一个弹出窗口，或加载Flash电影），你应该添加明确的措辞，以减少任何混乱。
-
在下载链接时使用 download 属性。当您链接到要下载的资源而不是在浏览器中打开时，您可以使用 download 属性来提供一个默认的保存文件名（译注：此属性仅适用于同源URL）。
缩略语
-
【建议】在web上看到的相当常见的元素是
<abbr>——它常被用来包裹一个缩略语或缩写，并且提供缩写的解释（包含在title属性中）。我们使用 HTML 来组织网页文档。
第 33 届 奥运会 将于 2024 年 8 月在法国巴黎举行。
标记联系方式
- 【建议】HTML有个用于标记联系方式的元素——
<address>。它仅仅包含你的联系方式。
标记时间和日期
-
【建议】
<time>元素允许你附上清晰的、可被机器识别的 时间/日期来实现这种需求。
图片
-
【建议】嵌入图片时，建议使用相对路径或者绝对URL。
-
【必要】大多数图片是有版权的。不要在你的网页上使用一张图片，除非：
-
你是图片版权所有者
-
你有图片版权所有者明确的、书面上的使用授权
-
你有充分的证据证明这张图片是公共领域内的
-
-
【建议】重要图片需要添加
alt属性。它的值应该是对图片的文字描述，用于在图片无法显示或不能被看到的情况。 -
【建议】不应该使用HTML属性来改变图片的大小，应该使用图形编辑器使图片的尺寸正确。
-
【建议】不推荐添加图片标题
title，因为屏幕阅读器的支持是不可预测的，大多数浏览器都不会显示它。 -
【建议】为图片（视频、音频等）提供文字说明推荐使用
<figure>和<figcaption>元素。它为图片提供一个语义容器，在标题和图片之间建立清晰的关联。
曼彻斯特大学博物馆展出的一只霸王龙的化石
音频和视频
-
【建议】使用多个播放源以提高兼容性。
<video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p></video> -
【建议】建议添加上
<source>标签页type属性。它包含了视频文件的 MIME types ，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加type属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，这样会消耗掉大量的时间和资源。
