Using Divs, Spans, and Emmet in HTML

So the content in our home page is starting to look better with the formatting, but this text being so wide, the full width of the page, that's just not working very well. We need to limit how wide this can get. It just does not look good at wide widths.

It would look okay at smaller widths on smaller screens, but not on bigger ones. So for that we're going to need to put on some sort of size limitation, and we're going to use a div tag for that. Now let's explore the difference between a div tag and a span tag, because previously we looked at span tag, and divs are very similar, but there's a slight difference here.

So I want to insert some span tags and some div tags. Now I'm going to teach you a cool little trick here when you're coding html tags. So I can open up the tag, type in the name of the tag, and when I hit TAB it completes the name, but then I have to close it.

That completes my opening tag. It automatically inserts my ending tag, but that was many typing here. We can actually do it with less typing using a built-in feature of vs. Code.

It's called Emmet, and actually earlier when we set our keyboard shortcuts, when we were setting a keystroke for the wrap command, there was a thing that said Emmet, wrap with abbreviation. So Emmet is based on abbreviations. Now I'm not going to use the wrap just yet, but this concept of Emmet is shortcuts or abbreviations.

The idea being if I type in span, that's the name of the tag, there's an Emmet abbreviation for that, and if I open this up, it'll actually preview. This is what it will complete to if I hit the tab key right now. So I hit TAB, boom, it creates the start and ending tags.

So any tag you want, you can just type in the name of the tag, and Emmet will expand it to the start and ending tag when you hit TAB. Or if it's something that doesn't have a start and end tag, like an image tag, it'll put in the image tag with a source and an ALT because those are things you normally want for every single image. When I hit TAB, boom, it inserts the source, the ALT, I just have to fill those in.

So Emmet is a huge helper in saving time, so you can type less and get more. So I could type in span, tab, and get a span tag very, very quickly. So I use Emmet all the time.

There is life before Emmet, and there's life after Emmet, and once you get used to Emmet, you just think of the tag that you want. For example, if I was doing CSS, I could just type in the style tag and hit TAB. So prior to now, I didn't want to introduce Emmet just yet because I wanted us to really focus on the idea of starting and ending, and I still want to emphasize that.

But once you get used to this idea that you must wrap something around something and you need this start and end, you can just type in the name of the tag you want, hit TAB, and Emmet takes care of the rest of the stuff. So this is a section of content in a span. So I'm going to put a period in a space there, and I'm going to copy and paste this whole line.

I'm just going to copy and paste it multiple times, and then I'm going to do a div tag. So div is short for division. You're dividing up the page.

So kind of like span says, I want to work with this range of content, div divides up your content into different groups. So they're both grouping tags. Kind of sound similar to each other.

This is a div. Okay, and I'm going to copy and paste that. Copy and paste multiple times.

Okay, and let's preview the difference here, and there will be a subtle difference. Notice that all the spans are next to each other in a line. Spans are what we call inline elements.

Inline elements are literally in a line. They will reflow. They're like a paragraph.

Divs, however, are block level elements. Blocks stack like building blocks on top of each other. So that's the only difference.

They both say, let's divide off or span across a group of content. So their way of grouping content. The only difference is, do you want the sections to stack on top of each other like divs? So divs are block level elements.

Other examples of block level elements are headings and paragraphs and list items. They all stack on top of each other. They're all block level elements.

Spans go next to each other. They're inline. So for example, links and images, you can put multiple links next to each other.

You can put multiple images next to each other, and those are inline elements. They go next to each other. So that's the choice.

Do you want them to be next to each other? Use a span. Do you want them to be on top of each other? Use a div. So kind of major page areas where they're stacking on top of one another, like a nav bar at the top and then a text area down below and a footer down below.

Those would be div type sections. Okay, so I'm going to close that up. We don't need that anymore.

So that means that I want to kind of wrap the whole page in a section here. Now, technically, I already have it wrapped in a section, if you will. I have the body of the page and that body of the page is what gives it this white background.

