- Read Tutorial
- Watch Guide Video
- Complete the Exercise
When it comes to organizing elements on the page, you are going to use a very important tag called the div tag. Now, we're going to be using div tags throughout this entire course. Pretty much every element that we're going to be putting on the page, is going to be wrapped inside of a div tag.
It gives us the ability to select the item and be very specific about it, and also to organize and align the content however we need to. With that, we're going to be building out this nav bar.
Now we're not going to be organizing it like this in this guide. We're not going to move it to the right and left, and center it, and add in the styles. We're going to save that for a later guide.
For right now, I just want to get all of this content on there. Let's start off with the phone number. We know we're going to need to have this phone number. We'll add the icon later, as well as the hours of operation.
We're going to need our links, which we already have, and then we're going to add the address. We're going to use div tags in order to accomplish all of that.
Open up your index.html and in between videos, I removed some of the demo content, like some of the things we were just using for an example. Your file structure on the left-hand side should look exactly like what I have here with the about, contact, index, menu, and style files.
Now in this guide, we're not going to be actually changing a lot on the page besides just adding some content. That is going to be something we do in later guides where we're going to use CSS. For right now, this is all about structure.
Let's change some things in index.html
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Homepage</title> <meta name="viewport" content"width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> </head> <body> <div> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="menu.html">Menu</a> <a href="contact.html">Contact</a> </div> </body> </html>
Now, let's come back and hit refresh on our page,
You'll notice nothing changes. Each one of these elements is working exactly the same way as before. Now, we have some other ways that we want to use divs.
Whenever it comes to nesting elements and organizing them in code, using a div is going to be the best way to do that. Now we have this entire nav component right here. What we want to do is we want to make that entire thing one big div.
We're going to create what I like to call a wrapper div.
index.html
</head> <body> <div> <div> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="menu.html">Menu</a> <a href="contact.html">Contact</a> </div> </div> </body> </html>
Now, this may seem really weird to you if you've never worked with div's before, this should seem like a little bit of weird syntax. The reason why I'm doing this is that the more divs that you have, the more control you're going to have when it comes to selecting elements on the page.
Hopefully, that's going to make a little more sense the further we go along. Especially when we dive into CSS, but for right now let's just add in some comments here.
index.html
</head> <body> <!-- Navigation wrapper --> <div> <!-- Link wrapper --> <div> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="menu.html">Menu</a> <a href="contact.html">Contact</a> </div> </div> </body> </html>
Now we have some spots where we can actually put the rest of our content. I know that we have that phone number and those hours, so let's add another div here.
index.html
</head> <body> <!-- Navigation wrapper --> <div> <!-- Hours + phone --> <div> 555-555-5555 10 AM - MIDNIGHT </div> <!-- Link wrapper --> <div> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="menu.html">Menu</a> <a href="contact.html">Contact</a> </div> </div> </body> </html>
Let's come back to the home page.
The next item we want to add is the address. I'm going to copy it from the design and add it in.
index.html
</head> <body> <!-- Navigation wrapper --> <div> <!-- Hours + phone --> <div> 555-555-5555 10 AM - MIDNIGHT </div> <!-- Link wrapper --> <div> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="menu.html">Menu</a> <a href="contact.html">Contact</a> </div> <!-- Address --> <div> 123 Any Street Scottsdale, AZ, 85251 </div> </div> </body> </html>
Let's check the browser again.
As you can see, we have our content there, but we still seem like we're really far away from where we want to go, and that's fine. That is the natural progression, so don't let that discourage you whatsoever.
Just so you know, everything we implemented is actually almost all of the HTML code that is right here on the page believe it or not. CSS is what's going to give us the ability to structure the page, to place the elements and align them where we want, and add in those styles.
Now we're not quite done yet. I want to add a few other items. In addition to having things like these wrapper elements, the other thing that I like to do is, I like to have div's wrapping around the single elements themselves.
So take, for example, our nav links. I think that each one of these needs to have its own div.
index.html
</head> <body> <!-- Navigation wrapper --> <div> <!-- Hours + phone --> <div> 555-555-5555 10 AM - MIDNIGHT </div> <!-- Link wrapper --> <div> <!-- nav Link --> <div> <a href="index.html">Home</a> </div> <!-- nav Link --> <div> <a href="about.html">About</a> </div> <!-- nav Link --> <div> <a href="menu.html">Menu</a> </div> <!-- nav Link --> <div> <a href="contact.html">Contact</a> </div> </div> <!-- Address --> <div> 123 Any Street Scottsdale, AZ, 85251 </div> </div> </body> </html>
So I'm going to get rid of that. And now right here, let's indent that. So this is going to be a wrapper div for the nav link. Let's just add a comment here. And we'll just say this is going to be the nav link. And then let's go and do it for each one of the other elements. So copy this, indent.
That's all we need. Each one of our links now has a div wrapper.
If you've been curious and you wonder what a div does besides just giving you some content, it also will place each item on its own line. So if I hit refresh, now you can see our nav links are all on their own line.
Now, this is not what we're going to have at our end result. But this is important because if you've never worked with div's before this might seem a little bit confusing on understanding exactly what a div does.
Now let's click on one of these div's, and it can be any of them, and if you come here on the right-hand side, do you see where it says, div { display: block; }?
What this means is anytime you see that something inside of the inspector tools is in italics, that means it's a base HTML default style.
Display block means that this element is going to just take up its own block space here on the page. That's the reason why before, all of our links were sitting right next to each other. But when we wrap them in div's, it moved them all on to their own lines.
That is what display block does. And this is going to be a perfect lead into what we're going to do in the very next guide.
In the next guide, we're going to be introduced to one of the most powerful tools in CSS, called Flexbox. And Flexbox is going to be what we can use to start arranging and aligning each one of these elements on the page.