HTML Elements and Attributes

Welcome back to Educator.com.0000

Today's lesson on HTML and Elements and Attributes is going to cover just some of the basic syntax for elements and attributes.0002

Let's get started: Even though a proper use of the elements and attributes isn't technically a matter of syntax,0012

I am including it here because, if you use elements the wrong way, it is still non-conforming--which means you're wrong.0022

So, it will not actually break the browser, but your code is not correct.0030

The HTML5 working group defines all elements and attributes in a specific way, so that they have certain meanings; it is called semantics.0035

And if you use an element or an attribute for any purpose other than what it is meant to be used for, then your code will be non-conforming.0044

So, you need to remember to keep semantics in mind and code correctly.0053

You have to use the HTML5 spec elements and attributes; you can't make up your own and use ones from other specifications.0060

Here is an example of two headlines: Educator.com and Learn From the Top Instructors in America.0066

And they are both directly underneath the body element.0075

Now, this is actually semantically wrong, because this second header here is not a subsection heading.0078

It is more like a subtitle than anything else.0087

But what each one of these two tags are indicating is that it is beginning a new subsection.0091

To correct this, we would need to add another tag here, called <hgroup>, and then close it out here...stop hgroup.0097

And now, it is semantically correct, and the code is conforming.0115

The syntax for normal HTML elements is fairly simple.0122

It always consists of a start tag (which is this <strong>), and then the content0126

(which is what is between the start and the end tag), and the end tag.0131

And for normal HTML elements, that is the syntax.0136

You consider all of it the element, and then there are two tags: the start tag and the end tag,0142

although most people use the word "tag" and the word "element" interchangeably.0147

Let's look at an example, really quickly, of how to code a basic element.0154

We are going to do just the same thing as before: we are using the <strong> element.0165

And you will see that the text editor I am using automatically changes the color.0176

Your text editor doesn't necessarily have to do that.0181

And if we load it up in our browser, we can see that the text shows up.0185

The elements themselves don't show up--just the content of the element.0193

So now, let's look at void HTML elements, which are like normal elements, except they don't actually have any content to them.0205

They don't require an end tag; you can also call them self-closing tags.0213

And an example--probably the one you will use the most--is the <br> tag, which inserts a line break into the text.0216

Here, we have this little <br> tag inserted right before the word line.0224

And what it is going to do is create a line break in the browser.0229

And you will notice that, over here, there is no stop br; that is just because there is no content.0234

It doesn't encapsulate a certain amount of text; it is what it is.0240

The void HTML elements you will probably use the most will be the br tag, the hr tag (which stands for horizontal rule),0243

