Check out a free preview of the full Complete Intro to Web Development, v2 course:
The "Basic HTML" Lesson is part of the full, Complete Intro to Web Development, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces HTML (HyperText Markup Language), which is composed of tags. These tags are used to identify or "mark up" the different parts of a document like headlines, paragraphs, lists, and more. Brian takes questions from students.

Get Free Access Now

Transcript from the "Basic HTML" Lesson

[00:00:00]
>> Brian Holt: We're gonna start writing some HTML now, which is gonna be super exciting. So this is the raw building materials, right? So we're actually gonna pile up our lumber in front of our house before we start building it. So HTML stands for Hyper Text Markup Language. I had to look that up because I can never remember what it is.

[00:00:20] In other words, it's not important what it stands for, it's HTML. [LAUGH] So like I said before, you don't run HTML. HTML is just, it's like speaking English, right? You're literally just describing what you want, and you have a browser that just reads it and kind of displays it as it is.

[00:00:39]
>> Brian Holt: So it is static, which is the opposite of dynamic. It is unchanging, it's just, you just, here's HTML, it's like presenting you with like an essay, right? You're essay doesn't execute anything, it's just an essay.
>> Brian Holt: So the basic building block of HTML is a tag. Or you'll hear me sometimes use the word element, as well.

[00:01:05] An element is like one specific instance of a tag. And we'll kind of explain that as we go forward. But let's just get into an example, I think that's the best way to learn. So here I had this H1, right? So this is called an angle bracket. Then h1, which is the type of tag this is, right.

[00:01:25] So this is an h1 tag. Then you have your text inside of it. And then here, we have the closing h1 tag. Which is, you can tell it's angle bracket, slash then a tag. And then closing angle bracket.
>> Brian Holt: So I'll talk about what an h1 specifically is here in just a second, but I want you to get familiar with the premise of what a tag is.

[00:01:52] So this is basically saying that I have this header, this h1, right? This is the text that's inside of there and this is where it ends, right? So you can see here this is the title of my document. Again, this is editable so you can put things in here and you'll instantly see it inside there.

[00:02:12]
>> Brian Holt: So this is how HTML operates. It's just a bunch of tags with stuff inside of it, right? In this case we just have text inside of it but often tags will have other tags inside of it.
>> Brian Holt: So when it's rendered out to the browser this is what it looks like.

[00:02:34] So an h1 specifically is a header, right? That's what the h stands for. And the h1, the 1 part of it means it's the most important one for whatever section it's in, right? There's also h2s, which are the second level, right? As you might imagine, you can have an h1, that's the title of the page and you might have multiple subsections, right?

[00:03:00] Maybe you have a blog, and you have multiple blog posts and each one of those titles of the blog posts might be h2s, for example, right? So it's the second most important level. It's not that you can't have multiple h2s, you can even have multiple h1s, that's fine, too.

[00:03:16] But it's kind of a hierarchy, right? So you're saying that when you say something is an h2, it's not as important as the h1. And again, this goes all the way down to actually h6. There's no h7, I'm sorry. It's just hopefully you don't have six different, I don't think I've actually ever used an h6.

[00:03:37] Like on a website that I've written.
>> Brian Holt: Maybe I'm doing something wrong but no, not typically. I think I've used like an h3 before, I don't think I've gone any lower than h3.
>> Brian Holt: Okay, so this is the base layer of like what HTML is. It's just a bunch of tags that's really about it [LAUGH].

[00:04:03] So, that's what this looks like. That's the h1 right there, and that, in and of itself, is an h1.
>> Brian Holt: So it's bigger and it's bolder because that's what browsers do with h1s. They make things big and bold. The browser has a bunch of defaults of what it thinks an h1 should look like.

[00:04:25] Now when we get into CSS, we'll figure out later how to make it look like other things but just by putting an h1 on the page, that's what the browser does, that's what it's supposed to do, is make it big and bold. And you'll notice, when I was up here messing around with this, when I put h1, it was really big, right?

[00:04:42] When I put h3 or h2, it gets smaller each time, right? Down to h6 which is just a little bit bigger than normal text.
>> Brian Holt: So like I said, with CSS, you can change these things to make them look and act differently, right? So why is it actually important that we're using the correct tag, right?

[00:05:07] Why am I using the h1 if it's ultimately meaningless if I can change the way it looks? Well, the reason why its actions have been really important for a couple of reasons. The first and foremost one, and I would deem the most important one, is that it makes this website more accessible to people that are not using the website like you do or maybe you do, right?

[00:05:29] So like there's things like screen readers, right, for people that are blind, or hard of seeing, or otherwise permanently or temporarily disabled. They'll have these screen readers that will go through and it will actually look for the h1s on the page, it's like here are the important parts of this website.

[00:05:45] So it's being used in ways that you probably don't necessarily anticipate. So it's actually up to you as the developer to just use good practices and say like, okay if this is the most important part of this section, I'm going to use an h1 here, it's really really important because the web is for everyone, right?

