如果将该DOM示例表示成HTML代码，头部的结构如下所示：
<head>
<meta name="robots" content="index, follow" />
<title>Hello</title>
</head>
HTML的主体部分如下所示：
<body>
<img src="/images/welcome.jpg" />
<a href="http://google.com">Visit Google</a>
or enter your username and password to continue...
<form id="login" method="post" action="login.php">
<input type="text" name="name" />
<input type="password" name="password" />
<input type="submit" />
</form>
</body>
记住，HTML的这两个部分是同一文档的一部分，我们将它们放在<html>标记中，如下所示：
<html>
<head>
<meta name="robots" content="index, follow" />
<title>Hello</title>
</head>
<body>
<img src="/images/welcome.jpg" />
<a href="http://google.com">Visit Google</a>,
or enter your username and password to continue...
<form id="login" method="post" action="login.php">
<input type="text" name="name" />
<input type="password" name="password" />
<input type="submit" />
</form>
</body>
</html>
当然，实际的Web页面可能与此完全不同，但它们常采用同样的形式。尽管并不总是这样，因为大部分浏览器比较宽容，允许省略一些内容，如末尾的结束标记及开始标记等。不过，笔者不建议这样做，因为后面你还有可能将页面转换成XHTML，而后者要严格得多。因此，闭合每个标记并确保顺序正确是个好习惯。例如，不应将</body>放在</html>后面来闭合文档，因为这样的标记嵌套顺序是不正确的。
同理，应有自关闭没有结束标记的标记的习惯。如<img src="…"/>，它没有匹配的</img>标记，因此，要求在最后的>符号之前有一个/字符以正确关闭它。同样，<br>变成<br />等。
还应记住，标记中的参数必须由单引号或双引号引起来，以实现与XHTML的兼容，尽管几乎所有浏览器都允许省略它。