Now, let's say I want to give it two different background colors. One kind of on the text area where it's white and then outside the text area, I want it to be like a brown background. So I could style the body of the page because the body of the page contains all of my content.

So the body is a wrapper of sorts, right? It wraps all the content. So I could style that body tag. I could make a style for that.

Now, as far as ordering your styles, when it's one thing versus another that are completely different elements, you know, headings and paragraphs really have nothing to do with each other. The order of those rules does not matter. So for example, body, I could put it up top here.

First, I could put body down below. I'm styling a completely different thing, so it doesn't really matter. I think body is very generic.

It's kind of like a starter thing. So I typically like to put towards the top, but that's just more for me to be able to find the rule, not because it has to be there. And so I could give this body a background color.

And so I could say, give it a background color. And I've got this color here that we're going to give you in the workbook here. But let's say you're working for a company that has a company color you put in there, or you've designed something in Figma, or if you're a developer working with a Designer, if they give you a Figma design, they could indicate the color in Figma.

So you can copy and paste that hex code from that pre-made design, or you could type in a color and then use your color picker here to design one too, if you want. All right. So I'm going to put that background color on the entire body section.

Remember that everything is just defaults. So the default color of text is black. The default background color of a body is white.

You don't have to keep it white. You can make it something different. So that changes the whole background of the webpage.

But I want to make some part of the webpage different. I want to make a limited width column. So I want to make a column that's narrower than the entire page.

And I want that column background to be white. So I need another container because I need some parts of this body to be bigger than the stuff inside. And I want to wrap it all in a giant div tag.

So I'm going to open my div tag here. I'm going to cut that ending tag and I'm going to go all the way to the end. And so right inside the body here, I'm going to put in that div.

So basically, I start the body, start the div. Then at the very end, I end the div and end the body. If it helps, I can look at the outline over here and I can see the structure of my page.

I can see the head, which I'm going to close up. And in the body, notice that now the body has a div tag. In the div tag, I have a heading, images, heading twos, paragraphs, and so forth.

So all of those are inside. So this kind of shows you the structure if it helps you. And you can actually click on elements to jump around within your page.

So that outline can sometimes be useful. You can also do the same thing to kind of see the outline by hovering over an area and you can collapse. If something's taking up too much space, you can close it up.

So for example, I could close up the div and I could see that this div is sitting inside of the body. And that's the only thing right now that's sitting inside the body. And everything is inside of this div.

All my content. Okay, so there will probably be other div tags to divide up the page into different sections. So while I could just style a div with a rule up here, because you normally have more than one div tag, you normally want to put some sort of name on this.

Now to name this, we saw earlier that I could use a class. But to show you another way that you could also do it, you can also use an ID. And an ID is just another name that you can give it.

So you can name something with a class. You can name something with an ID. And let's say I call this wrapper.

I'm just making up the name wrapper, just like I made up my class names. The difference is that an ID is unique to one individual element. And you can never use it again within this webpage.

I can only give one thing an ID of wrapper. They're actually intended for other uses. They're useful for form elements, also for linking up and down the page.

We're going to see those kind of things later. For example, linking up and down the page, we're going to see an example of that where you have to use an ID. When it comes to CSS, I don't have to use an ID.

And I would actually, I think I and a lot of people would argue against the use of IDs that because they're so specific when it comes to our CSS, because we get a score of 100 compared to classes, which are only score of 10, they're kind of hard to override the styling of them. If you ever need to change their styling and you need to override it, it can be a little difficult. So even though I'm showing you how to use an ID, I would generally recommend using a class because I could easily use a class here and it would work just fine.

I don't have to use it more than once. Just because a class can be used more than once doesn't mean you have to. And it leaves you the opportunity that if you did need a second one, you could always use it.

If you use an ID, you can only use one per page. You only get one wrapper. You could have another ID of a different name, but the ID of a wrapper, you've used it here once, you can never use it again on this particular page.

