From the course: HTML Essential Training

Debugging HTML - HTML Tutorial

From the course: HTML Essential Training

Start my 1-month free trial

Debugging HTML

“

- Before we go into more HTML elements, I want to make sure you know how to inspect HTML in a browser developer tools. In all of today's desktop browsers, there's a secret cockpit of information about what's happening with a website's code and performance. Let's look at them in Firefox. Here I've got a demo in Codepen that combines a lot of the HTML elements that we've learned. I'll open this Codepen demo up in a new tab, so we just have the demo and not all the parts for the Codepen website. Now, I'll right-click on this and go to inspect element, or instead we can go to tools, web developer, inspector. This opens the developer tools. Across the top here, there are a bunch of other tabs with page after page of different tools. Like I said, it's a cockpit of controls. But let's ignore all that, and let's just look at the inspector. We've got three panes here. On the left is the HTML, the middle is for CSS and the right pane has several more options. You can click on more tabs here and see the layout tools, the list of any changes you've made to CSS and a pane about fonts. But we aren't going to think about this right pane or this middle pane for CSS right now. Let's just look at the left pane, this is our HTML. I can see here the DOM that the browser has created, the Document Object Model. Firefox read the HTML that I sent it, and then it revised it, it tried its best to fix any mistakes that I might have had, and created its own version, the DOM version. We can see what the headline Bees is wrapped in an h1, and below that, Beekeeping is an h2, and then we can see that there are two paragraphs. We see a p element, but instead of the words in the paragraph, it just says, "..." and there's a little triangle right here, you can turn these triangles and reveal what's inside. I can see in the second paragraph, there's a sup element around the number for the footnote. Further down, I can see a pre element and a block quote, inside the block quote I have a cite element. The inspector is representing the DOM tree here, the family tree of elements, and that's going to be very useful. Many browsers have developer tools, Safari, Chrome, Edge, and they all have an HTML panel that's just like this one. They use the same way of indenting things and using these little triangles to make sense of the DOM tree. We can use developer tools to inspect any website on the internet, and peek under the hood to see how other developers use HTML. This is how I get ideas when I'm not sure what markup to use, I'll go to other websites, find some content that's similar to the content I'm trying to markup, and use the developer tools to find out what elements they used. Especially if the website was built by a team that I respect, looking at other peoples work can help me to better understand how to structure my own HTML. You can also use HTML inspector in dev tools to help us debug mistakes. Let's look at some code that has something wrong with it. Here I have an unordered list with four items, and they should be counting off one, two, three, four, but if you look at the results there's a blank one, and it throws off the counting, we get five items, so why? Well, let's right click on this and look at it in the developer tools we can see that in fact the browser is doing something to repair the HTML that it received when it built the DOM tree. And it thinks that there should be five items, one, two, empty, three, four, so what's going on? Well I can see that there's something going wrong before what should be the third item, and I know the browser is adding more tags, it's adding an extra pair of tags. Let's look back at my original HTML and somewhere before the third term, oh I see, it, I told the browser to start another list item right here instead of telling it end one, so let's fix that. If I put the slash where it's missing, we can see now that it works, the DOM is fixed. Any time you aren't sure what's going on, reach for the developer tools in a browser to sort things out.

Contents