HTML Page Structure and Meta-data Elements

Welcome back to Educator.com.0000

This lesson is going to be on generic web page structure and the metadata elements that tell you information about the web page.0002

The first tag or element that you are going to write on any web page is going to be the doctype.0014

The doctype is, according to the specifications of HTML5, not technically necessary.0020

However, all current browsers are going to render your code incorrectly if you don't have a doctype of some sort.0027

This is for legacy reasons: basically, back in the days when everyone just wrote "tag soup" code, there were no doctypes.0034

And then, when they implemented standards with HTML4, you needed the doctype0044

to tell the browser to render it correctly, instead of the old way; and so, it was backwards compatible.0049

And now, HTML5 is not actually going to keep versioning up; they just want it to be that HTML, from now on, is going to be compatible with this.0054

So, that is why we have just html as the doctype, instead of some long, complicated string.0063

If you are familiar with HTML4, that is what you are probably used to.0069

And it was just really complicated: this is just simple, !DOCTYPE html.0074

That identifies it as code that is standards-compliant, and it renders it in standards mode instead of quirks mode.0078

So, let's tab over and get started with some code on our new page.0085

The first thing you are going to write is the opening carat, and then the !DOCTYPE, and then just html.0094

And there is no closing tag for this; that is it.0103

Now, the next element is the root element, which will always follow immediately after the doctype.0111

And it is sort of the top or the bottom of all other elements, depending on how you look at it,0126

because all other elements are actually descendants of it; they are contained within it.0133

It is a good place to set a language; in this case, I put that the language is English.0139

You can learn the language codes from some other specifications; depending on what your language is, you will probably already know it.0144

But this will filter down into all the rest of the web page.0152

And then, if you have other places down on where you change language,0156

you can put the new language for those specific elements; and it makes things work nicely.0158

HTML...I am not going to put the language in this example, just to keep it a little simpler.0167

And always remember to close out your tag.0171

Now, all the rest of your web page is going to go in between these two tags here,0174

because your entire web page is going to be written in HTML, and then it may string other things into it.0180

But it is basically an HTML document, so that is why everything goes in there (of course, except for the doctype).0185

And just to note, you technically can put spaces (whitespace or line returns), and then also you can put comments, above the doctype.0191

That is the only thing that is allowed above it.0206

Anything else, you put in its proper place in the HTML, depending on where we are looking.0208

The head element is the element that goes directly underneath the HTML element.0220

And it is always the first one; there are only two elements that go underneath the HTML element.0225

It is the head element and the body element, and they are siblings; and they are directly underneath the HTML element.0231

Any other place is going to cause your code to be invalid.0239

Now, the head element is what the rest of this little lesson is going to be about.0243

It is information that talks about the web page; it is called meta-data.0248

And it is sort of like if you were to draw a picture of the website that is going to be like this;0253

and then, say you are going to make the website be a person--they are like this, right?0262

So, their head is actually above where the page is; you don't see the information in the head, but it is also the most important information,0266

because without it, the rest of the page doesn't make sense; the browser doesn't know how to render it.0274

You want to think of the head as important, but don't put content there.0280

The Internet is a shallow place; we are only looking at the body; but the head is also important.0287

So, this is a basic layout of a basic web page now.0294

You have the header here, right underneath the HTML, and then the body.0297

Content is all going to go here, and then the meta-data is all going to go here.0303

Let's hop over to our code and fill that in a little bit.0307

So now, we have all of this set up; now, in the head, we are going to spend the rest of the lesson looking at what fills up the head.0322

One thing to point out is that the head element is different than the header element.0348

The header element is a new element in HTML5 that was introduced to help make making web pages' layouts a little bit simpler.0354

Back in the day, web page layouts (if you had a standard layout like this)--you would have divs:0363

you would have a div and then give it an ID of header, and then you would have a sidebar and give it an ID.0369

