tech2022-12-04  10


The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.

以下摘自Alexis Goldstein,Louis Lazaris和Estelle Weyl编写的《现实世界HTML5和CSS3,第二版 》一书。 副本在世界各地的商店中都有出售,或者您可以在此处以电子书形式购买 。

In the previous chapter, we introduced you to a number of syntax changes in HTML5, and touched on some issues related to validation. Let’s expand upon those concepts a little more so that you can better understand how validating pages has changed.

在上一章中,我们向您介绍了HTML5中的许多语法更改,并涉及了一些与验证有关的问题。 让我们进一步扩展这些概念,以便您可以更好地了解验证页面的方式。

The HTML5 validator is no longer concerned with code style. You can use uppercase or lowercase, omit quotes from attributes, exclude optional closing tags, and be as inconsistent as you like, and your page will still be valid.

HTML5验证器不再与代码样式有关。 您可以使用大写或小写字母,省略属性中的引号,排除可选的结束标记,并根据需要保持一致,并且页面仍然有效。

So, you ask, what does count as an error for the HTML5 validator? It will alert you to the incorrect use of elements, elements included where they shouldn’t be, missing required attributes, incorrect attribute values, and the like. In short, the validator will let you know if your markup conflicts with the specification, so it’s still a valuable tool when developing your pages.

所以,你问,这是什么算作对HTML5验证错误? 它将提醒您元素使用不当,元素不应包含在其中,缺少必需的属性,错误的属性值等。 简而言之,验证器将让您知道您的标记是否与规范冲突,因此在开发页面时它仍然是一种有价值的工具。

To give you a good idea of how HTML5 differs from the overly strict XHTML, let’s go through some specifics. This way, you can understand what is considered valid in HTML5:

为了让您更好地了解HTML5与过分严格的XHTML有何不同,让我们详细介绍一下。 这样,您可以了解HTML5中认为有效的内容:

Some elements that were required in XHTML-based syntax are no longer required for a document to pass HTML5 validation; examples include the html and body elements. This happens because even if you exclude them, the browser will automatically include them in the document for you.

文档通过HTML5验证不再需要基于XHTML的语法中必需的某些元素。 示例包括html和body元素。 发生这种情况是因为,即使您排除了它们,浏览器也会自动为您将它们包括在文档中。

Void elements (that is, elements without a corresponding closing tag or without any content) aren’t required to be closed using a closing slash; examples include meta and br.

无效元素(即没有相应结束标记或没有任何内容的元素)不需要使用斜杠关闭; 示例包括meta和br 。

Elements and attributes can be in uppercase, lowercase, or mixed case.


Quotes are unnecessary around attribute values. The exceptions are when multiple space-delimited values are used, or a URL appears as a value and contains a query string with an equals (=) character in it.

属性值周围不需要引号。 例外情况是使用多个以空格分隔的值,或者URL显示为值并且其中包含带有等号(=)字符的查询字符串。

Some attributes that were required in XHTML-based syntax are no longer required in HTML5. Examples include the type attribute for script elements, and the xmlns attribute for the html element.

HTML5不再需要基于XHTML的语法中所需的某些属性。 示例包括script元素的type属性和html元素的xmlns属性。

Some elements that were deprecated and thus invalid in XHTML are now valid; one example is the embed element.

现在,在XHTML中已弃用并因此无效的某些元素现在有效; embed元素就是一个例子。

Stray text that doesn’t appear inside any element but is placed directly inside the body element would invalidate an XHTML document; this is not the case in HTML5.

如果杂散文本没有出现在任何元素内,而是直接放置在body元素内,则会使XHTML文档无效; HTML5中不是这种情况。

Some elements that had to be closed in XHTML can be left open without causing validation errors in HTML5; examples include p, li, and dt.

在XHTML中必须关闭的某些元素可以保持打开状态,而不会引起HTML5中的验证错误。 示例包括p , li和dt 。

The form element isn’t required to have an action attribute.


