This lesson is exclusive to members

Responsive Web Design Essentials - HTML5 CSS3 Bootstrap

How to add html5 structure elements to your html website

Daniel Walter Scott

Download Exercise Files Download Completed Files



We’re awarding certificates for this course!

Check out the How to earn your certificate video for instructions on how to earn yours and click the available certificate levels below for more information.


I recommend hosting your new website with Bluehost, you can get a big discount by signing up with this link:

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up
All right, let's start actually making the websites. Our first project is going to be this restaurant. So we're going to put in the structure for it, the Header, the Main, and the Nav. It's going to look something like this. This is going to be the kind of main structure that we're building in this video. So, Header, Nav, Main, Footer, easy; let's make it and--

This is what it looks like, and we'll center it as well. That's the job of this video. Let's start our coding. Depending on how well you've been following along-- I'm going to close down everything in here except for-- I'm going to open up my 'Explorer', and in Project1, I've got Index and Style open. So make sure those are open. Now in the Style CSS, let's delete all the code we've got so far, and clean it out. Same in here, get rid of all of the body. So that's nice and clean, but if you're changing, because, crazy, and we need lots of space. 

Make sure that your Style sheet is linked, and the Title, you've got a title, any kind of title. What I also want to do before I move on - I'm going to close down the Explorer. - is, I keep meaning to do it in every video, but let's do it now. Let's go to 'View'. Now I'm probably just going to do this. We're going to go to 'View Appearance', and see, 'Zoom In', you'll see if you want to do it in a sec, watch. Can you see, all the text got a bit bigger. It's probably to help, mainly to help the editor from zooming around. You're probably getting dizzy as well, going side to side checking CSS in HTML. So made the text a bit bigger. You might be the same, you might be like, "I wear glasses, and I need to make this stuff bigger." So 'View Appearance', and you can zoom in. 

So you're reset, we're ready to go, I want you to get in the frame of mind. Let's say we've woken up, we've got two ideas, we've got a coffee, and we're like, "Okay, we need to make a website for this Adare Restaurant company. We've created our local folder, which is called Project1, and we've created two files, Index and CSS. We've added our title, and that's all we've done. Actually we've connected the style.css, you ready? 

Next thing I want to do is start adding my html5 Structure Tags. Now we're going to work off a diagram that I've hand drawn for you. It is in Project1, in your Exercise Files. Let's call this one 'Wireframe P1 A'. So if you want to have that open on your other screen, like I am, I'm going to put it over there, just to kind of work out the sizes and the colors, and stuff. You don't need it, I drew it anyway. So we're going to need our first one, and the first one is Header. So instead of writing div=header, we're going to just write--

We don't even need the angle brackets anymore. Remember, we're using new tricks, so we're going to type 'Header', there it is there. Put a Return in so there's a bit of space. I like space between the tags. Now we're going to style it, so over here in my CSS, the difference between what we're doing now and what we did before is, we put-- when we write a class, we have to put--what's the thing that goes into the front? it's that period or full stop, then we write Header, but this isn't a class. You know it's a class because, remember, we write over here div=class, it's very clear. When it's not a class it's just a plain old tag, there's no class in front of it. 

We don't have to put that period, so you only put that dot if it's a class. This one, you don't have to. Header, awesome. Then we put in our curly braces, and we're going to style it. Now like before we're going to kind of open ours out to be a clear box, but often you wouldn't give it a background color and a height like we are, in that kind of diagram that I showed you because you let the logo and all that text kind of fill the gap, but we'll put the structure in first, then we'll delete things like the height and the background color. 

So first up, Header, you my friend get a background-color, there you are. We're going to use blue for this one. I'm going to hit 'Save'. We're going to go and launch our cool little live preview thing. Actually mine's still going from last time. Go live. Start it back up, there it is there. And, great. Blue background; why can't we see it? Because it has no height. So we either put content in it, which you'd normally do, but because we're not doing content, we're kind of separating this all out into separate videos that we can get our kind of knowledge going first.
So we're going to have a height of 118 pixels. Just that's what I decided for no good reason. Now let's go and preview, there we go. Now I'd like to give it a width, because stretching all the way across, it might be what you want, but for the moment we want it to be a nice physical width. So how wide should you make your website? So this part of our course will give it a physical width. So we'll say, you need to be a certain width. Later on we'll get it to adapt or respond, so when we get into a section about responsive design, we'll get it to respond to different sizes, but at the moment we're just going to target-- like a standard laptop size. 

