Key Takeaways
- HTML5 validation is less concerned with code style and focuses more on the correct use of elements, correct attribute values, and missing required attributes. It remains a valuable tool for ensuring your markup is in compliance with the HTML5 specification.
- There are numerous differences between XHTML and HTML5 validation, including optional elements and attributes, case insensitivity, and the validity of previously deprecated elements. It’s recommended to choose a style and maintain consistency throughout your HTML5 projects.
- HTML5 validation is crucial for ensuring web pages are correctly formatted and can be interpreted by browsers, leading to better performance, fewer errors, and improved accessibility. There are various online and offline tools available for HTML5 validation, with stricter validation tools available for those wanting to adhere to more rigorous guidelines.
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.
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.
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.
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.
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:
-
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
andbr
. -
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.
-
Some attributes that were required in XHTML-based syntax are no longer required in HTML5. Examples include the
type
attribute forscript
elements, and thexmlns
attribute for thehtml
element. -
Some elements that were deprecated and thus invalid in XHTML are now valid; one example is the
embed
element. -
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. -
Some elements that had to be closed in XHTML can be left open without causing validation errors in HTML5; examples include
p
,li
, anddt
. -
The
form
element isn’t required to have anaction
attribute. -
Form elements, such as
input
, can be placed as direct children of theform
element; in XHTML, another element (such asfieldset
ordiv
) was required to wrap form elements. -
textarea
elements are not required to haverows
andcols
attributes. -
The
target
attribute for links was previously deprecated in XHTML. It’s now valid in HTML5. -
As discussed earlier in this chapter, block-level elements can be placed inside link (
a
) elements. -
The ampersand character (&) doesn’t need to be encoded as
&
if it appears as text on the page.
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.
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.
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.
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.
In the next chapter, we’ll look at a crucial segment of new functionality introduced in HTML5: forms and form-related features.
Frequently Asked Questions (FAQs) about Validating HTML5 Documents
What is HTML5 validation and why is it important?
HTML5 validation is the process of checking a web page’s code against the formal grammar rules of the HTML5 specification. It’s crucial because it ensures that your web pages are correctly formatted and can be properly interpreted by browsers. This leads to better performance, fewer errors, and improved accessibility for users with disabilities. Moreover, it can also help with SEO, as search engines prefer well-structured and error-free websites.
How can I validate my HTML5 document?
You can validate your HTML5 document using online tools like the W3C Markup Validation Service. Simply enter the URL of your web page or upload your HTML file, and the tool will check it against the HTML5 standards and report any errors or warnings.
What is a minimally valid HTML5 document?
A minimally valid HTML5 document is the simplest possible HTML5 document that still meets the standards set by the HTML5 specification. It includes a doctype declaration, a root element (html), a head element, and a body element.
What are some common HTML5 validation errors?
Common HTML5 validation errors include missing closing tags, incorrect nesting of elements, using deprecated elements or attributes, and forgetting to include the doctype declaration at the beginning of the document.
How can I fix HTML5 validation errors?
Fixing HTML5 validation errors involves correcting the code based on the error messages provided by the validation tool. This might involve adding missing tags, removing or replacing deprecated elements, or correcting the nesting of elements.
What is the role of the doctype declaration in HTML5 validation?
The doctype declaration is the first line of an HTML5 document and it tells the browser which version of HTML the page is written in. It’s crucial for validation because it helps the browser and the validation tool interpret the rest of the code correctly.
Can I validate HTML5 documents that include CSS and JavaScript?
Yes, you can validate HTML5 documents that include CSS and JavaScript. However, the validation will only check the HTML code. For CSS and JavaScript, you would need to use separate validation tools.
What are the benefits of using an HTML5 validator?
Using an HTML5 validator can help you catch and fix errors before they cause problems. It can improve the performance, accessibility, and search engine ranking of your website. It’s also a great way to learn more about HTML and improve your coding skills.
Can I validate HTML5 documents offline?
Yes, there are several tools available that allow you to validate HTML5 documents offline. These include software applications and command-line tools that you can install on your computer.
What is the difference between HTML5 validation and HTML5 conformance checking?
HTML5 validation is about checking the syntax of your code against the HTML5 specification. Conformance checking, on the other hand, is about ensuring that your web pages follow best practices for web design and accessibility, in addition to being syntactically correct.
Louis is a front-end developer, writer, and author who has been involved in the web dev industry since 2000. He blogs at Impressive Webs and curates Web Tools Weekly, a newsletter for front-end developers with a focus on tools.