Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:40 minutes
Semantic 1
  • Overview
  • Transcript

2.5 Navigation

The <nav> element signifies a navigation unit or menu and can be used for multiple instances on a single web page. In this lesson we’ll take a look at what it does for our document.

2.5 Navigation

Hello, and welcome back to our semantic HTML course on how to structure web pages. In this lesson, we're gonna take a look at nav elements, and a nav element signifies a navigation unit or a menu. And as you can see, we have a main navigation unit up here at the top, just underneath our header. And if we look inside our code, we can actually see in our index02.html, but it's inside the header. And as I've mentioned before, it's okay to put a navigation unit inside the header. That didn't used to be the case, but now you can. Some people still frown on it. Some people will still insist that you take this navigation unit and put it outside the header, but technically, it's okay to keep it inside. So I'm gonna keep it inside. I'm not gonna worry about moving it around. And instead, all I'm gonna do here is I'm gonna change our div that contains our navigation unit and change it to a nav. And we'll take our closing div tag here and change that to a nav, as well. Now, just like with a header and footer, you can have multiple nav elements on a page. For example, maybe you have, somewhere in your sidebar, maybe you have a list of links, or maybe you have some sub-navigation that drills down into some detailed content within your website. You can have multiple nav elements. But in this particular instance, we just really need one nav element. So, I'm going to save this as index03.html. And then, we'll jump back into our browser. And I'm gonna navigate to index03. And once we do that, we see that nothing really changes. If we take a look at our outline again, you can see that the only thing that changes in our outline is that we now have an untitled navigation unit. So if you wanted to, you could go inside your navigation unit. You can create an h3 tag or even an h6 tag if you wanted to make sure that it's not a very important tag. And then inside that heading, you could just say, main navigation. Save it. Refresh our page. And we see it there in our navigation. And if we turn on our outline, we can see that that main navigation now has a title. And then, we can just jump into our CSS and make it invisible. So, we could go to sections.css. And here, we have .navigation. And I'm gonna leave that class there. You'll notice I have a class of navigation on, our nav element. I'm gonna leave that there so we don't have to mess with out CSS too much. But I am going to do one more thing. I am going to point to .navigation h6. And set the display property to none. That way, we can still have a title for our navigation unit. But if we refresh our page, we can see that title is invisible. So that wraps it up for nav elements. I'll see you in the next lesson. Thanks for watching.

Back to the top