HTML Essential Tags Part 1

Welcome back to Educator.com.0000

The next two lessons--this one and the one after it--are going to be lessons that,0004

if you go through and learn everything, you should have the foundations for most of what you need to do to develop web pages by hand--hand-coding.0009

If you memorize everything in these two lessons, you will be at a fairly advanced level.0021

And then, you can just look on the Internet for anything else that is not covered by this overview.0030

However, even if you can't memorize all of it, if you can just mark it all down and have it in a place where you can look it up,0038

then as you are coding, you can run into a situation where you need something that is described in these lessons,0045

and just look it up really quickly, and you are going to be just as fast as somebody that has it memorized--maybe just a little bit of a delay.0052

So, pay attention to these next two lessons, and try and remember every single thing,0058

because every single thing covered here is going to be fairly important; these are the essential tags.0064

Probably the most important tags are the document structure tags, because without them,0076

the page doesn't have a context in which to live, and the browser doesn't know what is content,0080

what is information about the page, what the doctype is, etc.0087

So, these are the document structure tags that are necessary for every page.0090

You always want to put these tags on every single page that you make, and you always want to put them in this order and in this structure.0096

So, doctype will always be first, and then the HTML element is the root element.0103

Head and body are both inside of the HTML element, and they are siblings with each other.0108

And the title tag is a required child of the head tag.0115

If you want to just have this structure copied and saved somewhere, and every time you create a new page, just have this be a default,0122

you can do that, and it will save you a little bit of typing.0131

These three dots here are where you are going to put all of the information about the page.0135

And these three dots here are where you are going to put all of the actual content of the page,0139

which we will go into more detail on in other parts of the course.0144

But for now, just remember that you always have these.0151

The doctype is particularly important, although not necessarily required, because it will tell the browser to render your code0153

in a standards-compliant way, in standards mode instead of quirks mode.0162

And it is going to make you learn the browser quirks, and the way that it renders, in a way that is standards-compliant,0167

as opposed to--if you are learning how it works in quirks mode, then when you start coding pages correctly,0177

things are going to change; their rendering is going to change.0184

It is going to be different than what you are used to, and you will get confused.0186

So, it is better to start from the beginning with this doctype of html, so it will render it in standards mode.0189

And that also means it is important not to have syntax errors, because that could throw it into quirks mode, as well.0197

The layout tags are sort of like the document structure tags, except instead of providing the layout of the document itself,0206

they provide the layout of the content--the actual part of the web page that your users are going to want to see.0215

And these are all new to HTML5.0222

You can use them in a browser today, and it won't cause problems, because they are backwards-compatible.0226

So, you can use a browser that doesn't support HTML5, and your website will still work.0233

However, a lot of browsers are picking up these really quickly.0239

And the header, nav, and section and aside, article, and footer tags are all layout tags, and they are all semantic.0243

They all have particular meanings in the context of layout.0252

So, they are big categories, kind of, that have a lot of other stuff underneath them.0259

The header is what you would expect from a standard website that has what you call a header.0264

It has, say, a banner, a headline, maybe a login link or form, maybe some links or something.0271

That sort of content is all going to go inside of a header element.0283

The nav element is for main or important sections of links.0287

In a standard layout, you will have, sometimes, a list of links on the side that will help you navigate through the website.0295

Sometimes, it could be right up here on the top, tabbing along.0301

Those are the main navigational sets of links; that is what you use the nav tag for.0306

You don't just use the nav tag for any group of links; it has to be for the most important ones for that section.0312

All of these are relative; so, say you have a subsection that has its own navigation--you can use the nav tag again,0319

as long as the nav that you are describing--the links are the main navigational elements for that subsection that you are describing.0329

The same thing with the header: it could have its own little header.0337

And the way that you set off sections (speaking of) is with the section tag.0340

So, here, this would be the main content of a website, so you would create a section tag.0343

And maybe give it an ID of content, just to indicate what section it is, because you may be using multiple section tags in a page layout.0351

An aside tag, I don't have in this example; but it is what you might call a sidebar.0362

It is defined by HTML5 as a group of content that is tangentially related to the content that is around it.0367

So, you could remove it, theoretically, and it wouldn't affect the contents of the page too much.0379

But it still has some relationship, and that relationship is not the nav relationship.0385