Basically your width can be anything, it's up to you, what you think. You know what the width should be, but you're new so you need some sort of guidance. Often I'll make mine 1024 pixels wide. That is a really kind of common generic web width. It fits on-- like laptops by default are about 1300 across. So 1300. So as long as it's less than that it will fit on most screens. Other really common sizes are 960. Gets used quite a bit because it's, we'll look at this later on but it's easily divisible by 12, which doesn't make any sense now but it will later on. 

It's the columns that we're going to use later on. Bootstrap, which we'll look at later on as well uses 992. It's a framework that we'll look at, but don't worry too much. It can be mesh keyboard. It's going to be pretty small website, that one, but if I made it 987 nobody would care. Wouldn't break the browser as long as it's smaller than a laptop screen. We're going to use 1024. The other thing as well, you've got to say 10 24. If you're at a Web Design group meeting, and you start talking about 1024, they're going to know you're a newbie, so say 10 24. All right, let's save it and let's check it out. Browser, cool. 1024, fits on my giant screen. 

They will fit on smaller screens. It's got a height, and it's background blue. The main important thing is we used Header instead of naming it a Div, giving it a class, and styling it over here. So the next one, a couple of spaces, I'm going to type in Nav. So Nav, hit Return, Space, here we go. I'm going to do the same over here. Remember, leaving that curly brace there, I'm going to type in Nav, doesn't need a full stop in front of it. And we're going to add a background color, we're going to cheat, because that's already typed up the top there. Background colors are-- you will get used to that. It's a really long one to type to get the right suggestion. I hate that one, it's a long group of characters, anyway. 

So let's check our diagram. My little diagram, he's going to be 40 high, we'll use the same width, but we use the height of 40. Now this happens quite a bit. I do it, and I forget to put the px back in. What happens in the browser? Let's just check; didn't appear. Okay, save. Still didn't appear; why? You can see it, because it's blue. Come on, Dan. It's meant to be red. It was there the whole time. Still not there. Come on, browser. So it's meant to do automatic updating; why is it not? Oh, you know why. It's because I didn't save this site. I'm hitting Command S, it's Ctrl S on a PC, I'm hitting Save but I'm only in this document. Out of the habit this morning of hitting Command-Alt-S, which saves both sides, then it appears. 

All right, I pretend it's a lesson that I'm teaching you but really I just messed up. So there's a Nav, what else we got to do? We have got this section here, which is going to be my Main, and this is going to be my Footer. 400, 100. Let's check it out. So over here I'm going to bulk them in. So I'm going to put in-- no, I'm going to put in Main. Return. Put some spaces between them so you can see. And down the bottom here we're going to put in Footer. 

Now notice that I was kind of messing around with my cursor, so it's all kind of-- I just put my cursor in front of it, I hit 'Tab', so it all lines up, you don't have to do that. I'll put a Return in it to look like all the rest of them. All right, so there's my sections. Over here, I'm going to cheat. Paste that in, that in. This one's going to be Main, this one's going to be Footer. So we're doing lots of things one at a time, but often when you're working you're going to start, kind of doing this a little bit more bulk kind of doing things. 

So orange, it doesn't have to be the colors, like this, random colors in here. We'll look at kind of more code based colors later on, but I'm just using the ones that are pre filled in. It was 400 and 100, I can't remember. 400 and 100 it is, so height, 400, this is 100. In the right spot, Dan. 'Save All', then go to your browser. There we go, it's the kind of core structure. 

Now the big thing, you're like, "I want it centered, why isn't he centering it?" Let's do that one next. What we can do is we could try and center every single one of these boxes, and that would work, but what's really common is to wrap it all up in a div or in a container, and make that centered so that these guys come along. Actually it's easier just to show you, so in VS code, we are going to go in here and say, the Header--

So to center something it's kind of weird. To center kind of a structural element like this, there's no like make me centered, so it's kind of a trick, it's the way it gets done anyway. So you can put in a margin, which is the space around the outside, but you can put a margin on the left, I'm going to click on that one, and instead of putting in an actual measurement, you can just type in 'auto'. Make sure a semicolon goes at the end. So syntax has to be like that. I'm going to hit 'Save'. And what that does is - let's have a little look at the website. - can you see, I've done it to the Header, and it's-- because the margin is automatic, it just tries to be automatically as much as it can be. 

