HTML Validation

Introduction

When you build a web page, browsers often try to display your HTML even when it contains mistakes. That can be helpful, but it can also hide problems. A missing closing tag, incorrectly nested element, or table row in the wrong place may cause unexpected results.

HTML validation is the process of checking your markup against HTML rules. A validator reports errors and warnings so you can improve the structure of your page. Validation is not a test of your creativity. It is a practical debugging tool that helps your HTML be clearer, more reliable, and easier to maintain.

Today, you will validate a small page containing a table and embedded-content placeholder markup, interpret the messages, and fix the structure. The goal is not to memorize every rule. The goal is to develop a useful habit: write, validate, understand, and correct.

What validation checks

A validator checks whether elements are used in valid ways and whether the document follows HTML’s structural rules. Common checks include:

• Opening and closing tags match.
• Elements are nested in the correct order.
• Required attributes, such as an image’s alt attribute, are present.
• Elements are placed where HTML allows them.
• Table content uses an appropriate structure, such as rows containing cells.

A validation message usually includes a line number, a description of the problem, and sometimes a suggestion. Read the message carefully, but also inspect the surrounding code. The reported line is often where the validator notices the problem, not where the mistake began.

Worked example

Consider this invalid fragment:

<table>
  <caption>Workshop Schedule</caption>
  <tr>
    <th>Session</th>
    <th>Time</th>
  </tr>
  <td>HTML Validation</td>
  <td>10:00</td>
</table>

<p>Bring your questions.
</section>

There are two main structural problems. First, the two td elements are directly inside the table. Table cells must be inside a table row, represented by tr. Second, the paragraph is opened but not closed, and a closing section tag appears without a matching opening tag.

A corrected version is:

<table>
  <caption>Workshop Schedule</caption>
  <tr>
    <th>Session</th>
    <th>Time</th>
  </tr>
  <tr>
    <td>HTML Validation</td>
    <td>10:00</td>
  </tr>
</table>

<p>Bring your questions.</p>

Notice the repair process: we fixed the table structure first, then removed the unmatched closing tag and closed the paragraph. After each change, validate again. Fixing one early error may make later messages disappear.

Guided activity: validate a workshop page

Work with a partner or follow these steps independently. Use an HTML validator supplied by your teacher, or use your editor’s validation feature.

1. Create a new HTML file or code area and enter the following fragment:

<h1>Community Workshops</h1>
<table>
  <caption>Upcoming sessions</caption>
  <tr>
    <th>Topic</th>
    <th>Day</th>
  </tr>
  <tr>
    <td>Tables</td>
    <td>Monday</td>
  </table>
<p>Ask the instructor about accessible learning materials.

1. Run the validator and record each error message in your own words.
2. Check the table first. Is every row closed? Does every cell belong to a row?
3. Check the paragraph. What closing tag is missing?
4. Make one correction at a time, then validate again.
5. When the errors are fixed, improve the table by adding a second data row for “Embedded Content” on “Wednesday.”

Discuss these questions: Which error did the validator identify first? Did correcting it change the other messages? Why is a table row useful even when the browser appears to display the cells correctly?

Common mistake: fixing only the visible result

A frequent beginner mistake is to stop when the page looks acceptable in the browser. Browsers are forgiving and may automatically infer missing structure, but different browsers or assistive technologies may interpret damaged markup differently.

Another common mistake is to change many lines at once. If the page improves, you may not know which change solved the problem. Instead, read the first useful error, inspect nearby markup, make a small correction, and validate again. Also remember that a warning is not always an error. A warning may suggest an improvement, such as adding clearer text or more accessible information.

Independent challenge

Repair and validate this fragment without copying the earlier corrected example:

<h2>Study Resources</h2>
<table>
  <tr>
    <th>Resource</th>
    <th>Purpose</th>
  </tr>
  <td>Validator</td>
  <td>Checks HTML structure</td>
<p>Review your errors before submitting.
</table>

Your finished version should contain a valid table with a complete data row and a properly closed paragraph. As an extension, add a caption that describes the table and explain, in one sentence, why validation is useful in a real website project.

Wrap-up

Validation helps you catch structural problems before they become confusing browser behavior. Focus on matching tags, correct nesting, valid table structure, and complete elements. Treat messages as clues, fix problems from the top down, and validate repeatedly. With practice, validation becomes a normal part of building dependable HTML.