All language subtitles for 012 The Anatomy of an HTML Tag.en_US

All right.

So let's talk about the anatomy of an HTML tag and break it down to its

component parts so that we can actually understand how they're structured and

how we can use them. So we've written HTML elements like so.

So here we have the words hello world

and they're in closed by an opening tag and a closing tag.

And in between those tags is the content that we want to apply that structure

to. So if you think bank to the days of marking down the manuscript,

it's exactly the same as putting down a squiggly line underneath certain words or

phrases and asking the publisher to make it bolded

to affect the structure of certain parts of the text. Now, in this case,

the publisher just happens to be our browser.

So these tags make requests to the browser

asking it to structure and display our plaintext in the way that the web

designer wanted it to be shown.

Now the other type of tag that we just saw are tags that don't have a closing

tag. They're expressed simply like so.

And these are called self-closing tags and we've seen that with the break tag

and there's a few more others that work like this also.

Now how do we find out if something requires a closing tag or is self-closing?

Well, this is where we head to the documentation again. So

if we have a look at the documentation for the heading elements,

you can see that there's this part in the table that says tag omission

and it says that both the starting and ending tags are mandatory so that you

can specify which portion of your text you want to apply this structure to.

Now, if we have a look at the br or the line break element,

you can see that under tag omission,

it says that it must have a start tag and must not have an end tag.

So this is how we find out how we write our tags. Now, while we're here,

I want to introduce you to another element called the horizontal rule or the hr

tag.

And this will allow us to create these horizontal lines above and below our

portion of text. So as you can see in the documentation under tag omission,

it also says that it must not have an end tag.

So this is also a self-closing tag.

Let's head back over to our pen so that we can add these two horizontal rules

above and below our text. So the first one is going to go here

and the last one is going to go here.

You can see that our webpage now has two horizontal lines above and below our

main portion of text. Now,

if we have a closer look at this website,

you can see that their horizontal rule is a little bit thicker than ours.

So how can we make ours look more like theirs?

Now, this is part where I show you a neat trick. On any webpage that you open in

Chrome

you can simply right click on the element that you're interested in and click

inspect in order to look at the HTML and CSS code that's being rendered in the

background by the browser. So you can see here, they've got an hr element,

horizontal rule,

but they've got also all of this going on afterwards.

What exactly is that?

Now we know that the first part of the tag is the HTML element and it's be or hr or

whatever it is that you want to use.

Now the second part inside the angle bracket or

inside our tag is new and this is called an HTML attribute and it basically

gives more information to the browser to specify modifications to that HTML

element. So in this case, we're saying that we want a horizontal rule,

but we want it in size three. Now, what does size three mean

and how do we know that we have these HTML attributes available to us?

You've guessed it. We're going back to the documentation.

Now I know I'm making a big deal about going to the documentation,

but it really, really is an important skill. Understanding

and being able to look up the documentation,

being familiar with the structure of it and where to look in order to find out

how to implement or do certain things.

If we have a look at our documentation for hr,

you can see that there's this section called attributes.

And that's what we spoke about just now. The attribute comes after the main HTML

element and is separated from the element by a single space.

In this case, the horizontal rule element has actually quite a few attributes,

including align

so you can specify whether if you want your horizontal line to align to the left

or align to the right or be centered,

you can specify the color of the horizontal rule,

you can set whether if you want the horizontal rule to have shading or not,

and you can also set the height in pixels of that horizontal rule,

which is what we saw earlier on over here. So in this case,

the reason why their horizontal rule looks different ours is because ours is by

default, only one pixel high or one pixel in size

whereas theirs,

if you inspect in the HTML, is three pixels in height and they've also specified

no shade i.e. no shading to the horizontal rule.

So if we want to make our website a seamless copy of what we see here,

then we also have to specify those attributes. So if you remember,

the horizontal rule is a self-closing tag. And so inside the tag,

we're going to make a space

and then we're going to specify the name of the attribute

which we know from the documentation to be called the size attribute,

and we're going to set it to equal three pixels.

And then we're going to specify that it is no shade i.e. no shading.

And we know all of this from the documentation.

So now once our code updates,

you can see that this brand new horizontal rule looks completely different from

what it was before and we can copy this over to the top as well

so that our horizontal rules look exactly the same as what we've got over here.

So now we've seen HTML elements that require an opening tag

as well as a closing tag.

We've also seen HTML elements that have a self-closing tag.

And finally,

we've seen that HTML elements can also have an attribute where you can specify

modifications to the default element. Now,

all we need is just to add one final tag called center to our HTML file

and we would have now faithfully copied what this website looks like.

So you can have a look through the HTML by, remember, right-clicking and

inspecting in Chrome.

And you can look through to see how they've structured the rest of the document

as well. Now, this is a good point to mention our first challenge.

So we've got this code pen now where we've been messing around with the HTML.

Now you can either save this anonymously or you can create a free account in

code pen in order to be able to access this later on.

But I want you to create a brand new pen and this pen is going to be our code

playbook. And you get to use this document as an interactive notebook

if you will and I want you to document here

all the new things that you've learned as we progress through the course.

For example, in this and the last lesson, we learned about the h1 tag.

So in our code play book,

the first thing that's going to go in is your h1 tag

and you can say that this is a level one heading created using the h1 tag

and you go ahead and close it off. And you can look through the documentation to

perhaps copy some of these code snippets over,

but make sure that whenever you're copying pasting code,

that you understand what the code does.

There is nothing worse than copying and pasting code that breaks your website

because you didn't understand what you've put in there.

So we can go ahead and then modify each of these so that when we're creating our

own websites and we want to come back to our playbook and have it as a point of

reference, then we'll be able to see easily at a glance,

all of the elements that we've used and that we've learned about before.

So my challenge to you is to create your very own code playbook and to start

keeping notes on all the things that you're learning in this course. Now,

sometimes with certain elements, for example, the line break, you won't

be able to put any text inside the line break in the same way that we've

done so for the h1 tag.

This is a point where you can use a comment instead in your HTML file.

Comments are portions of text

which are marked out to be ignored by the browser.

And they're usually places where you write notes to yourself or notes to fellow

programmers who might be looking at your code. So in HTML,

we create a comment by using the angle bracket,

a exclamation Mark, two dashes,

and then to close off the comment,

we use another two dashes and a closing angle bracket.

And everything in between here is a comment.

You can see that usually it gets highlighted in a different color and none of it

gets interpreted into the webpage.

So this is where you can put sections for your notes. For example,

self-closing tags.

You can make it into several paragraphs just by putting the closing tag at the

bottom.

And you can write notes on the elements as we come across them and keep this for

your own reference. By the time when you're ready to create your own websites,

it will be a goldmine of a resource to jog your memory on all of the lessons

that you've learned. So in the next lesson,

we're going to be building our very first website and it's going to be really,

really awesome because we're going to be using a real text editor and we're

going to be putting that website live onto the internet.

So there's all of that and more yet to come.

So I we'll see you on the next lesson.