Complete Intro to Web Development, v2 Basic HTML

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.
>> Brian Holt: 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 hypertext markup language. I had to look that up because I can never remember what it is.

[00:00:19] Or 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 like speaking English, right? You're literally just describing what you want, and you have a browser that just reads it and kind of just 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, here's HTML, it's presenting you with an essay, right? Your 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 world element as well.

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

[00:01:28] 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 the tag, and then a closing angle bracket.
>> Brian Holt: So I'll talk about what an h1 specifically 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 to my document. Again this is editable so you can put things in here and you'll instantly see it inside of there.

[00:02:12]
>> Brian Holt: So,
>> Brian Holt: 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 like the title of the page, and then 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 those 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]
>> Brian Holt: But it's kind of a hierarchy, right? So you're saying that when you say something as 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 have used an h6 on a website that I've written.

[00:03:40] Maybe I'm doing something wrong, but no, not typically. I think I've used an h3 before, I don't think I've gone any lower than h3.
>> Brian Holt: Okay, so this is the base layer of what HTML is, it's just a bunch of tags, that's really about it. [LAUGH] So that's what this looks like as the h1 right there, and that in and of itself is a h1.

[00:04:13]
>> 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. 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 it does.

[00:04:33] 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? When I put h3 or h2, it gets smaller each time, right?

[00:04:47] 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? Why am I using h1 if it is ultimately meaningless if I can change the way it looks?

[00:05:12] Well the reason why it actually ends up being really important for a couple 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 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'll go through, and it'll actually look for the h1s on the page. It's like, here are the important parts of this website.

[00:05:44] And 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 okay, if this is the most important part of the section, I'm gonna 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 actually the fundamental tenants of the web is that it's for everyone. So make sure you're doing things like that, because it really is an ethical issue. Beyond that, it's also good for like Google and Bing and Duck Duck Go and things like that.

[00:06:19] That's how they're actually looking at your website. It's like okay, here's your h1, this is actually probably pretty important to it. And so they use that when they're kind of crawling your websites to determine where you're ranked, and how you're ranked, and what keywords you rank for, and things like that.

[00:06:33] 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. You're gonna write this code, and then six months later you're gonna come back, it's like, what the hell did I write, right?

[00:06:46] 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. A little known fact is that code is actually more meant for you than it is for the machine.

[00:07:02] 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 it 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 so 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 make sure that it's good HTML.
>> Brian Holt: Let's see what else.

[00:07:38]
>> Brian Holt: The other thing is that when you write things like this, when you write good HTML, that 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. What's really nice about that is, if I make this really nice h1 that matches the style of my website and all that kind of stuff.

[00:07:57] When I go later and I make another webpage, I can just reuse that same h1. And not have to do any additional work. 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.

[00:08:15] 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 HTML, and not just make everything a div, or whatever it is.
>> Brian Holt: So, a tag, whether it's opening or closing, is surrounded by angle brackets.

[00:08:35] 100% of the time all tags are surrounded by angle brackets. So h1's, inputs, all that kind of stuff, this is what you're looking for when you're reading HTML, are the opening and closing angle brackets.
>> Brian Holt: Closing tags always have a slash right here after the opening angle bracket, that's how you know it's a closing tag.

[00:08:58] 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. These are tags that open and close themselves, right, so they are 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?

[00:09:25] So this one right here opens here, closes here, right?
>> Brian Holt: It's really important that you basically treat these like parentheses, right? That if you have an opening parenthesis, 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.

[00:09:52] If I had a square bracket there, I wouldn't close it like that, right, that doesn't really make any sense.
>> Brian Holt: Maybe I'll make it a little bit bigger just temporarily, so you can see what I'm talking about, this 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:17] 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? That's just one of the rules of HTML.
>> Brian Holt: So, I'll talk about divs here in a second, at the end, we go over a lot of tags.
>> Brian Holt: Cool, so a self closing tag, I am just going to put it right here, something like an input.

[00:11:08]
>> 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. It allows the user to input stuff into like a website so that you eventually that HTML, or 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.

[00:11:40] All right, there's nothing inside of it, it doesn't make any sense to have anything other than a self closing tag there. So you see here that's what this trailing slash here means, it means this is a self closing tax. Unfortunately to make this a little bit more confusing, you actually don't have to push that slash there.

[00:11:57] So you can have an input like this, this is actually a valid HTML.
>> 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. Any questions about HTML so far?

[00:12:19]
>> off screen female: So actually, if you the slash at the end of input you have a space before it?
>> Brian Holt: Yeah, I think that's just like a stylistic preference, I think that's technically fine.
>> off screen male: You don't need it?
>> Brian Holt: You don't need it, yeah. I always put it there, I don't know if I have a good reason.

[00:12:40] Habit, I suppose, [LAUGH] that's a good question, yeah?
>> off screen female: So, for best practices should you use the closing slash, or skip it, or is that really just stylistic preferences?
>> Brian Holt: I think the answer to the question is stylistic preference. I used to not ever put the slash, and then I started writing React, where you, with React specifically, which is not the same as writing HTML.

[00:13:07] But React requires it, so that's why I got back in the habit of putting it again, so up to you I think is the answer. Good question, anyone else, yes?
>> off screen male: In your example where you have the word hi, you have the hi on a separate line from h1 and the closing bracket on each one.

[00:13:31] Does it have to be on a separate line, or can they all be on one single line? All the h1, opening and closing?
>> Brian Holt: So, I like that question, thank you very much. You can definitely do this, right, is that your question? This is totally valid HTML, this will go through a browser and it will work perfectly.

[00:13:53] This is very hard to read, [LAUGH] so the whitespace is what this is called.
>> Brian Holt: If I go back to here, like this, this whitespace here, so all these spaces and returns and things like that, it's meaningless. It doesn't actually do anything, it's purely for you as a programmer to make it more readable for you.

[00:14:18] So this is far less dense, so it's easy for my eye to peruse very quickly, which is ultimately what I'm going for. So even though there's a bunch of space here, you'll notice that there's no space before this. HTML cuts off all of that space, so that's a good question, does that answer your question?

[00:14:37] Cool, so it's purely for you.
>> Brian Holt: Other questions?
>> off screen female: I have one more question.
>> Brian Holt: Please.
>> off screen female: So what is div and when do you use it?
>> Brian Holt: I'll get to it, just a second.
>> off screen female: Okay.
>> Brian Holt: But a good question, yeah?
>> off screen female: So when I do the first h1, and I type in say h5, it seems to input into the result the h5, and it does highlight the second h1 in red.

[00:15:08]
>> Brian Holt: Like this.
>> off screen female: It lets me do that, yeah.
>> Brian Holt: That's a good question, it's like what's happening here?
>> off screen female: Yeah.
>> Brian Holt: HTML, and browsers in particular, are very good at dealing with bad HTML. Because we have decades of bad programmers behind us, and good programmers, but also bad programmers.

[00:15:27] This used to be called quirks mode, [LAUGH] anyone that had to deal with quirks mode will probably get a little bit of PTSD right now. [LAUGH] But the short answer to it is, I don't actually know how it's going to handle this. But the browser is very resilient and will try to recover from mistakes like that.

[00:15:48] So this being red right here, this has a syntax highlighter on it, that's why this is green and this is black. And so that's the syntax highlighter breaking, that's why it's red right there. This looks like it's actually being rendered as an H5. Yeah, so it looks like this is respecting the H5, which means that Firefox in this particular case is respecting it as an H5.

[00:16:16]
>> Brian Holt: Good question though.
>> Brian Holt: Yeah, I think the sum of the story is that the browser will do its best to recover.
>> Brian Holt: And does a pretty good job.