Common HTML Tags

[00:00:00]
>> Something that probably we haven't talked a little bit about yet, but notice that these are on different lines. This is actually just purely from me as the developer, right? If I hit Enter a bunch of times here, so there's a bunch of what we would call whitespace here.

[00:00:15]
Notice, this isn't getting a lot more spaced out. Actually, it is for a different reason. But typically, this whitespace is not actually significant. Yeah, I forgot these are in preformatted code blocks. Typically, though, in HTML, the amount of whitespace is not important. So yeah, okay, cool. Let's talk about anchor tags.

[00:00:52]
Anchor tags are links, right? So if I wanted to send you to a different web page, so, and I think we kind of intuit this already. If you look at this and you saw this on a page, right, Frontend Masters, Visual Studio Code, CodePen, you would know because these are colored differently and they're underlined.

[00:01:10]
And there's the little pointer guy whenever you hover over it, that's a link, right? That goes somewhere. So if I click on this, right, it takes me to frontendmaster.com, right? That is what a link does. So the a, which stands for anchor, not that you really need to care, you've just caught an a tag, that's what I do.

[00:01:32]
Then this little href bit here, which is called an attribute. There's a whole section of attributes, so we'll talk more about that here in a bit. But the href identifies where it goes, right? So this goes to www.frontendmasters.com. And then here, between this is actually what's displayed to the user, right?

[00:01:48]
So if I hover over this, it doesn't actually say frontendmasters.com, it just says Frontend Masters, but if I click on it, it takes me to Frontend Masters. Same thing here with the VS Code one and the same thing here with CodePen. So that's the way that you link various different things, is using a tags, Okay?

[00:02:13]
Let's talk about divs, which is short for division. I like to think of divs like cardboard boxes. A cardboard box is more defined by what's in it than the cardboard box itself, right? The most interesting part of a cardboard box is not the box, unless you're a cat.

[00:02:35]
It's more what's inside of the box that makes a difference. So here, I just put a random div here so that you can see. Here, I just made it a red square, using a little bit of CSS here, which again will have a whole section on CSS. But in and of itself, if I just do div like this, This is an empty cardboard box, there's literally nothing in it.

[00:03:00]
I have to put something in it for it to be interesting. So now, I have a cardboard box that has a heading in it. That's way more interesting than an empty cardboard box. So a div, which is a division, is basically you're identifying this part of something is distinct from something else.

[00:03:22]
It's a generic divider between something. It'd be like, if you had a filing cabinet, you put dividers between your various different types of files, right? So we'll use them a lot. It's actually one of the most common tags you use, because typically, you have a lot of divisions of various different sorts of things in your code.

[00:03:40]
But in and of themselves, they don't do anything, they're defined by what they're in. This will make a lot of sense once we start getting into CSS, because you'll use divs and CSS together to move things around to make them different colors, all those sorts of stuff. So again, this div here, it's defined by style and what I put on it.

[00:03:59]
I basically took a marker and made a pretty div. But I can put things inside of it as well, which is what I just did there. Right, cool. So that's a div. By the same token, there is this thing called the span. So if a div is a cardboard box, a span is a Ziploc bag, it's a much smaller idea of a div.

[00:04:26]
So you can see here, I have this bit of text here. So this is a paragraph of text here, this is important text, but I wanted to really emphasize important. So what I did here is I put important into a Ziploc bag using a span, right? So you use it to emphasize different parts of text, or just denote that this bit of text is different than the rest of the text.

[00:04:50]
And then you can use things like CSS or JavaScript to make the individual span do things. But it's gives you basically a hook to hook on to some specific piece of text. If I take off this style portion here, this important part still in a span, right? It's still here, but I just haven't done anything with it.

[00:05:09]
So basically, I put a little hook on it, and I didn't do anything with the hook, right? So you need to do something with it before the span is actually useful. So I just made it underline something using a bit of style here. This is CSS, again, we have a whole section on it, so don't worry necessarily about that.

[00:05:28]
I want to show you what you can do with the span, Okay? Let's talk about ordered lists, unordered list, and list items. So you'll see ol and ul tags, stands for ordered list and unordered list, and it's exactly what it sounds like, it's just a list of information.

[00:05:49]
So if I look down here, I have this bit of information. So you can see here the 1, 2, 3, the first one, the second one, and the third one, and that just looks like this. I have an ol with three different li's. So the ol denotes that this is a list of stuff, right?