Form elements, such as input, can be placed as direct children of the form element; in XHTML, another element (such as fieldset or div) was required to wrap form elements.

表单元素(例如input )可以作为form元素的直接子元素放置; 在XHTML中,需要另一个元素(例如fieldset或div )来包装表单元素。

textarea elements are not required to have rows and cols attributes.


The target attribute for links was previously deprecated in XHTML. It’s now valid in HTML5.

链接的target属性先前在XHTML中已弃用。 现在在HTML5中有效。

As discussed earlier in this chapter, block-level elements can be placed inside link (a) elements.

如本章前面所讨论的,可以将块级元素放置在链接( a )元素内。

The ampersand character (&) doesn’t need to be encoded as & if it appears as text on the page.

&字符(&)不需要编码为& 如果它在页面上显示为文本。

That’s a fairly comprehensive, though hardly exhaustive, list of differences between XHTML strict and HTML5 validation. Some are style choices, so you’re encouraged to choose a style and be consistent. We outlined some preferred style choices in the previous chapter, and you’re welcome to incorporate those suggestions in your own HTML5 projects.

这是一个相当全面的列表,尽管并不详尽,但列出了XHTML严格和HTML5验证之间的差异。 有些是样式选择,因此建议您选择一种样式并保持一致。 在上一章中,我们概述了一些首选的样式选择,欢迎您将这些建议纳入您自己HTML5项目中。

注意:更严格的验证工具 (Note: Stricter Validation Tools)

If you want to validate your markup’s syntax style using stricter guidelines, there are tools available that can help you. One such tool is Philip Walton’s HTML Inspector. To use it, you can include the script in your pages during the development phase, then open your browser’s JavaScript console in the developer tools and run the command HTMLInspector.inspect(). This will display a number of warnings and recommendations right inside the console on how to improve your markup. HTML Inspector also lets you change the configuration to customize the tool to your own needs.

如果您想使用更严格的准则来验证标记的语法样式,可以使用一些工具来帮助您。 Philip Walton的HTML Inspector是一种这样的工具。 要使用它,可以在开发阶段将脚本包含在页面中,然后在开发人员工具中打开浏览器JavaScript控制台并运行命令HTMLInspector.inspect() 。 这将在控制台内直接显示许多警告和建议,以帮助您改善标记。 HTML Inspector还允许您更改配置,以根据自己的需要自定义工具。

摘要 (Summary)

By now, we’ve gotten our heads around just about all the new semantic and syntactic changes in HTML5. Some of this information may be a little hard to digest straight away, but don’t worry! The best way to become familiar with HTML5 is to use it—start with your next project. Try using some of the structural elements we covered in the last chapter, or some of the text-level semantics we saw in this chapter. If you’re unsure about how an element is meant to be used, go back and read the section about it, or better yet, read the specification itself. While the language is certainly drier than the text in this book (at least, we hope it is!), the specs can provide a more complete picture of how a given element is intended to be used. Remember that the HTML5 specification is still in development, so some of what we’ve covered is still subject to change in the new HTML5.1 version (or in the HTML5 “living standard,” if you go by the WHATWG’s definition). The specifications will always contain the most up-to-date information.

到目前为止,我们已经掌握了HTML5中所有新的语义和语法更改。 这些信息中的一些信息可能很难立即理解,但是请放心! 熟悉HTML5的最好方法是使用它-从下一个项目开始。 尝试使用上一章介绍的某些结构性元素,或本章介绍的某些文本级语义。 如果不确定如何使用元素,请返回阅读有关该部分的内容,或者更好的是,阅读规范本身。 虽然语言肯定比本书中的文本干燥(至少,我们希望是这样!),但规范可以提供有关打算如何使用给定元素的更完整的描述。 请记住,HTML5规范仍在开发中,因此我们所涵盖的某些内容仍可能在新HTML5.1版本(或按照WHATWG的定义在HTML5“生活标准”中)发生变化。 规范将始终包含最新信息。

In the next chapter, we’ll look at a crucial segment of new functionality introduced in HTML5: forms and form-related features.