So it just says, "Why can't it be as big? I can be massive." So it goes massive. To counteract that you say, "I want a margin on the right," to do the exact same thing. And they battle it out, and somehow magically end up in the middle. So that's how you center things. So we could do it for this, and we could do it for this one as well. You could slowly work your way through it, and there wouldn't be any technical problem with that, except it would just be a bit weird. So I'm going to grab all of this, get rid of it. Save it, so we're back to here. 

I'm going to put all of that stuff into a container. Now there is no container, like pre-defined tags, we have to use our old-school Div tag. So up the top here, I want it to be before the Header, and I want it to close just after the Footer. Here, I'm going to Tab out once, and I'm going to say, I would like a Div with a class of container. Now I'm calling it container, you could call it banana. You can call it anything you like, some people call it-- nobody calls it banana. Just in case. People call it wrapper, it might be box. We're going to call it container for-- that be a really common one, is container. 

So styled that, the problem is it opens here and closes just here. So it opens and closes straight away, I need the ending of this-- we did this kind of playing with our Div tag box thing earlier on. That's the reason we did it. It's because I need this, I need to cut it, grab all little bits and pieces, and after Footer finishes I'm going to paste it in. So now if I click on this top one here, it opens there, closes this, they're all wrapped up. Let's tidy it up because it's looking a bit weird. 

We're going to do this. I've selected all of this, there is a sneaky shortcut to tidying it all up, rather than tabbing it all yourself, is to right click it and go to this one that says Format Selection. It just kind of indents everything nicely. The other thing I might do to kind of make this seem a bit nicer is, I know I put Returns in, I'm getting rid of them. Trying to clear this up so it looks nice for you. Editor, can you speed this up a little bit, and I'll see you guys in a sec. 
All right, you're back. Now you might go, "That looks painful," and it is, but it's kind of how I work. I liked everything to try and be as nice as I can, especially during the tutorials because it's nice to, for you to be clear about where everything is and what it does. It's nice and clear now that that's inside of a container because it's indented. So all we need to do down here is we need to say Style a Container, and you're like, "He's doing it wrong." I'm like, "Definitely." That was an actual test that I set up. 

So you have to-- if you're signing a Class, remember, the Period goes in front. And then we can say-- do we paste that? We don't. So I got to do it again, so Margin, I'll do 'Margin Left'. We're going to make it auto, semicolon, 'auto;' Same thing, 'Margin Right'. 'auto;', save it. And because all of these fellas are inside of the container they should, not work. 'Save All'. Not a test. Why is it not working? Div Class, container. Right, left. There are no errors down here, I've saved it all, what's going wrong? I know what it is.

So I've added a width. Because I'm doing this a bit backwards I added the width to these internal guys, the container needs a width. We need to swap them. So you need a width, oh, not Windows. We need a width; all flustered. 1024. And these guys can come off, well actually they can stay on, watch, let's have a look. So the container now is its width, so now the margins know to push out from the sides there. So we could leave these here, but because by nature Div tags will try and stretch to fill the space provided, and we've said the space provided is container, these guys don't need be told twice. Here we go. Looks exactly the same. 

Now in terms of the flow here, I want the container to be at the top, just because later on when I come back into here I'm looking for kind of, when the CSS sheet gets quite long, I'm like-- All right, the stuff at the top are the most kind of overriding things. So container, and then Header, that these are, I guess, lower in the pecking order in terms of the structure for the site. So that's applying the HTML tags. 

Now in a previous-- where is it? This one here I showed you in wireframes. I made this one called Structure A, and I put the Nav inside the Header. So we'll do that one first, that would just mean cutting that out. Oops. wrong side. Grab this, cutting it out, and putting the Header inside of this one. That would be a way of structuring that kind of design. Let's say the other design didn't use Main, they used Section instead. So Section open and close, they'd use that, and style section over here, but nothing would really change. I'm using Main because that's just the way that I like to do it. And I get confused by sections and articles. 

All right, buddies, we've got our kind of basic structure for our site, with some ugly colors. Let's start adding extra things, because we've only done simple text and boxes, we'll start adding proper background colors, and we'll start adding images and texts, and all sorts of stuff in the upcoming videos. I will see you in a little bit, after lunch.