You can't have a second thing called wrapper. You could have a different name, a different ID, but not wrapper. You only get once.

So why limit yourself? Why not just go with a class? So, but it is important to know what they are and how they work. Even though in this case, I would say we shouldn't use it. We should generally use a class instead.

Still good for your knowledge. If you get websites from other people, they might've used these. So it's still good to understand how they work.

So I can come up here. And if a period is a class, uh, wrappers, uh, sorry, IDs, uh, IDs are hashtag. So hashtag wrapper.

So period is a class. Uh, nothing, nothing would be a tag, just a regular tag. You know, one of these less than greater than tags.

Um, and then hashtag is ID. So find this, we know we are only styling one thing that there's only one wrapper because it is an ID and I can give this a background color of white, which I could either type in as white or, uh, white in hex code is also F F it's six Fs. So that's the other thing you can also do.

So you could do, uh, FF, FF, FF. It's actually red, green, and blue, uh, broken down into two parts. Um, and you can also, this could also be just FFF.

Um, the idea of why some of these could be one, uh, so things can be a word. Um, some, some colors have names, not all colors. There's like 200 something names.

Um, so the obvious ones like white, black, and those sorts of things, there's also things like papaya whip and other fun names. Uh, but normally I don't use those. I use hex codes to be more specific.

Um, but, uh, when things are being coded, um, they can be sometimes three, uh, and sometimes six. Uh, why is that? Uh, again, not that you have to know how hex codes work, but just as a curiosity, uh, it's kind of interesting. I thought it was fascinating once I actually learned what the deal was with them, because I was very confused by them.

Um, if you are coding red, green, and blue, so let's say, um, red, green, and blue values, you can have up to 256 values. If you do 10 times 10, you get up to 100. If you just had zero through nine, which gives you 10 numbers, you know, like one through 10, um, basically, so you just get 10,10 values that can't get you up to 256.

16 times 16 gets you 256 shades. So with red, green, and blue amounts, because we mix up our colors with RGB, uh, again, this, you don't have to know this, it's just kind of for your general information, just out of your curiosity, if you want to geek out a little bit with me here, um, 16 × 16 gives you 256, and that gives you all the shades necessary for your reds, your greens, and your blues. Each one gets 256 values, anywhere from zero, where you have no light, all the way up to 256, which is pure white light, or pure red, green, or blue light, when you mix them all together, you get white light.

Um, so if you do zero times zero, you get no light, so that's black. Um, but you got to get to 16 times 16. But how do you get to 16 × 16? You got to go, what's called base 16.

So that's zero through nine, A, B, C, D, E, F. So 16 × 16 is basically F times F. If you were doing zero, zero, zero, zero, zero, zero, because you're breaking it down into red, green, and blue, essentially, that's black. Um, you've got no color. But if you go all the way to FF here for red, because it's red, green, and then blue.

So let's say the second one, I go FF. Now I'm green, because I've done full green. Or if I do full blue, FF, now I get full blue.

And then any mixture of the, of course, uh, you can also do, if you do a little bit, you know, a little bit of color there, you could do like two, two. So there you'd have a little bit of red. Uh, it's almost black.

So you don't really see it. And then you keep going up six, six, you're starting to get a little more red. And then you get up to nine, nine, you're getting a little more red.

But if you want to keep getting brighter, you go from nine to AA, that gets a little brighter. And then B, B, C, C, D, D, keep getting brighter and brighter all the way up to FF, which is the highest. So the idea is red, green, and blue.

Now, if you have something that is double, double, double, essentially you can take each one off. So you could just do F01. So you can shorten that to just F01.

Or if you have, let's say, 3,3, C, C, 9,9, you could say 3C9, uh, as a shortcut. Not that you really have to know how those things work, because I don't that they're mixing up and coding up colors. The only thing I do sometimes is shades of gray.

And if you have equal amounts, like if you have 000, that's black. FFF, that's white. But anything where all three are the same, like F, like 444, that's a gray.

