What is HTML5 tag header nav section article main footer

This lesson is exclusive to members

Course contents
SECTION: 4
Project 2: Bike Repair Website 6:12:48
SECTION: 6
Project 4: Bootstrap Yogurt Website 3:35:39

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

128 lessons / 17 hours 5 projects Certificate of achievement

Overview

Hi there, my name is Daniel Scott and together we’re going to learn how to build professional responsive websites. which look good on mobiles, tablets and desktop screens.

We will build 4 sites together...
  • a simple but elegant restaurant website.
  • a bike repair website. 
  • a responsive portfolio website.
  • a Bootstrap website.  

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. We’ll use the world’s most popular (and free) web design tool called Visual Studio Code.

There are exercise files you can download and then work along with me. At the end of each video I have a downloadable version of where we are in the process so that you can compare your project with mine. This will enable you to see easily where you might have a problem.

We will delve into all the good stuff such as how to create your very own mobile burger menu from scratch learning some basic JavaScript and jQuery. 

 You will...
  • Learn how to work with responsive images and icons. and stunning full screen background images and probably one too many gradients. 
  • Learn how to create forms and to choose great fonts for your website. 
  • Learn how to work with Bootstrap 4 to easily add carousels, cards and complex looking menus. 
  • Setup a domain name with hosting so that your website is live on the internet for others to see.  

There are fun class projects for you to work on which will enable you to practice what you learn. By the end of this course you’ll have a great understanding of important web design topics like HTML5, CSS3, Flex box, Responsive design and Bootstrap.   

If that all sounds a little too fancy - don’t worry, this course is aimed at people new to web design and who have never coded before. We’ll start right at the beginning and work our way through step by step. 

Who am I? 

I’m Dan, and I’ve been building websites for about 15 years now. I am award winning instructor, and have won a MAX Master award for the last 2 years in a row at the prestigious Adobe Max conference.

Time to upgrade yourself?
Sign up for the course and let’s learn how to build responsive websites.

Course duration 16 hours 42 mins
Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Certificates

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.

Downloads & Exercise files

Download Exercise Files Download Completed Files

Transcript

Hey there, this video is all about learning what The HTML5 Structure Tags are. They are things like Header, Main, Footer, and Nav, and you can come and see, they're pretty simple, they're just containers that we put stuff in. Exactly like a Div, except we give them special names, because they do special things. Pretty easy to do, let's jump in now and learn what they are. 

All right, so what are these HTML5 structural elements? Basically HTML4, what we used to do is what we've done until now. We just make a Div tag, division of space, kind of a box. We give it a Class Name, then style it over here, in our CSS, and that works fine. We'd have a box at the top for our Heading, a box for our Navigation, a box for the main parts, box for the Footer. We just create all these Divs with all these names over here. 

So what they decided in HTML5 is like, hey, whoever is using these things, wouldn't it be nice to have an actual tag? Instead of writing Div equals, blah, blah, blah, you just write Nav, okay. And at the end we're going to close the Nav, same with this one here. Maybe this is the main part of our content. We'll just call it 'Main'. And over here call it 'Main', spelled it right. And over here, style the word Main. So that's what it is. They're just replacing some commonly used Div tags with some pre-existing names. 

Now other than that there's not a lot of difference between Divs and these kind of predefined names. They're just ready to go. There must be some accessibility options, for like screen readers that might use these types of tags. I have to do a bit more research in that, it's never come up in my work. I'm going to undo this because I'm wrecking this document. 

So what are these tags? There are some main ones. They're all kind of suggestions. So I'm at w3schools.com, and here's a bunch of their kind of new structural tags. There's basically just a couple of them that get used. You should, if you're going to be like the best HTML5 implementer in the world, go through and research them all, and use them all perfectly. What you'll find is that most people pick the good ones, and there's a lot of confusion about where you should use some of these. And because the-- like pros and cons, well, the pros aren't huge for adding them, other than it's just a bit clearer, people don't use them. So I guess I want to be honest about that so that we're not--

So I'm not telling you have to use these tags. Now I made a little handy, in your Exercise Files, a little drawing. Why am I drawing these? I don't know, I could use Illustrator. I feel like it's proper, if I go into Wireframes-- if you go into Wireframes in your Exercise Files, I've made these two. So there's HTML Structure A and B. I'll show you two really common kind of uses of them. So instead of putting Div, Header, we're just going to use the Header tag. The Nav, this is what I normally do. I throw in a website, this outside box, the kind of green one, doesn't have a name, they should have just put one in called Container, that everybody uses in Web Design, but they didn't. 

So there's no name for this outside one, you have to give it a Div name, but inside of here I often put my Header. Inside of that Header, I put my logo over here. There's no specific HTML tag for logo, so you'll put that in as a separate element, but there is a Nav, so I put the Nav in there, often in the top right. This big section in the middle, I call it the Main. Well, I call it Main, it's actually a pre-defined, you can kind of see it over here, it's actually a pre-defined HTML5 tag. 

What we think about Main is that, that one doesn't get used very often, I'm like, "Why wouldn't you?" Such a good explanation of what this area is, but anyway. And Footer is a really easy one. So that's what I do. I want to show another way of working that-- I see a lot of other sites done, I guess I don't want you to all follow me perfectly, because there's different ways of doing it. So again, the big blue thing around the outside is-- doesn't have a specific name, we'll give it a name in a second, but Header, so I wanted to show you this one as well, because Header-- the Nav doesn't have to be inside the Header to work. You can have the Header, and you can have your logo, and some graphics going up there, but you can have your navigation separately. 

Your navigation could be down the side, though nobody does that anymore. Then you've got your Footer, we've already talked about. You got these three, these are common enough. An Aside is pretty easy. If you've got a Web Design where you've got a Sidebar, or something, often it's like related articles or latest Twitter feeds. You can have this, you can put it inside a Div tag called Aside. And it's clear, great. These two are the ones that are real confusing. So this is how I interpret how it was set out. 

So you have an article, and it's unique to that page, it might be a blog post, it might be-- you're writing about a topic, and then within that article you have sections. So you might have a main kind of article but you might have some bullet points, or like little FAQs, or kind of pull quotey extra bits. And you might have ten sections or two sections, but you have a main article. There is arguments on sites where that can be completely the other way around. You have a section, and you have articles within the section, and you have multiple articles on the page. The documentation is not super clear. 

I guess I wanted to share the uncleariness because you might get to one website where they're being very, very deliberate about using articles, and then sections within the articles, and then you get to another site and they've done something, they've implemented this article section thing completely different. You'd be like, "Hey." If that happens, if you get to that "Hey" moment, it's not you, it's the internet. Clear, clear, clear, clear, weird. But a lot of people don't use Main, that's why I didn't include it here. 

So we've learned what these kind of tags are. Just replacements for Divs with special names. We are going to go start building our actual project structure in the next video. See you in a sec.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024