The Parts of an HTML File

Quick reference

• 00:05 In this video, I wanna talk about the structure of an HTML webpage.
• 00:09 So all HTML pages have the same basic skeleton structure.
• 00:13 And you can see, we've got that structure right here in our first little program.
• 00:16 They all start out with this doctype HTML line.
• 00:20 This always goes at the top of every file.
• 00:22 And this, you don't actually need this, but it's best practices.
• 00:26 It's a good convention to do it.
• 00:28 And all this does is it tells us what this file is.
• 00:31 This is an HTML file and in fact we're using HTML 5,
• 00:34 that's the most recent version of HTML.
• 00:36 After that, the actual file itself starts with this HTML tag,
• 00:41 and it ends by closing the HTML tag.
• 00:43 And that's telling us everything between these two tags is our webpage, right?
• 00:49 So next, we have this head tag and this is important.
• 00:52 This is not our actual website, this is not stuff that you will see.
• 00:57 For instance, this My first web page,
• 00:59 it doesn't show up anywhere on our screen here.
• 01:02 Where that shows up is up here in the browser tab.
• 01:05 See this my first webpage.
• 01:07 So that's sort of what head stuff is.
• 01:09 It's stuff that's not necessarily seen on the page itself.
• 01:13 But there's a lot of important stuff that goes in the head section.
• 01:17 In fact, the head section is usually pretty big.
• 01:20 So what kind of other things go in in the head section?
• 01:23 Well, you put references to JavaScript in there.
• 01:26 We can do that later.
• 01:27 You put references to CSS files later.
• 01:29 We're getting in to that as well and you also put meta tags and
• 01:33 this look like this meta name= Rolls, description,
• 01:39 content equals this is my very first website.
• 01:48 Close that and there's lots of different meta tags and we'll
• 01:51 talk about some of them later on, but Search engines use this tags specifically.
• 01:55 If you go to Google and you type in, I don't know, fishing, whatever.
• 02:00 You see there's a bunch of sites listed but look at this.
• 02:04 My encounter begins that each of them has this little bit of text.
• 02:07 A lot of times Google will take that text right from this meta tag, not always,
• 02:12 sometimes it'll just scan your site and come up with the text on their own, but
• 02:15 a lot of times they'll just use this stuff right here.
• 02:17 So that goes in there to head section.
• 02:18 If you wanna make your website mobile ready,
• 02:20 you'll often put this view port tag and we'll talk about this later as well.
• 02:24 But it's a meta tag.
• 02:25 So there's lots of different meta tags and they all go in the head section.
• 02:29 Go ahead and close that.
• 02:31 Like I said also, we will, reference CSS files, JavaScript, and
• 02:35 all kinds of good stuff like that.
• 02:36 Next comes the body tag and
• 02:39 the body is generally the stuff that shows up on the screen is the Hello World.
• 02:44 It's all of the good stuff.
• 02:45 It's everything you see on the page.
• 02:49 So that goes in the body tag and
• 02:51 you can see, the body tag is usually one of the last tags that's closed,
• 02:55 right in front of the HTML tag, because everything goes in the body.
• 02:58 So this is the basic structure of a web page.
• 03:01 They're not all like this.
• 03:03 There's slight differences here and there.
• 03:05 But, for the most part, this is it.
• 03:07 And you'll notice, I talked about, in the last video, nesting tags.
• 03:12 And whenever you nest, it's a good idea to indent, just like this.
• 03:15 In fact, I would do it like that and
• 03:18 it's just a good way to sort of keep track of different things.
• 03:21 We can see everything between the head because it's indented.
• 03:24 We can see everything between the body because it's indented.
• 03:27 It's just sort of a programming best practice,
• 03:30 it doesn't really matter what programming language you're gonna use,
• 03:33 you always do this indenting sort of thing in order to keep things straight.
• 03:37 So, that's pretty much it, it's not that complicated.
• 03:39 We're gonna, you're gonna always use this, so kind of memorize HTML head,
• 03:44 title, body, and then the closing tags for each one.
• 03:47 Every time you make a webpage, you'll do the same thing,
• 03:49 you put the same things in there.
• 03:51 So definitely, sort of memorize that or write it down,
• 03:54 but you'll get use to it overtime.
• 03:55 You'll do it so many times that it just comes second nature.
• 03:58 So that's the HTML skeleton.
• 04:00 In the next video, we're gonna start to talk about some
• 04:03 other more common HTML tags that we'll come across.

Lesson notes are only available for subscribers.