All language subtitles for 12 - Debugging HTML.en

- 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.