18 min read

Validating and Testing Your HTML

Check your code with the W3C validator, fix common errors, and test every page in different browsers and screen sizes.

The W3C Markup Validator

The W3C Markup Validation Service (validator.w3.org) checks your HTML against the official rules and lists every error with its line number. 1 Open validator.w3.org . 2 Choose Validate by File Upload (or Direct Input and paste your code). 3 Press Check and fix errors from the top — one early mistake can cause many later messages. 4 Validate every page.

Valid code is not enough — check how the site behaves : Open every page in at least two browsers (for example Chrome and Firefox or Edge). Use the browser's device mode (F12, then the phone icon) to check phone and tablet sizes. Click every link, submit the form, check every image loads. Try the page with the keyboard only (Tab through links and fields).

Worked example

A test table

Test Expected result Actual result Pass? Click "Menu" in the navigation on gallery.html menu.html opens menu.html opens ✓ Submit order form with the name empty Browser asks for the name Message shown ✓ Open gallery.html on a phone-sized screen Photos fit the screen Photos too wide ✗ \to fixed with CSS, retested ✓ Validate order.html No errors 1 error: duplicate id ✗ \to fixed, retested ✓

Practice

Select the checks you should do before submitting a website.

Choose all that apply.

The W3C Markup Validator

The W3C Markup Validation Service (validator.w3.org) checks your HTML against the official rules and lists every error with its line number. 1 Open validator.w3.org . 2 Choose Validate by File Upload (or Direct Input and paste your code). 3 Press Check and fix errors from the top — one early mistake can cause many later messages. 4 Validate every page.

Browser and Device Testing

Valid code is not enough — check how the site behaves : Open every page in at least two browsers (for example Chrome and Firefox or Edge). Use the browser's device mode (F12, then the phone icon) to check phone and tablet sizes. Click every link, submit the form, check every image loads. Try the page with the keyboard only (Tab through links and fields).

Recording Your Tests

Worked example

A test table

Test Expected result Actual result Pass? Click "Menu" in the navigation on gallery.html menu.html opens menu.html opens ✓ Submit order form with the name empty Browser asks for the name Message shown ✓ Open gallery.html on a phone-sized screen Photos fit the screen Photos too wide ✗ \to fixed with CSS, retested ✓ Validate order.html No errors 1 error: duplicate id ✗ \to fixed, retested ✓

Practice

Select the checks you should do before submitting a website.

Choose all that apply.

Test	Expected result	Actual result	Pass?
Click "Menu" in the navigation on gallery.html	menu.html opens	menu.html opens	✓
Submit order form with the name empty	Browser asks for the name	Message shown	✓
Open gallery.html on a phone-sized screen	Photos fit the screen	Photos too wide	✗ → fixed with CSS, retested ✓
Validate order.html	No errors	1 error: duplicate id	✗ → fixed, retested ✓