Validating HTML5 Documents - SitePoint

HTML5 Verification: Simplify the code and improve the quality of the web page

Key Points

• HTML5 verification focuses more on the correct use of elements, the accuracy of attribute values ​​and the integrity of required attributes, rather than the code style. It is still a valuable tool to ensure that your tags comply with HTML5 specifications.
• There are many differences between XHTML and HTML5 validation, including optional elements and attributes, case insensitivity, and the effectiveness of previously deprecated elements. It is recommended that you choose a style and maintain consistency throughout your HTML5 project.
• HTML5 verification is critical to ensuring that web pages are correctly formatted and interpreted by the browser, thereby improving performance, reducing errors and improving accessibility. There are a variety of online and offline tools available for HTML5 verification, and stricter verification tools are available for those who wish to adhere to stricter guidelines.

(The following is excerpted from the book "HTML5 & CSS3 for the Real World, 2nd Edition" co-authored by Alexis Goldstein, Louis Lazaris and Estelle Weyl. The book is available in stores around the world, and you can also find it here. Purchase the e-book version. )

In the previous chapter, we introduced some syntax changes in HTML5 and touched on some validation-related issues. Let's expand these concepts in more detail so that you can better understand the changes in how pages are validated.

HTML5 validator no longer focuses on code style. You can use uppercase or lowercase letters, omit quotes in attributes, exclude optional closed tags, and you can be arbitrarily inconsistent, your page will still be valid.

Then, you might ask, what is considered an HTML5 validator error? It will remind you of wrong use of elements, elements that should not be included, missing required attributes, wrong attribute values, and more. In short, the validator will let you know if your tags conflict with the specification, so it is still a valuable tool when developing a page.

To give you an idea of ​​how HTML5 differs from overly strict XHTML, let's look at some details. This way you can understand what is considered valid in HTML5:

In XHTML-based syntax, some elements that are required in XHTML are no longer required in HTML5 to enable the document to pass HTML5; such as html and body elements. This is because even if you exclude them, the browser will automatically include them in the document.

• Empty elements (i.e. elements without corresponding closed tags or without anything) do not need to be closed with closed slashes; for example meta and br.
• Elements and attributes can be uppercase, lowercase, or mixed case.
• No quotation marks are required around the attribute value. The exception is to use multiple space-separated values, or the URL appears as a value and contains a query string with an equal sign (=) character.
• In XHTML-based syntax, some properties that are required in XHTML are no longer required in HTML5. For example, the type attribute of the script element and the xmlns attribute of the html element.
• Some elements that are deprecated in XHTML and therefore invalid are now valid; one example is the embed element.
• Straight text that does not appear in any element but is placed directly in the body element will invalidate the XHTML document; this is not the case with HTML5.
• Some elements that must be closed in XHTML can not be closed in HTML5 without causing validation errors; such as p, li, and dt.
• form element does not require an action attribute.
• The form element (e.g. input) can be used as a direct child of the form element; in XHTML another element (e.g. fieldset or div) is needed to wrap the form element.
• textarea elements do not require rows and cols attributes.
The target attribute of the link is previously deprecated in XHTML. It is now valid in HTML5.
As discussed earlier in this chapter, block-level elements can be placed within the link (a) element.
If the & character (&) appears as text on the page, it does not need to be encoded as &.

This is a fairly comprehensive (though not exhaustive) list of differences between XHTML strict schema and HTML5 validation. Some are style choices, so we encourage you to choose a style and be consistent. We outlined some of the preferred style choices in the previous chapter, and you are welcome to incorporate these suggestions into your own HTML5 project.

Note: Stricter verification tools

If you want to use stricter guidelines to verify the grammatical style of tags, there are some tools you can use to help you. One of the tools is Philip Walton's HTML Inspector. To use it, you can include the script in your page during the development phase, then open the browser's JavaScript console in the developer tools and run the command HTMLInspector.inspect(). This will directly display many warnings and suggestions in the console, explaining how to improve your markup. HTML Inspector also allows you to change configurations to customize tools according to your needs.

Summary

So far, we have learned about almost all the new semantic and syntax changes in HTML5. Some of this information may be difficult to digest at first, but don't worry! The best way to get familiar with HTML5 is to use it – start with your next project. Try using some of the structural elements we introduced in the previous chapter, or some of the text-level semantics we saw in this chapter. If you are not sure what an element is for, go back and read about that section, or, better yet, read the specification itself. While the language is certainly more boring than the text in this book (at least we hope so!), the specification can more fully describe the intended use of a given element. Remember that the HTML5 specification is still under development, so some of the content we've covered can still happen in the new HTML5.1 version (or in the HTML5 "dynamic standard" if you follow the definition of WHATWG) change. The specification will always contain the latest information.

In the next chapter, we will look at the key new features introduced in HTML5: forms and form-related features.

HTML5 Document Verification FAQ (FAQ)

What is HTML5 verification and why it is important?

HTML5 verification is a process of checking web page code according to the formal syntax rules of the HTML5 specification. This is very important because it ensures that your web page is formatted correctly and can be interpreted correctly by the browser. This will lead to better performance, fewer errors, and improved accessibility for users with disabilities. Additionally, it can help with SEO, as search engines prefer well-structured and error-free sites.

How to verify my HTML5 document?

You can use online tools such as W3C tag verification services to verify your HTML5 documents. Simply enter your webpage URL or upload your HTML file and the tool will check it against the HTML5 standard and report any errors or warnings.

What is the least valid HTML5 document?

The minimum valid HTML5 document is the simplest HTML5 document, which still complies with the standards set by the HTML5 specification. It includes document type declaration, root element (html), head element and body element.

What are some common HTML5 verification errors?

Common HTML5 validation errors include missing closed tags, incorrect nesting of elements, use of deprecated elements or attributes, and forgetting to include document type declarations at the beginning of the document.

How to fix HTML5 verification errors?

Fix HTML5 verification errors include correcting code based on error messages provided by the verification tool. This may include adding missing tags, deleting or replacing deprecated elements, or correcting nesting of elements.

What is the role of document type declaration in HTML5 verification?

Document type declaration is the first line of an HTML5 document, which tells the browser which version of HTML is written in. It is crucial for verification because it helps the browser and verification tools interpret the rest of the code correctly.

Can I verify HTML5 documentation that contains CSS and JavaScript?

Yes, you can verify HTML5 documents that contain CSS and JavaScript. However, verification only checks the HTML code. For CSS and JavaScript, you need to use a separate verification tool.

What are the advantages of using HTML5 validators?

Using HTML5 validator can help you catch and fix errors before they cause problems. It can improve your website's performance, accessibility, and search engine rankings. It is also a great way to learn more about HTML and improve your coding skills.

Can I verify HTML5 documents offline?

Yes, there are tools that allow you to verify HTML5 documents offline. These tools include software applications and command-line tools that you can install on your computer.

What is the difference between HTML5 verification and HTML5 consistency checking?

HTML5 validation is about checking the syntax of code according to HTML5 specification. Consistency checking, on the other hand, is about making sure your web pages follow best practices in web design and accessibility, and syntax correct.

The above is the detailed content of Validating HTML5 Documents - SitePoint. For more information, please follow other related articles on the PHP Chinese website!