Debugging HTML

Objectives

After completing this lesson, you will be able to:

Debug HTML

Debugging HTML

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.

DevTools provides a lot of different tools for different tasks, such as changing CSS, profiling page load performance, and monitoring network requests. The Sources panel is where you debug JavaScript.

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.

HTML Validation

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.

Summary

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.

Build an App that Serves as a List

Watch the following video (without audio) to learn how to build an app that serves as a list.

Business Scenario

In this course, we will work together on several tasks to build an app that will serve as a list where we can store and search for contacts with their email addresses. We will use HTML for the table of contacts and then design and style it using CSS. At the end of the course, we will add functionality using JavaScript so that we can save new contacts and search for each entry.

Prerequisites

Steps

Build a table of contacts using HTML.
For this task, we need to create the index.html page first.
1. Create a file index.html on your computer.
2. Do not forget to include the standard elements that our HTML file needs in the header, such as <!Doctype HTML> and so on.
3. In addition, add the title, Contacts, in the header, which is visible in the browser window.
Create the area where the content of our homepage is going to be placed.
Use the correct HTML element for this task.
1. Create a heading that is above the table.
  Use the HTML element for the largest possible heading.
2. Put this element into a suitable container as it is going to be useful for us later when we work with CSS.
3. Now, create a table with three columns using the corresponding HTML element and a thead and tbody area.
  The first column is for the first name, the second for the last name and, in the third column, we want to display the e-mail address.
4. Create the corresponding headers with the right HTML Element in the Table Element.
Use the correct HTML element and create three entries with first name, last name, and email address in the Table Element.
When the index.html page is called, we want to show the user three contacts already; because we do not have a backend system in this course, you have to create three entries in the source code.

Result

Open the page and look at your result.

Your source text is shown in the following figure.

Save progress to your learning plan by logging in or creating an account

Continue to quiz