222, that's a very dark gray. Uh, CCC, pretty light, because once we get into the letters, we're getting pretty light. And if you go from A, B, C, D, E, so if you go D, D, D, you're getting brighter each time you go.

E, E, E, you're getting brighter. If they're all three the same, those are shades of gray. So those sometimes, occasionally, I might, I might, uh, play with those with shades of gray.

But, uh, don't feel like you have to know those. But just in case you were curious, what did those things mean? That's, that's the deal with those. And that's why they can sometimes be three or six characters long.

All right, so my wrapper is going to be white. And let's go back and hit refresh. And then we see some of that background color for the body a little bit peeking out.

And then we've got the white for the text. But I want that white to be smaller. So I'm going to give that a width.

The wrapper is going to be smaller. So I'm going to set the width to, and if the whole screen is 1400 pixels, um, I'm going to make this a lot smaller. Uh, let's just make it 580 pixels.

Um, be substantially smaller. There's going to be a lot of extra space around the sides. Notice how much smaller that is, how much extra space there is outside.

All right. Um, now the thing is if you use width, that is a fixed amount. That is not going to work well for small screens because now we've made it bigger than the screen and I've got to scroll side to side.

So that's not good. I need this to be a flexible width, which can be smaller than 580. Uh, I just don't want it to be bigger than 580.

So I've got to use a max width on this instead. Max width says that's the biggest it can be. That's the maximum.

So it can't be bigger than that, but it can be smaller. So on small screens, this can reflow and it can work on smaller screens. It just says you can't be bigger.

So it puts an upper limit on this just so it can't get too wide, which does not look very good. Now, I'm not a big fan of this being stuck on the left. I want the extra space that's out here.

I want that to be shared on the left and the right. So the space outside of something versus the space inside of something, we have two types of spacing. We have padding and margin, and this gets us into something called the box model.

The box model is where is spacing and how are things sized? So padding is space inside the box and margin is space outside the box. Just think of it this way. If you put, uh, if you're going to send something out by mail and you're going to send it out by UPS or FedEx or something, you're going to create a box, just like my box here, and you're going to put the padding on the inside of the box to protect your content from hitting the edge of the box.

You don't put padding on the outside. If you put your bubble wrap on the outside of the box, the UPS guy is going to look at you very strangely. So padding goes on the inside.

Margin goes on the outside. So thinking about that here, if I add some padding, uh, padding inside, let's say I put 40 pixels of padding, that is space inside the white. So notice how there's more white, right? So that space is inside the box.

Now, if I put margin, margin, let's say I do a hundred pixels of margin, just so we can see that there's a different amount here. Margin space outside. So that puts space outside here.

Now the padding is the white inside the box. I said the width of the box, which is a maximum width. So it can't get too wide, can be smaller than that, of course.

And as it gets to small screens, there will always be in this case, this 100 pixels of margin outside the box, 40 pixels inside the box. And then the box width can grow up to that size, but it can be less. Now, obviously this margin is way too much.

I would not want that much margin there, but I just wanted you to see that there is margin all around on all four sides. And if you're on a small screen, you will see the 100 pixels on all four sides. But when I'm on a bigger screen, even though the hundred pixels is there, we actually have extra because the width has been limited.

So there's extra margin out here. So instead of doing it like this, I want to actually say that the margin on the left should be automatic, as well as that the margin on the right should be automatic. Because I don't know how many fixed amounts of pixels should be on the left and the right.

I just want that space outside the box to be even. The idea is that there is space outside of the box and on small screens, I need less and on big screens, I need more. There's not a fixed pixel amount here.

And because I need it to be flexible, I need it to automatically figure out how much space outside the box on the left and right is, and it automatically just balances them. So that's how I center the content without centering the text inside, because I'm centering the box. What you don't want to do is something like text align center, because text align center would just center all the text.

That would not center the box. Here, let me delete this actually, just so you can see this. That would not center the box, that would just center the stuff in the box.

