In this lesson, you will learn how to use tools in your browser to analyse HTML pages and find errors.
When source code is written, everything is usually fine until an error occurs. If something has been entered incorrectly, either the code doesn't work at all, or does not work as intended.
HTML is not compiled first, but interpreted directly by the browser. Errors do not normally prevent a document from displaying, as is usual with other programming languages. The browser renders the HTML document anyway.
HTML ignores syntax errors. Browsers render permissively, and the page is displayed even though there are syntax errors in the code. Browsers have built-in rules that interpret incorrectly written HTML code, but usually not in the way it was intended. The errors must still be corrected.
Debugging with the Google Chrome Browser
Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.
To open DevTools, press Command + Option + I (Mac), Control + Shift + I (Windows, Linux), or F12. This shortcut opens the Console panel.
We will look at the debugger in more detail in the Java Script chapter. There we will talk about breakpoints, for example.
If no syntax check for HTML5 is available in your development tool, you have can have your HTML document checked on a website that provides the Markup Validation Service tool for this purpose. This tool is provided by the W3C, the organization that creates the specifications for HTML, CSS, and other internet technologies. You submit an HTML document to this website, which examines the document for errors and returns a detailed error report.
You have reached the end of this lesson and we hope you have enjoyed learning the basics of HTML with us! At this point, you should understand what this language looks like, how it works and be able to use some elements and attributes.