So, this is not actually an aside, even though it is a sidebar.0390

But say, if you had a bar over here on the side that have sort-of-related information (like some content), that would be an aside element.0394

The article element is for sub-documents, or some piece of content that can stand alone.0405

But it is being included within the main document; so this could be, for example, a blog, and each one of these articles could be a blog post.0414

Or it could be, say, a newspaper website, and each one of these could be actual articles.0424

And you could further, if you wanted to, give each article its own heading and navigation, depending on how complicated they are.0430

The last layout tag is the footer tag, which doesn't just mean "at the bottom."0438

It actually means that it has some information about the website; say, copyright information, contact information,0442

information about who created it or what the organization is that the website is about...0450

You don't want to just use it because you want to put something at the bottom.0460

It actually has to conform to a semantic meaning.0463

We are going to go through a couple of examples of real-life websites.0470

I took these screenshots last night; and these are actually not marked up in HTML5, using HTML5 tags, but they could be.0474

Say it was your job to come into these websites (which are all actually semantic--I think this is XHTML;0486

that could be HTML4.01); but say you want to update the code to HTML5.0494

You would actually change the organization; and it should demonstrate, fairly easily, what the different types of tags are.0501

This is A List Apart: let's start with the header tag.0506

You might be tempted to put a box around this area here and call it the header.0512

But if you look at it, you will see that there are links (Articles, Topics, About, Contact, Contribute).0518

And they are the main navigation for the page.0525

So, this right here isn't really the header; this is the nav.0527

So, I would give this a nav tag; the header, I think, is more properly this right here.0538

It is a little bit tricky, because it is not up where you would expect it.0543

However, this is giving the title of the website; it has a little logo; that would be properly the header, if you are going to use it semantically.0547

This big section right here stands out to me as...semantically, I would call this a section--maybe even a section with an ID of main.0556

And you can see that it has links to some articles, and a little preview of the first paragraph or so of the article.0568

Each one of these, I would actually put inside of an element, and give it an article element.0577

Let's call this section header, and then article; and this one, as well, is also an article.0584

This isn't; this is a part of a section.0603

If you wanted to, you could also, within each of these articles, create a little header--0607

the same tag as right here, but because it is inside this article,0612

the context is that it is the header of this article, not the header of the whole page; so, you could give these headers, as well.0619

Now, this is not really an aside, actually, because it is just more of the same sort of content.0627

I would call this a section, as well, and just sort of leave it as that.0634

And this--you may not be able to see very clearly, but the links in here are not the main navigational links.0641

They are just sort of links to random things that may be of interest--a search bar here, a job board,0648

an advertisement for a book that is being published about HTML5.0656

So, this is tangentially related; I would call this an aside.0661

And then, this, given away by its position, is clearly a footer.0669

And if you look on it, it has a little logo, but then it has the copyright, and then the name of the organization that is putting A List Apart together.0674

That is a very good semantic use of the footer tag.0683

This is the w3c website, World Wide Web consortium; they are the ones that define the standards for HTML.0689

And so, you would expect their page to be in good standards form, which it is.0699

However, they are not using HTML5; so, how would we mark it up with HTML5 layout tags?0703

Well, this right here is going to be a nav, I think; and so is this.0711

You can have two nav, or more, even; however, you don't want to go overboard.0723

If you are using it a lot, depending on the website, you are probably marking up things that are not properly navigational elements.0731

For example, this is a list of links, for the most part, but it is not really a main part of the navigation.0738

I would call this an aside; it is tangentially related to the content.0745

And then, this I would give within the section tag, although I am going to draw this right here, on top of it, as an article.0754

And then, this would be a head of that article.0770

Where is the head? I think the head is really up here.0775

It looks like they are using some CSS to make this pop into it, even though they are separate.0781

That is a display thing, not necessarily an HTML thing.0788

But the head would include this stuff in this little logo up here.0791

This is Wikipedia, and it is another example of an open-source website that uses good standards (compliant coding).0797

This is clearly going to be the nav right here, and then this entire thing here would be a section.0808

And in this section, we have several articles; and I would actually make this a header within this section.0819

It is not a header for the page; it is a header for the section.0827

And I would give this, up here, a header tag, as well.0830

