在本文中，我们将看看如何开始。让我们从简单的开始，用一个最基本的HTML5页面:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="CSS/styles.css?v=1.0"> </head> <body> <script src="js/scripts.js"></script> </body> </html>
有了基本的模板，现在让我们检查标记的一些重要部分，以及这些部分与在HTML5之前编写HTML的方式有何不同。
Doctype
首先，我们有“文档类型声明”或doctype。 这只是告诉浏览器（或任何其他解析器）正在查看的文档类型的一种方式。 对于HTML文件，它表示HTML的特定版本和风格。
doctype应该始终是任何HTML文件顶部的第一项。 许多年前，doctype声明是一个丑陋且难以记忆的混乱。对于XHTML 1.0 Strict：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML4转换:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
尽管文档顶部的那一长串文本并没有真正伤害到我们(除了迫使我们网站的浏览者下载一些额外的字节之外)，HTML5已经消除了那些难以辨认的碍眼的东西。现在你需要的是:
<!doctype html>
简单而中肯。doctype可以用大写、小写或混合大小写编写。你会注意到“5”在声明中明显缺失。尽管当前的web标记迭代被称为“HTML5”，但它实际上只是以前HTML标准的演化——未来的规范将只是我们今天所拥有的东西的发展。
由于通常要求浏览器支持Web上的所有现有内容，因此无需依靠文档类型来告诉他们给定文档应支持哪些功能。 换句话说，仅doctype不会使您的页面兼容HTML5。 这完全取决于浏览器。
实际上，您可以在页面上使用具有新HTML5元素的这两个旧文档类型之一，并且该页面将呈现与使用新doctype时相同的外观。
HTML元素
下一个HTML文档是HTML元素，它在HTML5中没有显著变化。在我们的示例中，我们将lang属性的值设为en，它指定文档是英文的。在基于xhtml的语法中，需要包含xmlns属性。在HTML5中，这不再是必需的，甚至lang属性对于文档的验证或正确运行也是不必要的。
这就是我们目前的成果，包括关闭的</html>标签:
<!doctype html> <html lang="en"> </html>
head元素
页面的下一部分是<head>部分。head中的第一行定义文档的字符编码。这是自XHTML和HTML4以来简化的另一个元素，是一个可选特性，但推荐使用。在过去，你可以这样写:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
HTML5改进了这一点，将字符编码<meta>标签减少到最少:
<meta charset="utf-8">
在几乎所有情况下，utf-8都是您将在文档中使用的值。对字符编码的完整解释超出了本文的范围，您可能对它也不感兴趣。尽管如此，如果您想更深入地研究，您可以阅读关于W3C或WHATWG的主题。
注意:为了确保所有浏览器都能正确读取字符编码，整个字符编码声明必须包含在文档的前512个字符中。它还应该出现在任何基于内容的元素之前(比如在我们的示例站点中跟随它的<title>元素)。
关于这个主题，我们还有很多可以写的，但是我们想让你保持清醒——所以我们就不告诉你那些细节了!现在，我们满足于接受这个简化的声明，然后进入文档的下一部分:
<title>The HTML5 Herald</title> <meta name="description" content="The HTML5 Herald"> <meta name="author" content="SitePoint"> <link rel="stylesheet" href="css/styles.css?v=1.0">
在这些行中，HTML5与以前的语法几乎没有区别。页面标题(头部中惟一必须的元素)的声明与以前一样，而我们所包含的元标记只是一些可选的示例，用于指示这些标记的位置;您可以在这里放置任意多的有效元元素。
这个标记块的关键部分是样式表，它是使用惯用的link元素包含的。除了href和rel之外，link不需要其他属性。type属性(在旧版本的HTML中很常见)不是必需的，也不需要它来指示样式表的内容类型。
公平竞争
当HTML5被引入时，它包含了许多新元素，比如article和section。您可能认为这是旧浏览器对无法识别的元素的支持的主要问题，但是您错了。这是因为大多数浏览器实际上并不关心您使用什么标记。
如果您有一个HTML文档，其中有一个recipe标记(甚至是一个ziggy标记)，并且您的CSS将一些样式附加到该元素上，那么几乎每个浏览器都会将其当作完全正常的操作，毫无怨言地应用您的样式。
当然，这样的假设文档将无法验证，并且可能存在可访问性问题，但是它将在几乎所有浏览器中正确呈现-Internet Explorer（IE）的旧版本除外。 在版本9之前，IE阻止无法识别的元素接收样式。
这些神秘元素被渲染引擎视为“未知元素”，因此您无法更改它们的外观或行为方式。 这不仅包括我们想象的元素，还包括那些浏览器版本开发时尚未定义的任何元素。 这意味着新的HTML5元素。
好消息是，IE的使用率已经下降了，IE11的全球使用率已经下降到2.7%左右(截至2018年)，在此之前的版本几乎已经从地图上消失了。
但是，如果您确实需要支持古老的浏览器，则仍然可以使用值得信赖的HTML5 Shiv，这是John Resig最初开发的非常简单的JavaScript。 受Sjoerd Visscher的想法启发，它使新的HTML5元素可在IE的旧版本中进行样式设置。
不过，实际上，现在不需要了。所有现代浏览器，甚至是最新的较旧版本都支持HTML5元素。 一个例外是某些浏览器无法识别较新的主要元素。 但是，对于这些浏览器，只要添加适当的样式（例如将其设置为block元素），您仍然可以使用此元素。
接下来就是历史了
查看开始模板的其余部分，我们有常见的body元素及其结束标记和结束html标记。我们还在脚本元素中引用了一个JavaScript文件。
与前面讨论的link标记非常相似，<script>标记不需要声明类型属性。如果你曾经写过XHTML，你可能会记得你的脚本标签是这样的:
<script src="js/scripts.js" type="text/javascript"></script>
由于JavaScript实际上是Web上使用的唯一一种真正的脚本语言，而且所有的浏览器都假定您在使用JavaScript，即使您没有明确声明这一事实，type属性在HTML5文档中是不必要的:
<script src="js/scripts.js"></script>
我们将script元素放在页面的底部，以符合嵌入JavaScript的最佳实践。这与页面加载速度有关;当浏览器遇到脚本时，它将暂停下载并在解析脚本时呈现页面的其余部分。
这将导致在加载任何内容之前在页面顶部包含大型脚本时，页面加载速度看起来要慢得多。这就是为什么大多数脚本应该放在页面的最底部，这样它们只会在页面的其余部分加载之后才会被解析。
然而，在某些情况下(如使用HTML5 shiv)，脚本可能需要放在文档的头部，因为您希望在浏览器开始呈现页面之前生效。
下一步
使HTML5迈上新台阶的一种方法是尝试HTML5 Boilerplate。这个定期更新的资源为您的项目提供了方便的起点，其中包含由数百个世界上最好的程序员建立的所有最新最佳实践。
即使您只是想看一遍代码，看看这些天如何使用某些元素，例如文档头中的各种元元素，也值得下载和签出。
使您的网站或Web应用程序开发更上一层楼的另一种方法是尝试使用当今广泛使用的一种现代框架。