the image tag (which is probably one of the most important, because it allows you to include images--0255

it should be obvious why the image tag doesn't encapsulate any text; it just gives you the address to an image),0260

and then the input tag (when you get into forms and just have an input tag,0268

it doesn't have any content to it besides what you put in the attributes).0271

This is an exhaustive list of all the void elements, but don't worry about memorizing it right now.0277

What will happen is: when you need to use it, you will find out what it is, maybe from references like the HTML5 specifications, etc.0282

But as you learn the tags, you will learn what these different things are.0293

But the ones that I have indicated here are probably the most important.0297

Let's look, really quickly, at what it would look like to use a self-closing tag.0300

Let's say this warning here has a little sentence following it that says something like "This text has a <br> line break."0311

Now, you will see that it is showing up next to the strong Warning, right next to it.0335

And then, it breaks over right before the word "line."0341

Now, let's say I don't want it to be on the same line like that.0346

I can come in here and add another <br> above, and refresh again, and it pops down onto its own level.0349

That is how these tags usually work.0362

HTML comments are actually not something that the user is going to see;0374

but it is something that ends up being very useful for yourself (for self-notes), or for other web developers.0379

And it is sort of like an element, except that it has this special beginning, where you have the exclamation mark and two dashes.0384

And then, everything between that and then the two dashes and the closing > will be hidden from view for the user.0392

The browser will just read this, and then it will move on until it finds this pattern of text; and it will ignore everything else that it comes across.0400

Let's look, really quickly, at our code, to see what that would look like.0411

Now, if you are following along, you should know what is going to happen when I refresh here.0425

Nothing happens, because the text is hidden.0433

HTML attributes are a way of giving additional information to an element that describes additional functionality, behavior, or just information.0448

In this example, we have a link to Educator.com.0459

So, looking at it, you can see that this is the start tag, and this is the end tag.0462

This tag is between these two carats, here and here; but it has, additionally, an attribute.0472

And the attribute consists of...well, this entire thing here is the attribute.0479

But it is broken down into a name here, and the value of the attribute, and they are linked with a little equals sign (so the name equals the value).0486

And so, in this case, href is the name of the attribute (which stands for hyper reference, which just means it is a hyperlink).0498

And then, the value is the URL that the hyperlink is going to.0506

The browser is going to take this Educator word, and it is going to make it an anchor tag; it is going to make it anchored.0510

And then, it is going to make it a hyper reference to the URL educator.com.0517

Let's see what that looks like: first, let's just have the anchor tag by itself.0525

This is a placeholder link without the attribute.0530

When you put your cursor over it, it actually doesn't look that much different; and when I click on it, nothing happens.0544

But if we were to add the attribute in here, then we will see how it really works.0551

This is just simple right now, and I am not following some of the best practices of indentation.0561

It is just to give you a quick look at how this works out.0568

I am tabbing back over to the browser; when we refresh, you can now see that it is an underlined link.0572

And if you put your cursor over it, you can see: down at the bottom, the URL shows up.0579

And if I click on it, it will take us to educator.com.0583

In attributes, we can encapsulate the value with double quotes or single quotes or no quotes.0589

It is probably best practice to just do double quotes; it makes you save some time, because there are certain circumstances0597

where it will break if you don't use quotes--for example, if there is a space in the value, or other things like that.0603

You can also use as many attributes as you need to; just put them in the start tag and following a space.0609

Whitespace is a little bit counterintuitive to what you might think of in browsers,0623

because the browser will actually take as many whitespace characters as it finds in the code,0628

that are adjacent to each other, and collapse them into one space.0635

Let me pull up an example to make this a little bit more clear.0639

And you can probably see some of this happening already.0643

I am going to insert a few line breaks here, and then I am going to type a bunch of spaces, and then a whole bunch more spaces.0647

Now, what the browser is going to do in reading this code: it is going to take all these spaces here and collapse them into one space.0659

It's going to take all of these spaces and all of these line breaks up to here and collapse them into one space.0666

Just because I hit a carriage return here, it is not actually going to put a line break in; that is what this tag does.0673

And it is not going to use these spaces to put padding out between the words, or in front of a word.0680

It should just pop up by itself.0688

I just entered the words "hello world" here, and when I hit refresh, think about where it is going to show up.0694

OK, if you thought that it was going to show up down below, that is because you are thinking in terms of the way that Microsoft Word works.0706

But the code actually gets condensed.0712

OK, let's go to the next slide.0722

The last slide for today is HTML character codes; and this is for when you have weird characters,0728

that are nonstandard, that you need to include in your web page.0736

If you just try and paste them in--say, from Microsoft Word, or from some other location, it might just show up like nonsense in your page.0743

But that is why we have these special character codes.0751

For example, the registered trademark symbol--the code for it is ampersand, reg, semicolon.0755

And the browser will read this and create a little registered trademark symbol, instead of typing out these letters.0764

If you try to just paste it in, then--especially because the Internet deals with a lot of different computers0774

of different ages, different operating systems, different character sets, and different regions across the world,0779

It is going to show up differently in different places, and it is just going to be a mess.0786

But this allows you some reliable way to make it show up the same way in every browser, in every instance.0789

Let's clear this out and start over: let's say you wanted to type the 'a' character, with a little tilde accent above it.0800

The HTML code for that would be a, tilde, semicolon.0813

So, it starts with the ampersand; it always with the ampersand, and always ends with the semicolon.0820

Now, if we look at the browser and refresh it, you will see the a with the tilde.0826

Now, there are also two other ways that you can do this.0832

For the more common ones, you have the actual name written out, but you also have character codes that are just numeric.0836

So, it just happens that the numeric code for this one is 227, and it shows up just the same.0844

The ampersand is followed by a pound sign, in this case.0855

And then, there are also hexadecimal codes; and the hexadecimal for this one is ampersand, pound,0858

and then the hexadecimals have a little 'x' in front of them, and the code is E3; always end with a semicolon.0865

And refresh, and it will show up the same.0873

Now, these are the sort of things that you don't usually memorize.0876

You just sort of look them up when you need them for special cases.0879

So, if, say, your name has an ã in it, you are probably going to memorize this.0883

A couple other important ones are: every time you have an ampersand that you want to show up in your code,0888

you need to actually escape it by giving the character code for it.0895

And so, you just write &amp;, like this.0898

And then, another one that can be useful sometimes is the nonbreaking space; nbsp is a nonbreaking space.0906

And if I tab over and refresh, it won't show up, because it is a space; there it is.0914

But what it helps you do is: if you have something like a word,0920

and then another word that you don't want to be broken onto the next line,0928

if it wraps, then this nonbreaking space will show up as a space, but it counts as a character that is part of the word.0931

So, the browser will sort of see this entire thing as one word.0941

And it will keep it from wrapping onto the next line.0945

It looks just like a normal space here.0950

Let's look at some examples now to test how well you have been paying attention.0957

This is a basic element with a start tag and an end tag.0962

One of these is correct, and all of the rest are wrong.0969

You should be able to tell right away which one is right.0971

This one doesn't have an end tag; this one is correct; so is this one.0977

This one doesn't have the beginning carat here; and then this one is just totally wrong.0986

So, hopefully you got that one right; that was an easy starter.0993

Let's look down here: now, one of these is a correct usage of self-closing tags.0997

I kind of gave it away by calling it self-closing: this is not needed, because it is already closed--it closes itself.1010

This is maybe what you might think to do, encapsulating the text with the close br, but that is not necessary; it closes itself.1017

This is the right one--now, here is something interesting.1026

This line right here--this syntax is actually also correct; it goes back to XHTML, that needs to close itself.1029

So, sometimes you will see, in code, tags that self-close, and they will have this little slash.1037

It is not necessary; it is optional; and it is a valid syntax in HTML5, but unless you are writing XHTML, you probably don't need to worry about doing that.1042

Let's look at the next example: now, this is going to test your knowledge of attributes.1057

Look at these and see which one is correct and which ones are wrong.1064

OK, there are actually several that are correct.1072

You may think that this is wrong, because it doesn't have a quote.1077

But it doesn't have a space in it--it doesn't have any weird characters--so it is actually valid to have the name and the value set up like this, without a quote.1080

You can also do it with just a single quote, or with double quotes.1091

Double quotes are not showing up here, but if you put double quotes for all these other ones, they would be valid.1095

Now, this one: we have an element with multiple attributes.1101

And even though there is a line break in here, that is still all right, because whitespace, line breaks, and spaces condense into just the same sort of thing.1109

Now, done here is where we got it wrong.1120

In this one, we have the attribute actually plugged into the closing tag, instead of the starting tag; that is incorrect.1122

And then, here we forgot to put an equal sign, which is incorrect.1130

And even if we had put quotes in here, it still would be incorrect, because you need the equal sign.1134

Here is another example for you: can you tell what is wrong with this?1143

This actually isn't a syntax error; this goes back to semantics: h2 is a heading.1149

Actually, let's copy this text and put it into our browser and see what it looks like.1155

"I can't believe how

awesome

So, it looks great, right?--if that is the way you wanted it to look.1173

But it is actually wrong, because the h2 element is a heading, and you are using it here for emphasis.1178

That is syntactically incorrect, and it is a non-conforming document.1188

A better use would be something like em, and then you can use CSS to come back and give it that huge look,1193

if you wanted to; although I think that would be a silly thing to do...but it's your website.1203

OK, this is a comment, and it has a little sub-comment inside of it; and then it finishes off; and this should look like this, actually.1209

The mistake here is: the browser is going to recognize this, and then it is going to search for the closing of that.1221

And it is going to get all the way to here, and then it is going to think that the comment is done.1228

So, it is going to think this is the comment; and then this is going to actually show up on your page, if you code it this way.1233

You can't nest comments, so we need to delete that.1238

And the last example is a whitespace example.1246

The question is, "Which of these will show up differently?"1250

Most of them are going to show up exactly the same; which ones will actually show up differently?1254

Let's show you: let's highlight all of them and look.1260

Let's save it. So, here is what happened: the last two, this one and this one, both had line breaks in the middle of them.1269

All the rest showed up exactly the same, and that is because the whitespace is collapsing in all of these.1282

Even though this has a line break, this has a line break and several space characters...1288

this one has a line break much like this one, but it is actually a line break that is entered in with the code; it is not whitespace.1293

And this is the same thing, with a space character set in between.1300

That concludes the lesson on attributes and elements today; thanks for watching Educator.com!1304