Browsers are forgiving. They repair a lot of broken HTML silently, which hides mistakes that may cause trouble elsewhere. You need tools that show them to you.
The HTML validator
The W3C Markup Validation Service at validator.w3.org checks your HTML against the standard. Paste your code, give it a page address or upload a file. It lists errors and warnings with line numbers.
Typical findings:
- Unclosed or crossed elements.
- Duplicate
idvalues. - Missing
alton images. - Elements in the wrong place, such as a
lioutside a list.
Browser developer tools
Press F12 and open the Elements panel. It shows the HTML as the browser understood it, after repairs. If it does not match your file, the browser had to fix something, and the place where they differ shows you the problem.
The Console reports script errors, and the Network panel shows files that failed to load, such as a wrong image path.
A calm debugging method
- Reproduce the problem and describe what you expected and what happened.
- Check the basics: saved the file? Refreshed? Right file open?
- Validate the HTML.
- Inspect the element in the developer tools.
- Simplify: remove parts until the problem disappears, then add them back one at a time.
- Fix one thing and test again.
Fixing by guessing
Exercise: find the mistakes
This code has three mistakes. Can you find them? <ul><li>One</li><p>Two</p></ul> <img src="a.jpg"> <h1>Title</h2>
Show a possible solution
A p cannot be a direct child of ul (use li); the img has no alt; the heading opens as h1 and closes as h2.