OnlineCBT
1. How to Debug HTML Errors
Unlike programming languages (C, Java) that throw fatal compilation errors when syntax is incorrect, web browsers are lenient and attempt to "guess" your intent when encountering invalid HTML. While forgiving, this often produces subtle visual bugs.
2. Using Browser Developer Tools (F12)
- Inspect Element: Right-click any broken element on your page and select Inspect. The Elements panel reveals the computed DOM tree as parsed by the browser.
- Console Tab: Checks for 404 Not Found errors on missing stylesheets, fonts, or images.
- Network Tab: Verifies whether external images, CSS files, and API requests return HTTP 200 OK or fail with 404 / 500 error codes.
3. Common HTML Gotchas & Fixes
- Image not displaying: Check for typos in file extensions (
.jpgvs.jpeg) or broken relative path slashes. - Text spilling out of containers: Ensure no unclosed or unclosed paragraph tags exist.
- Forms refreshing unexpectedly: Verify button types: an unadorned
inside a form defaults totype="submit"!📝 Live Lesson Practice
HTML/CSS JavaScript Python C++ C PHP💻 Code Editor (Monaco VS Code Engine)👀 Live Preview - Forms refreshing unexpectedly: Verify button types: an unadorned
