How to use the HTML5 main tag in Dreamweaver.

Hi there, in this tutorial we're going to add this main HTML5 tag here. It's where most of the copy goes for the website. We're going to make it nice and big, we're going to give it a minimum height, and we're going to make it green, just so that you can see it. I don't like that green, it's not going to stay around. All right, let's get on and make it.

So there are three main chunks to our website, there's a Header, which we've done, then there is a Main tag that goes in the middle, that's kind of all about Main Content, and there's a Footer. We've done Header, we need to put in Main now. And we're just going to put in an empty Main Box because we're going to make that box the editable thing on our website. So I can generate new pages and put unique content inside that Main Box. But we need the Container first, so we're going to put it after Header, so I'm going to click on my Header. Make sure it's selected down there, and we're going to go to Insert.

You can see, here's all my main structure to my website. Header and Navigation, we've done. We're going to do Main and Footer in a second. So let's put in Main, it's going to be after my Header. And there is my Main Box. We're going to leave that text in there, just going to help me identify where that box actually is. Now I should go through and add my Footer because it's meant to be directly underneath. The only trouble is, if I look at my design here in Illustrator, my Footer is way down the bottom here, and it's designed against a white background. It's going to be a bit hard for me in Dreamweaver to design this thing against this green background.

So what I could do is add some height to the Main Box. I could say it could be 800 pixels high, just so that it kind of pushes down and allows me to design out the bottom here. The only trouble with height is that it's an absolute figure. So if I say, be 800 pixels high, and my design later tries to go bigger, so, say 800, it incorporates this just fine, but then on another page that I'm designing, 800 only comes to about here, but this Image wants to go heaps bigger, and that causes loads of problems. It goes, "Well, I want to go 800" and the Image goes, "Why do you want me bigger?" And there's a big fight, and things start spilling all over the place.

The way to get around that is to use something called Minimum Height. So what you say is, "I want you to be a minimum of 800, but you can be a bit bigger if you like." Be as big as you like, actually. So it's going to set a minimum of 800, but a maximum of infinity. So that's a really good way of setting heights when you're designing Templates. So you're not too sure how big a box it needs to be, but it definitely doesn't need to be this small. It needs to be a bit bigger than this. So, I'm going to do that under the CSS Designer panel. I'm going to click 'Styles', 'Global', and nothing is actually clicking. Why is that happening? It's because, in between making these videos I was doing some other work, and I switched mine to 'Current'. I like Current, it means, all it's how we've been working in this course. Current means that, if I switch it to Current, and I click on, say that, it switches to the Style that I have currently selected. But we're going to shift back to 'All'.

Current is great when you've actually got a site, and it's finished, and you're actually getting pretty good at this, but we're going to click back to 'All' for the moment. So 'styles.css', we're going to put it in 'Global'. We're going to create a Style for 'main'. It didn't pre-fill it in. Remember, we've got full stops in front of the stuff that we make, the stuff that already exists, like this tag 'main'. We didn't name it, it just existed already, we added it. So you don't put the period in the front there, just straight old Main. We're going to say, "Main, I'd like you to have a height, not that one, I want a minimum height of 800 pixels." And this means it's going to be nice and big all the way down to the bottom here, so my Footer afterwards is going to have space to go in there.

What I might do just to make it obvious for you in this tutorial, is give it a background color of naff green. Well, I'm going to use actually the RGBa so I can use a bit of transparency. Why am I doing this? It's just so that you can see it when I preview it in a browser, and you can see where the Main goes. Let's preview in new browser. That's my Main Box, and it goes all the way down to here. We will move that in a second. I said I'll do this for you but often I do this when I'm constructing a website, it's really hard to know where tags start and finish. You add a background color, sometimes you're like "Oh, that's where that guy goes." So, we will move them in a sec. Next thing I want to do is add the Footer. And we'll do that in the very next video.