[MUSIC] Now we're gonna learn a couple more HTML tags, which are really useful if you want to make yourself a properly structured document. And you'll see why that's important as you work through. So let's go back to one of our pages and start editing the code. I'm gonna start with the index page. Now, the proper structure for an HTML document is actually not just to start putting your content tags in straight away. What we normally start with is the top level tag. So remember we've seen that you can put one tag inside another tag. Well that's exactly what you're meant to do, so all of the tags in the document are supposed to appear inside an html thing. And then we have, inside that, we have a body tag. So we'd normally tab that one out, and I'm gonna select all the rest of the content like that, and then tab that out twice. So what have I done there? Well, I've created an html tag and inside that I've created a body tag. And then I'd put all the rest of that content inside that. And so, because we have to start and end tags, so I now end the body tag, [ and then end the html tag. Right, now everybody needs a head, so we can actually add one of those as well. And so that's at the same level as the body tag, so we start with html, wraps the whole thing, then we have a head at the top, and then we have a body below it. And all of that content goes into the body, and unlike people. But in the head, what we do is we put special extra information about the document, which we might refer to as metadata. So metadata is data about data, which might sound a bit strange, but think of it like this. Imagine you're listening to some music on your music playing device, and it pops up on the screen the title of the track, and it pops up the name of the person who maybe recorded that track. But that doesn't actually tell you what the track sounds like. It's not the real sound that you're listening to, it's just some sort of information about the track. And that's metadata, so the title and the composer of the track, that's metadata. And in the same way, with an HTML document, we have the body which contains the actual information, the proper information. Like the heading, and the paragraphs, and the lists, and all that stuff. And then we have a head, which contains the metadata, which tells you information about this HTML page. For example, we might define which language it is in, and we might define other sort of information about the document. So we can actually set a title, that's the sort of simplest thing. And normally you'd set the title to probably the same as whatever you put in your H1 tag there, so let's do that. If I then reload that in the browser you'll see, That the title, if I could actually spell the word title, you'd see that the title appears up there. So, this is my first web page, is now there. And, if you like, you can see that's not the main content, the main content is here. But then that's just appearing on the tab in Chrome there, just showing us that's the title, and so I can put whatever I like in there. You can also add a description into that head region just describing what the page is about. And this information helps for search engines, so if the search engine is trying to index your sites, and you've got a nice kind of title and description, it makes for a better indexing and so on. So that's kind of the basics of how to structure your documents properly. So I'm gonna sort of apply that structuring back across to the other two pages on our website. So we just go up to the top of the document, drop that in there, and I'll set the title up later. Then we just put a placeholder in and then, And there. And remember, just so that it makes the document readable, we tab that out twice. So that shows you that that tag is of a higher level in the tree, if you like, than that one. And we do the same over here, Right? So that's now dropped that out. And then we need to add the closing tags, end of body, End of html. And drag that one back in, so, and I'll drag that back over there. Okay, now you'll notice that before we added all that stuff, the web browser was still able to display our pages just fine. And the thing is, web browsers are actually very robust, they're very good at dealing with badly written HTML. I just wanted to show you one more example of sort of badly written HTML before the end of the lesson. So let's go to that list, and imagine that we did something like this. Okay, so what I've done is I've started a list element inside the ul, which is what I should be doing. So remember the unordered list sort of wraps all of the elements. But then the unordered list ends and then my list element ends. So, if you like, the list element is overlapping the tag that it's inside of. See again, the web browser doesn't crash or anything, but it's not the correct way to write HTML. You shouldn't have tags that can overlap other tags, tags are either inside another tag or they're outside another tag. They can't kind of overlap it like this, so we should never sort of end up with a structure like that. So the correct structure is, of course, to put it back in there. Okay. All right, so we've learned how to kind of wrap our HTML documents up with an html tag, and head and body. And we've also learned how we can sort of avoid overlapping tags in HTML, which can cause a lot of confusion in the rendering the document later on. [MUSIC]