It would literally center the text, which would be fine if you want to center the text, but that's not what we want to do. So I'm not doing text align center, I am doing margin left and right auto. That is how we center a section of content.

There we go. Now I have something that is flexible, they can work on different size screens, doesn't go up to be too wide, that looks better. I might also want to have a little border as well.

When we're talking about the box model, the padding is inside the border, the margin is outside the border, so let's actually add a border. There are different attributes that we can use for border. We've got a border width, where I can set the thickness.

I'm going to make this really thick to start, just so you can see it. Now, if I just set a border width, I don't see anything change, because that's not enough. We also need to set a style and a color.

We also have a border style. There's different styles, dash, dotted. I want a solid one.

And now, okay, so now we're starting to see it. This is one where we have to put multiple settings together to say it's not just a size, but it also needs to know a style. There's a default color black, but I can change that.

So I can say border color, and let's say I just make it red, just so it really stands out, so you can see it. There we've got that red color. That looks really ugly, so let's use a better hex code instead.

Something more subtle. There we go. Something a little more subtle there.

When it comes to border, margin is outside the border, padding is inside the border. Now, in a case like this, where you have border width, border style, border color, this is what we call longhand. Longhand is writing out every attribute one at a time, which you can certainly do.

Kind of like back here, I had set margin, and I said margin and a certain amount, but then I came back and said, oh no, margin left, margin right. So things like padding is shorthand for all sides. I could do padding left, padding top, padding right, padding bottom.

I can do all four sides separately if I want to, or I could just say padding, and it does all four sides. When you have the shorthand versus longhand, you can always use the longhand. That's not a problem to use, but it is more coding.

If you want to keep your code more sustained, if you want to keep it shorter, we call it keeping your code dry. Don't repeat yourself. We're kind of repeating ourselves.

Border width, border style, border color. We keep saying border, border, border. We could use shorthand instead, and I'm going to write them both, and I'm going to delete the one.

I could say, let's do this same thing. I could say, make it 20, make it solid, and then take the color, and that does the same thing as this, with just a lot less writing. So I don't have to say width, style, color.

These are three different values that are very distinct from each other, and I can simply say border as shorthand, and it says, I know that those are all the different things tucked in there. So instead of this, we're going to do just this, and this is shorthand. Now, if you want to spell it out, and you want to write the longhand, again, that's fine.

It does work, but this will be less code to type, and it works exactly the same. There is no difference there. If you can keep your code dry, don't repeat yourself.

That will keep your code more efficient. Along those same lines, there's some things we could do to clean things up. For example, I have been repeating myself with the font family that we did earlier.

We have repeated that with font family on the heading 1 and the heading 2, and then we have a different font with paragraphs. So let's say, normally, I want it to be Arial, and maybe the only place I want for it on is paragraphs. What I could have done is said, let's not do it individually, multiple places.

I'm going to cut that, and I'm going to paste it up here. By doing it on the body, everything inside the body will now get that font family. All of the body's children will inherit that setting from their parent element, which is the body, because everything, all our content is in the body.

So then I don't have to put it in the heading 1, and I don't have to put it in the heading 2, because since everything is in the body, it will get it from the body. Now, paragraphs come in and say, oh, but I want to be this. So they will override, and the children can do their own thing.

They don't have to listen to their parent. A little funny story there, but paragraphs, because they are a child of the parent, they would inherit the setting. If they don't have this, then they would be Arial, but because they come in and say, oh, yeah, I know, but I want to be something different.

They will override that, and they will win over the earlier rule, in this case, because it is a child, and it will take its setting over its parent. Okay, so I hit refresh. Everything still looks the same, so it still works just fine.

I just cleaned up my code so that if I do want to change my main font here, I can change it once, and I don't have to have it many different times where I'm repeating myself, because if I'm repeating myself, I have to keep updating the code over and over again whenever I want to make changes. So these are things that we can do to clean up our code and keep it more efficient and easier to change. And less code means slightly faster loading web pages.

Let's go ahead and you can do exercise 2c in the workbook.