[00:06:09]
And inside of the list, I'll have various different list items, the li's, right? The first one, the second one, the third one. So notice, I didn't actually say 1, 2, 3, I didn't put that anywhere, right? By making it an ordered list, those just show up automatically, right?

[00:06:25]
Cuz I'm making a list and checking it twice, okay? So an ol is an ordered list. And you use an ordered list when the order is important, right? If I put the first one here, and then the second one here, that doesn't make any sense. I've now since lost the sense of order, so this ol doesn't apply anymore, doesn't make any sense.

[00:06:54]
So you use the ol when order is important, right? If I was gonna list out, I don't know, the past ten winners of the MBA, there's an order to that, right? And if I switched the order, then the list would no longer be correct. So that's kind of the thought process that you should use to determine if you should use an ol or ul.

[00:07:18]
Is that if I switch the order of two of these things, will the list still be correct? If that's true, that means that there's no order, then you use an unordered list, a ul. So here, notice that these are bullet points, which implied no sense of order. I could swap any one of these, an item in the list and other items in the list, blah, blah, blah, doesn't matter which one comes first.

[00:07:42]
So this is a good candidate to be used with an unordered list. So again, anything that's a list of things, you'll use a list, whether it's unordered or ordered. Cool. A button, as you may have guessed, is a button. So you can see here, I have this Click me button, it doesn't do anything, right?

[00:08:08]
But that's how you create buttons in HTML, is with the button tag. So you can think of this button like a doorbell that someone installed on a house and didn't actually hook up to anything. It's a button, you can totally press the doorbell, it just not gonna do anything, right?

[00:08:24]
I've installed my doorbell on this particular page, I just never hooked it up to anything, so if you click the button, nothing happens. In other words, typically, you need JavaScript for the button to react to something. Question mark, yeah, it doesn't do anything. But these are just good things that you can show to users like, hey, you should click this because it's gonna do something, right?

[00:08:51]
If you had like a form on a checkout page and you have a checkout button that you're telling the user, hey, click me, I'm gonna do that action that the button says, right? Okay, let's talk about image tags, which are img tags. So, some people kinda get confused, it's like, shouldn't image live in CSS, it's like it's style, right?

[00:09:16]
But think about it, if you go to Instagram, right, a social media site for images, the content of Instagram is the images, right? So normally belongs in the content, the images typically will live in your HTML. Because that was really confusing to me when I was starting, I was like, why am I putting my style in my HTML?

[00:09:40]
Particularly with images, they belong more to the content than they belong to the style. You can sometimes use images with CSS, and we'll talk about that, but you can make background images. But look at the dotted background here on my website, that would be a good candidate for a background image as opposed to a content image.

[00:10:04]
And I'm talking content images more like if you go to the newspaper, and you're reading the newspaper, there's a big image of whatever the top story is. That's content, right, that's part of the story. That should live in your HTML, okay? So I have three image tags here of my best doggo, Luna, very cute doggy.

[00:10:25]
She's kind of a jerk, I love her. The way I do that is I've an image tag, you give it an src, which stands for source, as you might imagine. You tell it where it lives, right? So this is just an address, right? So if I copy and paste this into a different tab, right, this is actually a valid address on the Internet for Luna, okay?

[00:10:50]
And I give it an alt text, so an alt text is if someone is hard of seeing or blind, they can tab over this and obviously they can't see the image, right? So the screen reader will tell them what you put here in the alt. So I'm gonna say, technically, it is valid to leave these off.

[00:11:09]
But I'm going to tell you that if you have an image tag, you should always put an alt text. It's just the ethical thing to do so that everyone can enjoy the Internet. The Internet is for everybody, okay? Now, notice here, these are self-closing tags, which we talked about, right?

[00:11:28]
Because there's nothing inside of the image, right? The image is just a tag unto itself, so that's why you're gonna put this slash here. And technically, it is optional, you can leave it off. I just choose to put it on there because to me, it makes it more clear what I'm trying to do.

[00:11:47]
One more thing about alt text, Google and Bing will index it. So Google will crawl your website, it'll find all those alt texts, and will index your images based on that as well. So alt text is always a good idea, okay? So you can see there, I mean, you can see here, I'm putting a lot of random whitespace in these, it's totally fine for you to just do something like that, right?

[00:12:13]
The spacing here is totally optional. In fact, you might even argue, might be clearer if everything was all on the same line. That is up to you.