You would have a div for the footer; you would have all divs everywhere, and then give them different ID's based on that.0374

And HTML5 simplifies the process by making individual tags for each of these different things from HTML4.0378

But the header is part of the actual layout; it is part of the body, because it is part of the content.0386

If we were going to draw our little box again, the box would be here, and the head is going to be up here above it again.0392

So, even though it looks like header should be its own head, it is a subset of the HTML header information that goes for the web page itself.0400

The title element is the only element that goes in the head element that is required.0413

If you don't have the title element, your page is going to fail validation.0419

The title element is just simply the name of your document.0423

It is important to keep in mind that you want it to be context-insensitive, because this is going to be used in bookmarks or links,0426

and it needs to still make sense as a title.0436

It shouldn't be dependent upon your user being within the context of your website, or coming from a certain link, or something like that.0438

And it just nests right in here, inside of the head tag.0446

Now, you notice, in this title example I have given: I am using these character codes,0450

because I want it to actually look like these little characters.0456

And if I just put the open and close carats in, it would cause a syntax error; so I am using character codes.0461

And the head title will actually read that and put it into the title correctly.0468

Set a title; and we are going to call this Simple Webpage About, and then we are going0480

to type the character code <, and then >, and then close the title.0490

Now that we actually have a piece of content being this title, besides just the structure,0507

we can tab over to the browser and take a look at what it actually looks like.0512

If you noticed, this part right here just refreshed, and it now has the title in there.0518

I can't quite see the whole thing, but it is there--trust me.0527

OK, the base element: the base element is a convenient tag, because it allows you to set a base location0541

where all of your links will automatically start from, instead of having to type in the full URL to every link that you use on your website.0548

Especially if, for example, you are coding pages on Educator.com, you don't want, every time you are linking to something0555

or including an image, to have to type this into the hyper reference every single time.0562

This tag will just automatically put that in the beginning of it.0567

It is a self-closing tag, so it is a bit simpler to deal with; it doesn't have any content in it besides the hyper reference itself.0571

And it will go right after this title tag; let's put some indentation here to clean things up a little bit, so base would be a...0583

Now, let's say that we are on Educator.com, and we are doing a web page that is specifically in the Computer Science directory.0601

We can add this on, and it will change us to be in the Computer Science directory,0610

so that if we have links that are always going to be linking within the Computer Science directory, we don't have to type that in.0616

Now, if you are on a domain anyway, the default root is going to be relative to the domain.0623

So, it is going to come right up to Educator.com anyway.0629

So, by adding this in, we can save ourselves from having to type Computer Science before each part.0631

And then, it just makes things a little bit simpler.0637

Let's build up the web page a little bit now, so that we can show some examples of the links.0640

We are going to make a nav; these are going to be a list of links--this is a new HTML element in HTML5.0647

And we are going to make an ordered list, list item, and then a href equals...let's make this a link to java.html.0658

Now, I am going to just copy this line really quickly, and then just paste it a couple of times, to make it a little quicker.0678

And I am going to make this an HTML page.0696

And I am going to make this a CSS page, just as an example.0704

And let's close the list; and we already have the nav closed.0710

And while we are at it, let's put in a header and a footer.0716

Don't get this confused with the head tag; this is the header tag--we put a heading in it.0721

And then, let's put a little footer, as well...paragraph...0737

And then, let's put in a content tag, as well; I'm sorry, it's not content; it is actually going to be section, and then ID of content.0753

Because there are going to be multiple sections, we are going to identify this one as Content.0766

I forgot the stop tag there.0772

OK, now let's look at how this shows up in a browser...so, fairly simple.0786