And maybe I would expand it out to include this, even though it doesn't look like it measures up, because it is displayed funny.0836

I would include all of this in the header tag, because this is the logo, and a name banner, and then, for example, search and a login thing.0844

And then, this, this, this, and this are all articles, I would say; and they each have their own little headers.0854

Facebook is another confusing page, because we have these links up on the top;0863

however, these links do things; they don't really let you navigate around the site.0869

And these links take you to all sorts of random places; these links take you to places about this page.0875

This is the fan page for Educator.com--these links also.0882

This is where you can use nesting to your advantage.0887

I would take this entire thing--all of it here--and create a section--make all of this a section.0891

And then, within this section, you can create additional sections.0900

So, I actually wouldn't make this a section; I would make it an aside.0905

I would make this a header within the section, and I would make this a nav.0909

And then, each one of these little posts, you could mark up as an article.0915

You see, there are three showing right now.0924

And then, here you could mark this up as nav, because it is within this aside, which is within the section.0929

And so, the nav would apply to the section itself, and not to the entire Facebook.0937

So, this nav and this nav would apply to this fan page, not the entire website of Facebook.0944

This, I would probably mark up as a nav here, and then probably this would be a banner.0953

You can see that it can be kind of difficult to determine what the semantic meaning of different things is.0962

And you are going to be tempted to just give up and use div tags or something.0968

But in the long run, it is actually going to make things a lot better for you if you are encoding semantically--0972

not the least of which reasons would be that browsers and computers are going to be able to understand your website better.0978

And that means that it is going to be more useful for people who are using software that you are not aware of,0986

or something like a crawler, that is taking stock of the Internet0995

and gathering information about it (for Google, for example, to search)--these sort of things.1000

So, it is best to code semantically and put a little bit of thought into it, even if you don't get exactly the right tag.1006

This isn't necessarily really clearly part of a header, but it is something.1014

It is kind of a best guess, and maybe everything doesn't fit perfectly.1020

But it is indicating something to the computer, where otherwise the computer would know nothing.1025

So, just do what you can; and as you use the tags more and more, you will get better at it, and you will see what sort of things fit into place.1030

Text level tags are very simple--seemingly so--because they just go right into the text that you are typing, at the paragraph level.1044

And these are probably the most important things you will run into the most.1057

But that actually can be pretty complicated, when it comes down to deciding which one to use.1061

So, here is a little code that I have marked up with a couple of different tags ahead of time.1068

We have this little paragraph here, and it starts with the word note, which is an important tag that stands out,1079

so we are giving it the strong tag, which is different than emphasis.1089

It is denoting that this text is important, but it is not necessarily emphasized.1093

Now, the sentence goes on and talks about HTML5 here.1100

And I am using the <abbr> tag, which is for abbreviations or acronyms.1104

And you can put a title attribute and expand the abbreviation, or give the meaning of the acronym, right in there, and the browser will know.1110

And this can be useful in various ways.1122

Moving along in this little paragraph, we are talking about the <b> tag.1126

I am actually going to mark that up with this code element to indicate that it is code.1132

Now, notice that so far, I am not talking about what I want it to look like; I am just talking about what it means.1138

The temptation is going to be to say, "I want code to look monospaced and a different color," or underlined, or bold, or something.1145

But that is all stuff that you do later with CSS.1153

And the browser will have some default styles that you will see when I load this in the browser.1156

But you are going to be thinking in terms of the semantics, not the presentation.1161

So, you could just use a <strong> tag to mark up this <b> code and get a similar-looking result;1165

but it is going to have a big difference in meaning, and you don't want to have the browser thinking1175

that your code is about one thing when it is really not about that,1182

because, especially in future browsers or browsers that you aren't exactly sure how they work...1187

for example, text-to-speech readers for the blind are going to interpret it differently.1192

They might emphasize it or do something, and they work that out.1198

And we let them work that out based on the semantics, not based on how we want to present it.1202

