Validating HTML
Mistakes in HTML5 can cause our web pages to render in ways we are not expecting. They can also cause problems for screen reader technologies that rely on the semantic meaning of HTML elements. Thankfully, there are some really useful tools out there to automate the validation of our HTML document and to keep us from making costly mistakes.
In this section, we will introduce the W3C's Markup Validation Service, an online tool that will validate a web page for us. We will then try out the tool with the help of exercises.
W3C's Markup Validation Service is an online tool that lets us validate a web page. The tool is available at https://validator.w3.org/. Navigating to that URL, we will see the tool as in the following figure:
Figure 1.13: The W3C's Markup Validation Service
There are several options available, depending on how you wish to provide the validator a web page to validate. The options are:
- Validate by URI – choose a publicly accessible URL you wish to validate
- Validate by File Upload – validate a file uploaded from your computer
- Validate by Direct Input – copy and paste code to validate
As well as these input options, you have some more advanced options under the More Options heading, as seen in the following figure:
Figure 1.14: The More Options panel of the W3C's Markup Validation Service
With these options, you can:
- Set the character encoding and document type
- Group error messages
- Show source code
- Set the level of output (verbose)
Once you hit the Check button on the validator, it will run the tool and your results will appear in the results panel. You will either see a message telling you your document is valid or you will see a list of errors describing where the document is invalid and possible reasons.
We will see examples of both these results in the next two exercises.
Exercise 1.03: Validation
In this exercise, we will validate a web page using the W3C's Markup Validation Service. The steps are as follows:
- For this exercise, we need a web page to validate. Create a new file by clicking File > New File. Then, save it in HTML format, by clicking File > Save As...and enter the File name: index.html. Copy the following content into the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Valid HTML document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Valid HTML document</h1>
<p>This document is valid HTML5.</p>
<!--
This document will not throw errors in
W3C's Markup Validation Service
-->
</body>
</html>
- In a browser, navigate to https://validator.w3.org/. This will take you to the W3C's online Markup Validation Service.
- You can validate web pages by URI, file upload, or copy and paste. We will use the file upload method. Click the Validate by File Upload tab.
- Click the Choose file button to select the index.html file.
- Click the Check button.
If all went well, we should see a results page similar to that shown in the following figure, where there is green highlighted text saying Document checking completed. No errors or warnings to show. This means we have a valid HTML document:
Figure 1.15: W3C's Markup Validation Service results page with no errors
Exercise 1.04: Validation Errors
Now we will see what happens if the HTML document does not validate. Here are the steps:
- Firstly, we need a web page with some errors in its source code. Create a new file by clicking File > New File. Then, save it in HTML format, by clicking File > Save As... and enter the File name: index-with-errors.html.
- In index-with-errors.html, we will add the following content:
<html lang="en">
<head>
</head>
<body>
<p>Hello world!</p>
<title>My first web page</title>
</body>
</html>
This HTML document has some problems that should cause validation errors when this page is run through the W3C's validation service.
- Repeat the steps from Exercise 1.03, Validation, uploading the index-with-errors.html file in place of the valid file.
The results should look like the following figure. Each error is flagged with a line number. In our case, there should be three errors because the doctype is missing, a <title> element is expected in the <head> element of the document, and <title> is not allowed as a child of the <body> element. The error messages can point out issues with the content model, such as the <title> element missing in a <head> element, as well as issues where an opening tag does not have a corresponding closing tag:
Figure 1.16: Validation errors in the W3C's Markup Validation Service
The HTML5 standard is pretty robust and tries to handle things such as omitted closing tags, but it is still possible to cause errors with typos or missed tags, and so the validator is a very useful tool. A valid HTML document is likely to be better optimized for performance, cause fewer bugs in JavaScript or CSS, and be easier for web crawlers, search engines, and browsers to understand.
Activity 1.01: Video Store Page Template
We've been tasked with creating a website for an online on-demand film store called Films On Demand. We don't have designs yet but want to set up web page boilerplate that we can use for all the pages on the site.
We will use comments as placeholders to know what needs to change for each page that is built on top of the boilerplate template. For visible content in the body element, we will use lorem ipsum to get an idea of how content will flow.
The following figure shows the expected output for this activity:
Figure 1.17: Expected output for the video store page template
The steps are as follows:
- Create a file named template.html.
- We want the page to be a valid HTML5 document. So, we will need to add the following:
The correct doctype definition.
Elements to structure the document: the html element, the head element, and the body element.
A title element that combines the Films on Demand brand with some specifics about the current page.
Metadata to describe the site – we'll set this to Buy films from our great selection. Watch movies on demand.
Metadata for the page character set and a viewport tag to help make the site render better on mobile browsers.
- We want to add placeholders for a heading (an h1 element) for the page, which we will populate with lorem ipsum and a paragraph for the content flow, which we will also populate with the following lorem ipsum text:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis scelerisque mauris. Curabitur aliquam ligula in erat placerat finibus. Mauris leo neque, malesuada et augue at, consectetur rhoncus libero. Suspendisse vitae dictum dolor. Vestibulum hendrerit iaculis ipsum, ac ornare ligula. Vestibulum efficitur mattis urna vitae ultrices. Nunc condimentum blandit tellus ut mattis. Morbi eget gravida leo. Mauris ornare lorem a mattis ultricies. Nullam convallis tincidunt nunc, eget rhoncus nulla tincidunt sed.
Nulla consequat tellus lectus, in porta nulla facilisis eu. Donec bibendum nisi felis, sit amet cursus nisl suscipit ut. Pellentesque bibendum id libero at cursus. Donec ac viverra tellus. Proin sed dolor quis justo convallis auctor sit amet nec orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."
Note
The solution to this activity can be found on page 572.