Locked lesson.
About this lesson
Exercise files
Download this lesson’s related exercise files.
Understanding an HTML Tag.docx59 KB Understanding an HTML Tag - Solution.docx
59 KB
Quick reference
Understanding an HTML Tag
In this video we'll look at the basic structure of an HTML tag.
When to use
Most HTML tags have both a beginning and an ending tag, but some do not.
Instructions
HTML tags, or Elements, usually have both an opening and a closing tag. The closing tag will have the addition of a forward slash, for example:
<h1>This is a title</h1>
One tag that both opens and closes itself (without a closing tag) is the BR tag, which is a line break tag.
<br />
Common HTML tags include:
<head> The head tag is used for metadata, like your page title.
<title> The title tag is used for your page title. It is nested inside the head tag.
<body> The body tag is used for the body of your text on the page.
<h1> The h1 tag is used to define the largest (and therefore most important) heading on your page. There are other heading sizes you can use, <h2> <h3> <h4> <h5> <h6> , with h6 being the smallest, and therefore least important.
You can see the tags above used in the following example. Note how the title tag is 'nested' within the head tag.
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World!</h1>
My name is John Elder
</body>
</html>
Hints & tips
- HTML Tags are also called Elements
- We'll usually refer to them as tags, not elements
- Most HTML tags both open and close
- Some tags don't close (or close themselves in their opening tag)
- One tag that closes itself is the <br /> line break tag.
- 00:05 Okay, so it's time to start learning HTML.
- 00:07 In this video, we're gonna dive right in and talk about basic HTML tags,
- 00:12 the structure and what the whole concept is behind this.
- 00:15 So, I mentioned earlier in the course that HTML is not really a programming language,
- 00:19 it's a hypertext markup language.
- 00:21 And basically, what we're doing is marking up text.
- 00:25 And we do that by wrapping the text in these tags.
- 00:28 And HTML tags almost always have an opening tag and a closing tag.
- 00:32 You see the title tag for instance, this is the opening tag, title.
- 00:36 This is the closing tag.
- 00:37 And you can tell it's a closing tag 'cause it has this forward slash in it and
- 00:40 that's what closing tags looks like.
- 00:42 And everything between those two tags is the text that's being marked up.
- 00:47 So, whatever is in-between these tags is having something done to it.
- 00:51 What's it having done to it?
- 00:53 Well, whatever the tag you use would do different things.
- 00:55 Learning HTML is basically just learning all the tags, learning what they all do,
- 01:00 and sort of knowing when to use each one.
- 01:02 And another word for these tags is element.
- 01:05 This is an HTML element.
- 01:06 This is the title element.
- 01:08 This is the body element.
- 01:09 This is an H1 element.
- 01:10 This is a P element.
- 01:11 You don't really use the word element but I figured I'd tell you what it is.
- 01:15 I always use the word tags,
- 01:16 everyone uses the word tags that are basically just HTML tags.
- 01:19 But technically, they're HTML elements and
- 01:22 we're gonna learn all the HTML elements that we can in this course.
- 01:25 I'll just refer to them as tags mostly.
- 01:27 Now, there's a couple of things, not every HTML tag opens and closes.
- 01:33 Some of them both open and close themselves.
- 01:35 Here's an example, this is a line break tag.
- 01:38 And, we're gonna learn all these tags later.
- 01:42 And what this does, let's just type in, this is a second line, and save this.
- 01:49 Now if we come back to our server here and
- 01:51 click reload, we see it's bobbed this down onto a second line.
- 01:55 Now if I remove this, let's just get rid of these real quick.
- 01:59 Now if we look at this, this is all on one line.
- 02:02 Even though in our editor here, we've put these on separate lines,
- 02:06 it's not like this, we've done it like this.
- 02:11 But on the webpage, it shows it all on one line.
- 02:14 If we put this line break tag, save it, it bobbs it down to the second line.
- 02:20 But my point is, this is just one tag, it's not an open and a close,
- 02:24 it's just one tag.
- 02:26 Well, in this case, we put this little forward slash and the end and
- 02:29 that sort of convention for some of these tag that don't have a closing tag.
- 02:33 You put this forward slash at the end and
- 02:35 that sort of represents this forward slash and this forward slash.
- 02:38 So, that is one kind of weird thing about HTML to learn.
- 02:41 Another weird thing is that tags can be nested.
- 02:45 Tags can be inside of other tags.
- 02:47 For instance, like right here, here's our HTML tag.
- 02:51 We'll get into this stuff later but
- 02:53 you can see the closing tag is all the way down here.
- 02:55 All of this stuff is nested within this tag and the same thing for this one.
- 03:02 Here is the head tag.
- 03:04 Head tag should end, Right there.
- 03:12 So here we see, here's the head tag, inside of the head tag,
- 03:15 there's this title tag, inside of the title tag is this text.
- 03:19 So, these are all nested tags.
- 03:21 And there's a lot of reasons why you nest tags,
- 03:24 just a function of HTML, and we'll get in to all these as we go along.
- 03:27 But, those are sort of the things to know about tags, they open, they close
- 03:32 most of the time, sometimes they open and closed and they can be nested.
- 03:37 Technically they're called elements, but we're gonna call them tags,
- 03:40 and that's pretty much all you need to know about tags.
- 03:43 There's a little bit more to learn and we'll learn that as we go along.
- 03:47 So in the next video, I wanna start to talk about something called attributes.
Lesson notes are only available for subscribers.