Question
Correcting HTML Errors
Note to instructors and students: From this point forward, the exercises at the end of the chapter use <div id="main"> to identify the main content in the wireframe instead of <main> tag. Using <div
id="main"> accommodates browsers that may not yet support the semantic <main> tag.
Instructions: Open your HTML editor and then open the analyze02.html file from the Data Files for Students. Ten HTML5 best practices are listed in the body section of this webpage, but the
page contains many errors identified with callouts in Figure 2–35. You will use the W3C validator at validator.w3.org to find and correct the HTML errors on the webpage as instructed.
1. Correct
a. Open the analyze02.html file in your HTML editor.
b. Open a browser and go to the W3C validator at http://validator.w3.org.
c. Using either the Validate by File Upload or Validate by Direct Input method, validate the analyze02.html file. (Hint: To use the Validate by Direct Input method,
tap or click that tab and then copy and paste the code from analyze02.html directly into the ‘Validate by direct input’ box.)
The validator returns a message that it found several errors and warnings.
d. Scroll down the validation webpage to the “Validation Output” section. The first two errors refer to Line 1, the DOCTYPE statement.
Correct the DOCTYPE statement in your analyze02.html file. It should include a leading exclamation point character, as in <!DOCTYPE html>.
e. Save and revalidate the updated page. The validator returns a message that it found several errors and warnings. Fixing the DOCTYPE error allowed
the validator to successfully read other parts of the webpage where it found more errors.
f. Scroll down the validation webpage to the “Validation Output” section. The first error identified refers to Line 2, the comment. Correct the comment statement
in your analyze02 .html file.
Both the opening and closing tags should include two dashes instead of one, as follows:
<!-- Enter your name
Enter the current date -->
g. Save and revalidate analyze02.html. Scroll down the validation webpage to the “Validation Output” section. The first error identified refers to Line 7,
the meta tag. Notice that theattribute value is not properly surrounded with quotation marks on each side. Correct the attribute and value to charset="utf-8"
h. Save and revalidate analyze02.html. Scroll down the validation webpage to the “Validation Output” section and then read each of these errors.
You will fix each of these errors in this pass.
• Delete the <font color="red"> and </font> tags. The <font> tag has been deprecated (removed) from the HTML5 standard. You will style your content with Cascading Style Sheets (CSS) in upcoming chapters.
• On Lines 16 and 17, change the <body> and <html> tags into closing </body> and </html> tags.
i. Save and revalidate analyze02.html. Your validation process is complete when you see the green message “This document was successfully checked as HTML5!”
2. Improve
a. Although the webpage has been successfully validated, the HTML validator only checks for HTML issues: correct elements, attributes, and syntax.
The validator does not check for readability such as white space and indents, whether tags are semantically correct, or the whether the content
is spelled correctly. You will work on readability first. To make the webpage more readable in the HTML editor, press the ENTER key after
every closing </p> tag to move each numbered item to its own line
b. Indent every line within the <head>…</head> and <body>…</body> sections to make them easier to read.
c. Change the <p>…</p> tags that surround the HTML5 best practices title to <h1>…</h1> tags. The <h1> (heading level 1) tag is
more meaningful (semantic) for this content than the <p> (paragraph) tag.
d. Find and correct the two spelling errors. (Hint: The word lowercase and inline are spelled correctly in this context.)
e. Replace the placeholder text in the comment with your own name and the current date.
3. Submit the analyze02.html file in a format specified by your instructor.
4. After reflecting on this exercise and using outside resources if needed, answer these questions.
a. Identify three types of errors the W3C validator helps you find and correct.
b. Identify three types of errors that the W3C validator will not help you find and correct.
c. Identify three reasons it is a good practice to validate all webpages.
Sorry the answer is not available at the moment…
If you are able to find the answer, please make sure to post it here. So that your Juniors have smile on their lips and feel happy.
Spread the 'tradition of sharing'.