This right here is the character codes for the less than and greater than symbols (so it's just the open and close carat).1208

This whole thing right here will show up looking like a b tag in brackets.1216

And this word right here, semantic, in the context, is emphasized; I am emphasizing that it would not be semantic.1222

And then, here we have code again; it is the same thing as up here--it is the b tag with the brackets given.1231

And again, they are escaped into the character code, so that it doesn't actually put an actual, literal b tag in the code and then mess up the syntax.1240

But this is a defining instance of this term, of the <b> term, because right here, it is going to quote the specification that defines what b is.1249

And so, this is a definition now; that is what you use this tag for.1262

And the definition goes around the term that is being defined, and it is the first time that it is being defined.1267

And you can link back to it with other tags later on.1274

But you need to link back to this, and so if they read this, it will have the definition here.1279

This is the definition that is being quoted from the w3c specification.1285

And this q tag means that it is a quotation.1291

Now, you notice I didn't actually put quotation marks in here, because the way browsers are doing it right now is:1294

when they have a q tag, they will put the quotes in for you.1299

But it is not semantically wrong to put quotes in yourself; I just did it for convenience' sake.1303

Then, lastly, we have this link here to the HTML5 specification.1311

And the temptation, if you are slightly familiar with this site tag, is going to be to use the cite tag for this,1318

because you are saying, "This is what the HTML5 specification says."1325

You might think, "Well, that is the citation of where that quote came from."1330

But that is not what the cite tag is; this is more appropriately just a simple link that links to the actual specification.1334

The cite tag would be for the title of the work.1342

I am actually describing the HTML5 specification here; this isn't the title of the specification.1346

But right here, this is the title of a work; this is a book.1352

Let's save this and take a look at what it is going to look like in a browser.1356

For all of that code, there is not much that looks different, you will notice.1365

It is, for the most, just kind of black text.1369

So, the strong element was rendered bold here; and then, the code for this and this made it monospaced--1373

although you can use CSS to make it look like whatever you want.1385

Right here, nothing actually happened; even though this is an abbreviation, the browser doesn't do anything.1388

But if I...did you see it pop up a second ago?1396

Sometimes you can get it to give a little information that would pop up.1406

This text right here, Hyper Text Markup Language, would expand it for you.1413

This is the newest version of Chrome that I am using right now, and it is just implementing these for the first time.1417

So, things will settle down into a more standard way, given a little bit more time.1424

And then, this here--this is the quote; nothing was changed, except that it added some quotes in.1431

So, just to emphasize again: we are not looking at what it looks like.1437

We are more interested in what the meaning is.1440

This link is clearly different, and then this citation just got italicized, but it could have easily not been.1443

It could have easily been bolded; with CSS, you can do anything you want with it, really.1450

Let's go back to our slides here, and let's look at grouping content tags.1459

Grouping content tags are...you can think of them as a level above the tags just at the textual level.1467

But it is a level below the layout elements.1475

These are grouping content within them, but they are not grouping entire sections.1479

The paragraph tag is the most used one; it is going to group a paragraph together.1486

So, this last example that we were just looking at all should have actually been in a paragraph tag.1492

Scroll down to the bottom...and now, it is going to be semantically more correct, because all of this needs to be grouped together.1500

If you don't have the paragraph tag, then the browser doesn't necessarily know if this should be all together,1509

or if each sentence should be on its own, or (if you have more text down here) if that should be connected to this or not.1514

So, it is a semantic tag, in that sense.1523

The <hr> tag used to stand for horizontal rule, although we don't talk about it that way anymore.1532

It is just historical that we keep that as the name.1539

But that is a very presentational tag, if you just think of it as a horizontal rule, because that is just like, "OK, I want a horizontal line."1542

The new semantic meaning for hr is a break in context or a pause in the rhythm of the flow of the text, or the content.1553

So, it has a semantic meaning now that is not just a line; it means something else.1568

figure and figcaption and blockquote have their uses; they kind of are what they sound like.1575

<figure> is for when you have a separate piece of information that is reference by the main content.1582

And it illustrates something, and you will describe what that illustration is with a <figcaption>.1590

<blockquote> is an entire block of quotations that is imported from another place.1596

So, it is sort of like the <q> tag, but for more...if you write essays, it is sort of the difference1602

between a quote that is less than three lines (that you just quote in-line),1609

and then one that is more than three lines, that you have to break off into its own paragraph that is indented; that is the difference here.1612

And the <div> tag is a grouping content tag that is useful, because it has no semantic meaning.1619

Its definition, semantically, is that it means nothing.1625

And this can be useful for when you need to put a tag somewhere, in order to stylistically do something;1628

but there is not a clear semantic tag that will work there.1634

And maybe even, putting a tag with semantic meaning there will actually cause semantic problems.1640

So, let's go back here, and let's look here at an example.1649

This is a little Psalm from the Hebrew Bible, and translated into English.1654

And it has already been broken up into paragraphs, so each one of these lines--this is poetry--has been marked up with a paragraph...1661

This is Psalm 4; it is quite short.1673

But because the whole thing is actually being quoted, I could say <blockquote>, and then, down here at the bottom, end that block quote.1675

The whole thing is now marked up as being a quotation; let's look at it really quickly.1686

This is what it looks like before the blockquote; afterwards, it indents it a little bit1699

(although the presentation is not the end result; it is the semantics).1704

Now, I have picked this because there is this Hebrew word, Selah, that translators have a really hard time with,1710

because it is not clear exactly what it means.1718

But it seems to mean something like "pause" or "reflect," "interlude," something like that.1721

In fact, the meaning is very similar to what the hr tag is.1729

So, if I was going to be marking this up, I could put a little hr tag in here, after each one of these "Selah" occurrences,1734

to indicate that there is a break for a minute--for a second--just a pause in the Psalm.1742

Let's refresh this; now, OK, so it has these big lines in it, and that is really ugly for poetry.1758

which is why, semantically, you could set this break; but then, stylistically, you could come in1766

and change this to look like something else, if you don't like the way it looks.1773

In fact, you could just erase it altogether, but leave the semantic break in there, so that a browser will know what to do.1776

For example, if you have a screen reader for a blind person, and they are listening through this Psalm,1784

without the hr tag, when it gets here, it is going to say "Selah," and then move directly on to the next verse without a pause.1792

And it is going to break up the rhythm of the poem for the blind person listening to it.1800

So now, we have these hr tags in there.1806

Even if we hide them for the sake of looking good, the semantic meaning is there,1808

and the blind person is going to be able to experience it better, because there will be a little pause.1815

Now, figcaption and figure could be...say we wanted to have a little figure off to the side.1825

We could just go like this (I am going to pull this back) and put the figure tag in here.1836

And say we have a little image, and the source is...it is going to be a picture of a sunset--something beautiful; and then figcaption...1846

Now, the figcaption will describe what is going to happen in the figure.1870

You could say something like "God made beautiful sunsets"; and that is an example of a figure.1878

Let's actually look at a more realistic example on this Wikipedia page here.1891

This is a Wikipedia page on HTML, and there is a figure in here, right here.1898

I am not sure if this is actually marked up as a figure in the code, but it could be.1906

This is an article on HTML, and it begins with the history of HTML.1912

And it has a little picture of Tim Berners-Lee, who invented it, and then this text right here, describing the picture, saying "Tim Berners-Lee."1916

So, this is a perfect use for a figure.1923

It is not a main part of the content, but it is sort of referenced via content.1927

And you have this information that has been described by the figcaption; so I would mark it up that way.1933

Now, you will notice other things up on the side: HTML, "The historic logo made by the W3C," so this is another figure.1941

But then, look up here: we have this off to the side--this is not a figure.1949

This is a set of information about the page, and links, and there is no caption; there is nothing to describe all of this together.1952

The same thing here: this is not a figure--this is a nav, really, with information of the structure of the page below, and then links to each part.1961

So, just keep in mind the differences between aside, figure, and nav.1972

They all have different semantic meanings, even though, if you were just thinking purely stylistically,1978

they could all look the same way, depending on which one you use.1983

Embedded content tags are what makes the Internet look cool, and really gives it some "zing."1993

This goes back, historically, to the Mosaic browser, which was the first browser to introduce the image tag.2003

Before that, it was just all text; and they wanted to add some color and spice things up a little bit.2010

They added the image tag; and there was actually a very early discussion, when they were just introducing this,2015

where the image tag was proposed, and someone else said, "Well, we should really use a tag called include;2020

and then you specify the type of content to include, and that way2028

we don't have to keep inventing a new tag for every new type of media that comes along."2032

He said, "If we have this image tag, then pretty soon we are going to have to have an audio tag and a video tag..."2038

And this was in the very early 90's, and they ended up going with the image tag anyway.2044

But it ended up that he was right; and in HTML5, we now have these, almost 20 years later--the video and the audio tags.2052

So, it is sort of a historical reason: back at the time they were doing this, it made more sense,2061

especially for backwards compatibility, to use the image tag, although maybe it would have been a better idea2069

to just have one tag that can include all types of content.2074

And this is the way we have things now.2077

Up until HTML5, it has actually been very difficult to include video and audio--especially to do it in a way that is standards-compliant--2080

because you had to use the embed tag or the object tag or some other thing.2087

And it was always through another interface, so it wasn't the browser directly loading video or audio.2092

It was the browser loading something like a Java applet or Flash or some other program that can run video and audio.2098

For example, most video nowadays is Flash--like YouTube.2107

If you go on YouTube, it is Flash; and then the Flash is embedded into the page, and then that is what plays the video itself,2113

although if you go on YouTube and you can find a place to enable HTML5 video, then it will display it2120

using this video tag, instead of the crazy embed object tag mess that has been going on.2128

And it will just play it directly through the browser (if your browser is new enough to support this).2134

I am going to go to the code here and give examples of how these work.2140

Here, we have a little page that I have started.2146

And let's say I have three little files: audio, video, and an image.2149

These are three different types of media, and I want to know what they look like.2156

Let's open up the browser here; so, here is what it looks like in the browser right now.2165

It is just links to the three media types' content.2172

Let's actually mark it up as audio; and I did this wrong...the content is there...source= the URL...2183

And then, if you had a browser that didn't know how to use the audio tag, you could write a little message for them in here,2207

saying that their browser doesn't know how to use the audio tag.2214

And then, I am also going to add another attribute to turn on controls.2222

All right, so it loaded the audio right in there; and I can scroll through it and play it here.2238

And it plays directly through the browser, without any intermediate interfacing between.2245

There are a lot of other options that I could have used to, say, scroll through various ones, or give the title, or things like that--2250

especially when you pull in JavaScript and CSS, you can do a lot.2257

It doesn't have to always look like this; but the beauty is that, like the image tag, it just simply gets included directly into the page.2260

And you can style it additionally and do more stuff with it if you want, but the basic thing is right there.2267

Let's do the same thing with video.2279

This controls attribute just gives it the play and pause controls, and the volume, and things like that.2288

All right, let's refresh; and now we have this video right here.2309

And we can scroll through it directly in the browser--no Flash, no anything else.2319

It will play if I hit Play; so there is that.2323

And then, lastly and most simply, this is the very old tag, and the source is the URL here.2331

Now, the image tag is different, in that it doesn't have any content; it is a self-closing tag.2341

And that is partly because that is just the way it has always been from the beginning, and there is no need to change that.2348

And furthermore, it was always backwards compatible, so there is no need to have this content2355

for browsers that are not able to use it yet--to give them a little message saying, "You are missing some content,"2360

which is why the video and the audio tag have closing tags, and they have some content.2366

If we refresh down here, you will see the little image that just got loaded into the page.2376

All three of these are loaded into the page in the same way, without much work, without much thought or knowledge.2383

It used to be that, in order to include video, you had to be a pro,2392

or had to follow really carefully the standards, to make sure that it would work in multiple browsers.2395

And there were a lot of format wars going on.2404

There are still format problems...well, not problems, but it is still working itself out with video and audio.2407

So, this is an MP4 video right now; I tried a WAV video, and it didn't work.2414

So, the browsers are supporting different things incrementally, and some are supported, and some are not yet.2425

We will just have to wait for it to settle down a little bit.2431

Right now, there is a big discussion between using the codec that Macromedia Flash uses2436

(which is proprietary, and so it could end up costing money for a browser to support it),2442

versus the ogg video format, which is open source, and therefore free;2447

but it is a little bit slower, and it has some other disadvantages.2452

And so, the good thing about HTML5 is that it doesn't specify what types of codecs or software are needed to make it run.2457

It is up to the browser to decide that.2469

So, there could be some great new codec that comes around--a new file type that just is amazing.2471

And everybody could start using that, and then that could become the standard.2477

So, it is just open to whatever happens.2481

These are the most important and most common HTML elements that you will come across when you are coding most pages.2487

And you should be ready to do most websites now.2497

Thanks for watching Educator.com.2501