[00:06:00] It's not for just seeing people it's for everyone, that's one of the actual fundamental tenants of the website. Is that, it's for everyone, so make sure that your doing things like that because it's really is an ethical issue. Beyond that it's also good for like Google, and Bing, and DuckDuckGo, and things like that, that's how they're actually looking at your website, it's like, okay, here's their h1, this is actually probably pretty important to it.

[00:06:25] And so they'll use that when they're kinda crawling your websites to determine where you're ranked, and how you're ranked, and what keywords you rank for, and things like that. So that's another reason why it's really important and then lastly, it's actually for your future self and your colleagues that will be working on the same code as you.

[00:06:40] Your going to write this code and then six months later, your gonna come back and it's like, what the hell did I write, right? That always happens. [LAUGH] That's why it's really important for you to write code that makes sense, right? Because when you come back later, you want it to be descriptive so that when you read it, it makes sense to you.

[00:06:57] A little known fact is that code is actually more meant for you than it is for the machine. You're just basically taking notes in such a way that the computer can understand it. [LAUGH] That's really what code is at the end of the day, it's notes that the computer can exercise or that can execute but you can understand when you come back later to make changes to it.

[00:07:17] That's the point of writing good code is that you can make it more readable and easier to modify later by yourself and by others. So use good HTML. It's worth the thought that you put into it to make sure it's good HTML.
>> Brian Holt: Let's see what else.
>> Brian Holt: The other thing is that when you write things like this, when you write good HTML, you end up making your code reusable, which is something that we as developers strive a lot to do, is to make our code reusable.

[00:07:50] What's really nice about that is if I make this really nice h1 like you know, matches the style of my website and all that kind of stuff when I go later and I make another web page I can just reuse that same h1 and not have to do any additional work.

[00:08:05] We'll get into that with CSS and how we're able to do that, but if you use good coding styles you'll end up making parts of your code reusable which makes you able to go faster. And less prone to bugs, that's another thing that's really important. So hopefully, I've explained to you at least a little bit, why it's important to put a little bit of thought into your HTML and not just make everything, you know, adiv or whatever it is.

[00:08:30]
>> Brian Holt: So a tag, whether it's opening or closing, it's surrounded by angle brackets. 100% of the time, all tags are surrounded by angle brackets. So each one inputs all that kind of stuff. This is what you're looking for when you're reading HTML or the opening and closing angle brackets.

[00:08:49] Closing tags, always have a slash right here after the opening angle bracket, for the, that's how you know it's a closing tag. Lastly you have things that are called void tags or self closing tags. And you'll see that slash here at the end next to the closing angle bracket.

[00:09:06] These are tags that open and close themselves, right? So they're self contained units. We'll explain here in a second why you would have that, but just know you'll have both self closing tags and then you'll also have tags that open and then close eventually, right? So this one right here, opens here, closes here, right?

[00:09:32] It's really important that, you basically treat these like parentheses, right? If you have an opening parentheses, you need to close it before you close any of the other parentheses, right? So, if I have, parentheses like that, that's really hard to see. It's easier to see up there.
>> Brian Holt: If I had like a square bracket there, I wouldn't close it like that, right?

[00:09:56] That doesn't really make any sense.
>> Brian Holt: Maybe make it a little bit bigger, just temporarily, so you can see what I'm talking about. This is what I'm talking about.
>> Brian Holt: So if you're doing parentheses you would have parentheses on the interior and then you would have square brackets on the outside, that would make sense, right?

[00:10:16] So you have to close the last one that was opened, that's basically what I'm saying here. So if I have an h1 here that opens I can't close the div. I have to close the h1 first. So like you see here where I have the h1 here and the div here this is wrong this is not valid HTML.

[00:10:33] So this h1 has to close before I can close this div. That make sense? It's just one of the rules of HTML.
>> Brian Holt: So we'll talk about divs here in a second so at the end we go over a lot of tags.
>> Brian Holt: Cool.
>> Brian Holt: So a self closing tag I'm just gonna put it right here.

[00:11:03] Something like an input.
>> Brian Holt: So you can say here, this is a text box, right? The way that you make this text box on this page is with this input tag right, that's what it does, is it allows the users to input stuff into a website that, eventually, whatever the user puts there can be sent to you, right?

[00:11:27] So it makes sense that this is a self-closing tag, you wouldn't actually have anything inside of it, that wouldn't make any sense, right? Because this is like one atomic unit that cannot be split apart, so that's kind of what these self closing tags are, they're things that really just can't be split apart, there's nothing inside of it, it doesn't make any sense to have anything other than a self closing tag there.

[00:11:47] So, you see here, that's what this trailing slash here means, it means this is a self closing tag. Unfortunately to make this a little bit more confusing, you actually don't have to put that slash there. So you can have an input like this, this is actually valid HTML.

[00:12:05]
>> Brian Holt: So it is in fact optional, but no matter what, input tags are always self closing and there's several others that are that way but for now we'll just talk about inputs.