And if I hover over this link here (let's pull this up, so you can see it), you will see, down at the bottom, that it shows the full URL.0797

Even though we are not actually on the Internet right now with this browser, it shows the URL and the Computer Science part of it, as well.0809

If we were to delete this, it would just be only the educator.com that would be part of the link.0819

Let's refresh; I'm not sure if you can read that, but you should be able to see that it is a little bit shorter.0829

OK, so the link element is a way of importing other content from other locations,0839

and including it into the web page and making it accessible for the page.0855

Usually, it is going to be CSS or JavaScript; in this example, I am using CSS.0859

It has three important attributes: the rel attribute (which is what defines the relationship)...0864

So, the relationship, in this case, of CSS is that it is a style sheet.0869

If you are importing JavaScript, it is going to say javascript.0874

And if you are importing other things, you will probably know what it is, based on why you need that.0877

And you will be looking it up in your references.0882

The type attribute tells what the MIME type is.0886

Don't worry about MIME types right now: again, when you are working with these, you will probably know,0890

based on learning how to do it, what the MIME type will be.0897

For CSS, it happens to be text/css.0900

And then, the last one is just the hyper reference that is a URL to the actual content that you are importing.0904

Let's put a little example link, importing some text.0915

Now, the link tag is a self-closing tag, so you don't need to have a stop tag anywhere after it.0923

The relationship is stylesheet, and then the type is text/css.0938

And lastly, it would be href: this used to be src (source) in HTML4, but we are using href now.0947

And we will just say...whatever the URL to your stylesheet is; we will say mystylesheet, and then close out the tag right there.0955

Now, actually, this isn't going to work, because I have the base href still up here,0966

and there is not actually a CSS style sheet called mystylesheet that is located here.0973

But you can see how the base tag works now--that it is going to take this, and it is going to make this URL start with that.0978

So, it is going to be as if you were looking for educator.com/mystylesheet.css.0985

We are not even on the Internet, but even if we were, it wouldn't find anything there.0990

I am not going to fix it, just because it is just an example, and there is no need to have that shown right now.0994

But there are a lot of different types of links that you can put in a link.1002

You can include more than just CSS and JavaScript: this is a list of link types.1009

So, this is for links and anchor tags and area tags.1016

Except for these two and these two, all the rest of these are available as links that you can import data.1021

So, pingback, previous search...there is just a lot of stuff, and this is just a part of the HMTL5 specification on w3c.1029

And you should be familiar with looking things up like this.1039

But then again, for the most part, if you are in a place where you want to import something like license content,1044

you are going to probably already know about it from some other source.1053

You are not just going to decide what this is if you don't even know what it is.1056

But the spec is a good way to discover new material and make sure that the material that you have learned about, you are doing correctly.1059

The meta element is one of the most versatile tags in the header, and the most complicated.1075

It can do a lot of different things; and in fact, there are three types of meta elements to begin with.1081

And each one has a whole subset of things that it can do.1088

It basically fulfills the needs of what every other tag can't do--the meta tag does.1093

It just describes...usually, for example, it will describe information about the web page.1100

The character set meta element is the simplest.1106

You have the charset as the attribute, and then you just put a character set that you want to be using.1111

Most of the time, you are going to be using something like UTF8--just your basic font...or not font, but character set.1119

If you are going to be using something else--maybe a Hebrew character set--you will want to specify that here.1127

Where it gets complicated is in beginning in the meta with the name attribute.1133

Now, the name and the http-equiv attribute meta types both require a content, as well.1139

So, first you identify it as a name with author, and then the content type for author would be this.1145

So, in this case, I have used the author value, and I put my name here, because I am the author of this little segment of code.1154

You can have a lot of other types of information here.1163

You can have description, keywords, copyright information, and you put that here;1166

and then, you put the corresponding information right here in the content attribute.1172

http-equiv is getting into more technical stuff; in this case, it is going to give you a content type.1177

And then, right here--the content--this is playing to that, so your content type is going to be text/html.1186

This is setting the content type for the entire document.1194

Now, normally your HTTP header is going to set the content type.1198

Now, don't get confused because I said HTTP header; it is yet another level.1203

So, our little diagram, our little web page with the head above...this is the HTML section right here.1206

And then, say, it has a layout with the header in it: this is the layout right here.1219

Now, HTTP is going to send an entire packet that is much bigger, that is going to include the HTML header and everything else.1227

And then, it is going to include an HTTP header, as well, that is up here; this is HTTP.1236

Now, you normally don't need to worry about this; it will usually be set correctly.1244

But if it is not set, this can be used to correct that.1248

And there are other types of HTTP tags it uses.1253

For example, the most interesting is probably the refresh, which can be used to refresh any page after a given number of seconds.1260

So, say you have a page that you want to refresh.1269

You can set it up here with an http-equiv of refresh.1274

And then, you give the content of that as the number of seconds that you want it to take to refresh.1288

So, this code right here will refresh the page every two seconds.1295

You can actually do even more interesting things with this.1299

You can set it to refresh to a different page.1301

So, I actually have a page here that I have prepared ahead of time.1307

And this is a mistake here; this quote should end at the end of the entire content value there.1311

So, what this is going to do is refresh the page in two seconds, and then redirect it to the URL that I placed here.1320

And I am going to delete this base href right now, because that will actually affect this URL, as well; it affects the whole page.1328

And we are not going to refresh there; we are going to refresh directly into the directory that this is in.1337

And I have prepared this ahead of time, so it should work if we just tab over there and refresh.1343

Wait two seconds, and it pops us over to this.1349

I had a little JavaScript pop-up, and it has this test page; let's go back.1354

Actually, that is the wrong number there...that is the right page; OK.1368

Now, this is one of the reasons that you don't want to just leave this going, because it is extremely annoying.1381

I am going to comment this out, because I don't want it to keep refreshing over to that page.1388

OK, there we go.1408

OK, the style element is for embedding CSS, as opposed to linking to an external CSS resource.1417

Embedding is usually not the most elegant way, but it can be very convenient, especially when you are in a development environment,1428

because you can put it right in the page, instead of having it externally.1434

You can edit it easily, and then when you want to save it, you can send it off to the external...1437

Now, embedded and in-line CSS are valued as more important.1444

So, if there is a conflict between the externally-linked, embedded, and in-line,1450

first in-line will win, and then embedded will win, and then last of all will be the externally-linked.1456

Just keep that in mind, for specificity's sake.1463

Now, it is always going to assume, when you have the style tag, that you are using CSS.1466

So, it is going to have the correct line type and everything set up for you ahead of time.1470

If you are doing something different, you need to add these attributes in, right here, to correct that.1473

I'm going to add some style to this web page we have going; and I am actually going to pull it in from right here.1483

I have it ready to go: so, what this does is takes the header that I have made, the nav, the section, and the footer, and gives them all a border.1499

So now, you can see: each one of these has a border.1514

It looks like I forgot to close my header; you can see right here, this box is going around all of it.1520

And it is because I made a mistake here: this says header; this says stop head; and that is a syntax error.1528

So, let's correct that, and then it will look better; now, it is correct.1534

And we can actually take it and make it look like a standard layout by copying this footer CSS.1540

And now, when we look at it in the browser, it is going to pull the nav over onto the left, and the right will pull up next to it;1553

and then, the footer will be down below; so, this is your standard layout.1563

And that is all done with CSS.1566

And we can really easily get rid of all that, just by deleting the style.1568

So, the styling is all done with CSS; the HTML provides the hooks for you to define how to do that,1573

but the HTML itself is not actually defining what it looks like, in any sense.1581

The browser has some default styling, but technically, the only styling that we should be counting on is the styling that we are putting with CSS.1586

So, the style tag is very powerful.1596

The last element we are going to look at today is the script element.1608

It is very much like the style element, except it is for JavaScript.1612

The MIME type and everything that is needed will be set to JavaScript by default,1616

so unless you are going to be using something other than JavaScript, just put the script tag in by itself.1621

Now, like the style tag, as well, you can place the script tag anywhere in the head or the body.1626

But it is best to leave it in the head, because technically, it is information about the page.1631

It is not actually content, and it is not actually defining semantic meaning about the content.1637

We can come over here really quickly and put a script tag in.1643

We will just do something simple.1655

Now, on refresh, the pop-up will alert, and we will grab that, and then the rest of the page loads.1669

You will notice that, when I refreshed it, the pop-up shows up here,1676

but the page is empty at this point, and the spinning dial is still showing that it is loading.1680

That is because right now, as it is parsing through the document, it has gone to the JavaScript, and we are still in the head, actually.1686

The head hasn't ended yet; we haven't gotten to any of the content in the body yet.1692

So, that is why there is no content here.1697

Once you click OK, then it will finish parsing through, and you will see the rest of the page.1701

That is the end of our lesson today.1709

Let's look at some examples, really quickly, to test how well you have been processing this new knowledge.1711

Let's say that you have a blank slate here, and you are going to make a new web page.1721

What is the first thing you are going to do? What is the first tag?1725

If you remember, it is going to be doctype.1729

You should be answering along to yourself, as I ask you these questions.1732

So, doctype--and what do I type now? html. That is the correct way to do it.1736

OK, so what is the next tag that I am going to type here in my HTML document?1741

I'm going to type html, because it is an HTML document.1748

This is the root element, and everything else is a child of this.1751

OK, so what is the next tag that I need to write after HTML, directly descending from it?1756

It will be head, and of course, the body tag.1763

OK, so if you have been paying attention, you should see a problem so far; what is the problem?1774

It is that the body tag that I have typed here is inside of the head tag.1783

That is not the correct place for it; it is actually a sibling to the head tag--it is not a descendant of it, so it needs to be next to it.1788

And you may have also noticed that I did not end my HTML tag.1796

The HTML tag does need to be ended; the doctype tag actually does not need to be ended.1801

OK, so as it stands right now, I could save this document and open it in a browser.1810

The question is, "Would it be syntactically correct? Is there something missing, or would it pass validation?"1816

Actually, at this point, it would not, because the title tag is required inside the head; it is always required.1824

This is your bare minimum, technically correct, syntactically correct HTML document.1834

And you need all of these elements, and a title tag, as well.1840

Now that you have gotten this, let's say that you are going to be entering different elements of various types.1847

Would you know whether to put it in the head or the body?1853

Remember, the head is for meta-data, and the body is for content.1856

The meta tag--where would you put that? You put it in the head.1860

The header tag--where would you put that? You wouldn't put it in the head.1864

You would put it in the body tag, because it is actually containing content.1867

The section tag, similarly, is content that goes in the body.1872

The link tag would go in the header; the nav tag would go in the body, because it is navigational content.1875

Or the p tag, for paragraph, would go in the body.1886

Hopefully, you got all those.1890

Your homework is to go on the Internet and look at a couple of websites and view source.1894

An easy way to view source is Ctrl or Command, View in most browsers.1901

If using Internet Explorer, you can do Alt+V, and then C; that is view, and then source.1905

And look at the source, and see if you can find and identify the head.1912

The head tags will be there; there will be a lot of stuff that is confusing in some of them, but don't be overwhelmed.1918

See if you can identify the head section, and then look at the elements that are inside the head section1923

and see if you can identify some that you are familiar with from this lesson.1929

And then, see if you can identify some that you are not familiar with, because the head is where most of the really complicated and advanced stuff goes.1932

And take a look at what people are doing on the Internet.1940

If you do that, you can kind of teach yourself about HTML, just on your own, by looking at what other people are doing.1944

However, you have to keep in mind that a lot of people do things the wrong way.1953

So, always refer back to the HTML5 specification to make sure that you are doing it the right way.1957

This lesson has been good; let's finish it off; and thanks for watching Educator.com.1963