About us

Learning library

For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.

It makes sense to start learning by reading and watching videos about fundamentals and how things work.

Machine Learning Engineering (16 weeks)

Full-Stack Software Developer

Search from all Lessons

Social & live learning

The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.

From zero to getting paid as a developer, learn the skills of today and tomorrow. Boost your professional career and be hired by a technology company.

Start Coding

← Back to Lessons
Edit on Github

Debugging HTML Code

Debugging HTML code
Three Debugging tools for HTML

Debugging HTML code

HTML Code is difficult to debug initially, but it's easy to grasp if you follow this recipe. You only need to know 2-3 things before starting to code or debug in HTML that will make you a master. Yes, it's that easy, so don't worry and keep reading.

If you are interested in debugging other languages or technologies where is our full guide about What is debugging and how to become a master in debugging when coding front end and backend web development.

Preventing errors

This guide is about fixing a bug, but it's worth mentioning how to prevent the majority of the bugs in the first place: ABC = Always Be Closing the tags as a priority. If you open a tag <p>, close it immediately! Like this: <p></p>, and then proceed to fill the inner HTML content. Use a code formatter that indents your code automatically. Most of the bugs at first come because your code is messy and challenging to follow with your eyes. You end up opening/closing tags in the wrong place.

Three Debugging tools for HTML

The most effective debugging tools for HTML are: Your page HTML source code as the browser sees it. The developer tools inspector. Your coding editor (VSCode, JetBrains, etc.).

Let's go over each of them in detail.

1) Inspecting the HTML source code

You may assume that the code you wrote is the one being displayed by the website. NOPE! There are multiple reasons that your original code may not match the source code being used on the website.

  1. Browser Cache (the most common cause): Your browser sometimes keeps an old version on purpose.
  2. Server-side dynamic rendering: Using a server-side language to manipulate the source code before it arrives in the browser.
  3. Server configuration: The server may be removing or adding some extra lines of code.

What is the Browser Cache

Sometimes the browser will use an old version of the code instead (cache memory). This is called: Browser Cache. Caching can be a common source of confusion for junior developers, leading to changes not appearing on the website as expected.

Cache memory

Cache errors: You need to ensure the code you wrote is the same code rendered to your website.

Make sure to disable browser cache in the developer tools, also, get used to holding the shift key when refreshing a website during development.

How to inspect the HTML source code:

In windows, open the source code by pressing the Ctrl + U keys simultaneously. In mac, open the source code by simultaneously pressing the ⌥ Option + ⌘ Command + U keys.

2) Developer Tools Inspector

Every major browser has Developer Tools, the first tab in the developer tools is called the "inspector", and it contains -almost- everything you need to fix your bugs.

html code inspector

The Dev Tools Inspector shows a live version of your code instead of your original source code. This "live version" is called "The DOM". It's what the browser was able to interpret from your code. These are some cases that make the inspector great:

If your website is not looking how you intended: Use your mouse right-click menu, and look for the "inspect" option. It will show the HTML elements that the browser created around that area. If you have written incorrect HTML code, the browser will attempt to fix it to make it display correctly, but this may only sometimes result in the desired layout. When you use the developer tools inspector, you will see the HTML code that the browser interprets, which may be different from the original source code if the browser has made any corrections.

Note: There are other -more advanced- examples where the Inspector HTML won't match your source code; you can open these details to read more about them

Minification: Sometimes, websites compress and optimize the code for faster loading times. The HTML inspector will show the minified code, which may be difficult to read. Browser extensions: Ad blockers or script blockers modify the code shown in the HTML inspector. Server-side rendering: the HTML inspector will show the code rendered on the server rather than the source code.

3) Debugging HTML inside your Coding Editor (IDE)

The last crucial debugging tool for HTML is your coding IDE (editor). Most of the IDE's offer the following features: Syntax highlighting: Colors help visually distinguish different parts of the HTML code, such as tags, attributes, and values, making it easier to spot errors. Linting: Some editors have built-in linters that can check your HTML code for errors and potential issues and highlight them in the editor. Validation: Some editors can validate your HTML code against the W3C standards and display error messages if there are any issues.

HTML most common errors on how to debug them

Unclosed tags

If a tag is not closed correctly. For example, if you forget to close a

tag: The code editor might highlight the entire block of code that follows the unclosed tag in red. You can also see the error in the terminal if you use plugins like prettier. If you click on an opening tag, the editor will also highlight the closing tag.

how unclosed tags errors show up

Missing quotes

HTML tags have attributes, for example, the <img> tag has src attribute: <img src="https://domain.com/something" />. Unfortunately, sometimes we make mistakes when opening or closing those tags.

Two find those errors: The best tool is the syntax highlighter. It will show weird coloring; look at this image for a better understanding.

how missing quotes look in your syntax highlighter

Bad <link> or <script> tag url

This is funny because everyone makes this mistake, I did, you did it or will do it, everyone else did it or will do it.

When linking your HTML to a separate CSS Stylesheet or Javascript Script, you will type the wrong URL, and your stylesheet won't load.

How do you know your link tag is wrong? The Dev Tools Inspector console will show a 404 error like this (look at the image below):

error stylesheet not loading on your website

Note: It shows the URL it used to retrieve your stylesheet; check that the URL is OK.