Learn how to structure your HTML content by grouping elements using tags like header and nav. Organize your code for easier styling and readability.
00:00
- [Narrator] What is my red text in my index.HTML? Well these are special words as part of the browser, the browser knows what to do with them. Basically, it's a way of structuring our content. Now what I'm gonna do first of all is actually switch back into figments, to explain this a little bit more. So the idea of this is we wanna group our content as best as we can. Now if I look at something like our homepage, what I had up here was this site header, and inside my site header, I had things like the site logo and then this portfolio about a contact.
00:31
But what happens if I want to group these three together to maybe move it underneath? What I can do is just select them all, right click and do group selection and maybe I call this something like the navigation. So I've got my navigation and my site logo inside my site header and I can do the same thing throughout this as well. So maybe this is one group here which is gonna be called something like, tagline for instance, this might be a next section here, so I'm gonna select those and just group them together.
01:01
Maybe this is something like portfolio maybe, portfolio one dash one something like that, this is portfolio two. So I'm gonna group these things together and portfolio two. Notice that the order, it's gonna change. It doesn't really matter too much, but here what I'm trying to do is group things as best as I can. Now the idea of what I want to do is have the same kind of concepts in my code. I wanna group things as best as I can.
01:29
So here what I have is my text, is groups and a h1 tag. It starts here and it ends here. Now there is a big list of HTML tags which you can find on MDN. MDN is Mozilla or Firefox as you might know it, a development that work web docs. And here is a big old list of every single tag that we could possibly use. Now generally on a day to day work process, I don't use all of these tags. There's maybe about 15 in total that I would ever use and we'll talk about what those are as we go along.
02:02
But what I'm gonna do here is group things together a little bit more. So, let's go back to our Figma design. Now what I wanna do is group this header. So I've got my logo and the navigation. And then in my navigation I've got three things inside here. So that's the idea of what I want to do. I wanna group, group and group. So, how do we group things in HTML? So here at the moment I've got one group and another group here.
02:26
I've got h1 group, a heading level one group, most important thing on the page, and I've got a paragraph group here or paragraph tag here as well. So what happens if I wanna group two things together? So this and this. What I would do is I'd pick something from this list, maybe something like header, if it's in the header and say this goes around both things. So to do that, what I'm gonna do is I'm gonna move this cursor to the start and add some space.
02:56
And here what I'm gonna write is this angle bracket and then the word header, and I'm gonna close this angle bracket, and sometimes on some code editors it will automatically put a closing one. But the closing one looks like angle bracket and then slash and then the word of this header, so the word or the tag is mirrored here. It knows where to start and stop. And all my content for header will now live in between these two things.
03:23
So just to make this easier to read, I'm gonna open this up and here in the superhi editor, it will give us this yellow box. So this is where the header starts and stops. Now what I wanna do is group things inside my header, so I don't want it to be Rik Lomas again. This is just Aria Oslo, what I'm gonna put in here, but I want my Aria Oslo h1, to be within my header. How do I do this? I'm gonna take this, I'm gonna cut it out by using commander next or controller next and put it in between here.
03:54
Now in my preview, this will look the same as if it wasn't even there. But what I want to do later on is have the ability to style up my header and my h1 separately. So this is the way I'm structuring my code to make more sense later on. My header is gonna be all of this. Then I got this area here, and this area here. So what would I call this area here? Well for now what I'm gonna call it, is again if I look through here, the content section in, maybe there's something like a nav tag or navigation's kind of in this area.
04:28
So what I wanna include in my header, my side header is my logo and some navigation. So I'm gonna pick from this list nav. So still within here I'm gonna go underneath and use this NAV tag. So angle bracket, N-A-V, and then close angle bracket and automatically we get this close type appear. And in here, what I'm gonna write for now is just the words navigation. So what I'll see here is I've got a header group with two things inside of it.
05:00
Now, again, I won't be able to see this just yet, but I've got Aria Oslo, Navigation, Artists in Portland. So just this, this and this down here, the text on this page. Now one thing that we can actually do here is clean up our code every now and again. So in the superhi editor, we've got this thing called beautify. If I click this, it might look like a magic wand to you in a new version. So here I just indented my code, which basically means they kind of clean up the boxes a little bit.
05:27
It makes it a little bit easier to read. Now the reason why this happens is superhi's editor and any HTML editor doesn't care about white space. So if I add lots of space in here, when I see this, it doesn't make any difference. Why? Well, this is all to do with the look and feel. This isn't to do with content. HTML, index.HTML, these pages are all to do with content. White space is all to do to with look and feel, so we'll talk about that a little bit later.
05:57
So now we got Aria Oslo, we've got navigation, and artist in Portland, Oregon. If I go back to my site, here's my draft to you. There it is. It looks, it's okay. (laughing) It's not finished yet, but if I go to my published project, it's still the original one in here. If I'm happy with it I'll publish this. But for now, I'm not happy with this. I wanna add some more stuff in here.
A place for you to post notes about anything on this page. Only you can view your notes.
Want some ambient music in the background? Play our radio station!
