HTML Heading and Sectioning

Welcome back to Educator.com.0000

This lesson is going to be on HTML headings and sectioning.0002

Heading tags are tags that semantically outline and structure your web page.0008

There are six of them that give six different levels, and then the hgroup element, which you use to group elements that are the same heading together.0014

Usually, you have an h1, which is the most important heading.0027

And then, going down from that, they decrease in importance.0032

The title of your webpage is usually going to be the h1, and then, if you have something tiered underneath that, it will be h2 and h3 and h4 and so on.0038

You use hgroup in an instance where, for example, you have a heading level 1, and then you have something like a subtitle.0047

It is not a heading level 1; it is a separate heading.0054

But it is still part of that first heading, so you don't want it to create a lower-level section yet.0058

You can group that inside of an hgroup element, and it will keep them together and keep the page structure intact.0064

The basic rules for headings are outlined in the HTML5 specification.0075

And I have basically just copied them verbatim, because I think they are important; and they are complicated,0081

but the wording is very precise and accurate, and it is worth looking at in detail.0089

The first element of a heading content in an element of section content represents the heading of that section.0096

First of all, heading content would be the h1 through h6 elements.0106

And section content is the sectioning content, like the aside, the nav...we will look at that in a minute.0114

But in this example, it is nav; it is going to help you section different parts of the web page off.0125

Usually, the section content will be at the top level.0131

So, what this rule here is saying is that the first element of heading content0135

that shows up inside of something like a nav, for example, represents the heading for that section.0142

So, this h1 here--if, say, you had a title in here--would represent the heading for this nav that it is contained in.0149

It goes backwards; and then, of course, this entire nav has the heading that is specified right here in this h1.0156

If this had been an h2 or any other heading content, it would have appointed the heading for this sectioning content.0164

OK, the second rule: Subsequent headings of equal or higher rank start new implied sections.0176

These are subsequent headings--h2 and h3--but they are not of equal or higher rank.0182

This is a subsequent heading that is of equal rank to this h1; so, this one starts a new implied section.0189

You have, underneath this sectioning content, two sections--this second one starts a new section.0200

The subsections are defined here: headings of a lower rank imply subsections that are part of the previous one.0211

So, these headings are of lower rank than the heading that is above it, and they start subsections,0219

which is why I have indented them--because they are underneath.0224

So, you notice: the indentation that I am using here is not what you might expect,0228

because I said "nesting" by accident, because normally when you nest, that is when you indent; and you only indent when you are nesting.0234

But to illustrate the point here of these, I am indenting these to show the sectioning structure.0243

This h2 is actually, in terms of the way that the nesting is run, a sibling of this h1.0251

But because of the heading rules, it is more like a child, instead of a sibling.0259

And so, I have indented it, because according to this rule right here, it is a subsection; and then, h3 is a subsection of this h2--0265

although, really, all of these would be (in terms of just nesting on its own) just siblings (and children of this nav).0274

The last point here: in both cases, the element represents the heading of the implied section ("both cases" being these two points).0283

So, when there are subsequent headings, either of a higher level or of a lower level,0292

in all of those, the element represents the heading of the implied section.0299

The implied section that this h2 creates--the heading is defined here for everything that is underneath it.0304

The heading of the section that this h3 is in is defined by this h2, etc., etc.0312

And you can have a lot of other elements in here.0318

This is just the outline of the headings only.0320

There can be paragraphs and a lot of other things underneath here.0322

And they will all fit into the structure, based on where they fall in relation to all these.0325

So, anything after this, but before this, will be inside this h3 element and will have the heading that is defined by this h3 element.0331

Sectioning roots are a little exception: sectioning roots can have their own outlines,0341

but the sections and headings inside these elements do not contribute to the outlines of their ancestors.0348

So, these are the sectioning root elements; and so, take for example a table data.0353

It has its own outline, but it doesn't actually fit into the normal flow of the way that normal headings go.0361

So, say you have a heading, and it has a table inside of it.0367

The content in the table data fits into the table's heading, but not necessarily into what goes above it.0371

And it doesn't contribute to the outline that its ancestor has.0380

OK, sectioning content is...well, these are the sectioning content tags.0387

This is the exhaustive list; and they are kind of the top-level things that you would be using to group parts of your page together.0394

And all the other headings will usually be underneath this.0402

But you can also have these underneath headings.0404

Now, sectioning content is always a subsection of the nearest ancestor root section or content section.0407

This little example here--remember, sectioning content are these tags here; and sectioning root elements are what I just talked about in the last slide.0417

This is a sectioning root element: it is the ancestor of this h1 and these articles.0428

This article here is a sectioning content, and the blockquote is the nearest ancestor.0438

So, this article is a subsection of the blockquote, and not of this h1 element, which is above that,0446

or of this h1 element, which is below the blockquote, even.0454

Section wrapping is defined by the section tag, and you can use it to help indicate the structure of your document0462

in a way that improves readability to the computers that are trying to understand the outline.0473

You don't technically need them, but it can organize things better.0480

And it is generally a good idea to use them, if only for your own sake,0484

because then you don't have to learn all of the sectioning and heading rules as closely,0489

because a lot of it depends on kind of complicated structural rules, based on when heading tags end and begin,0495

and what the type of element that is being used is.0503

It is better to just set it all apart with a section tag.0506

The HTML specification encourages you to explicitly wrap sections and elements of sectioning content, instead of just relying on these rules.0512

In this case here, we have some made-up headings, and the h1 is followed by a lot of other headings.0521

But they are all actually underneath it, except for this paragraph, which is not in this section.0530

So, if we didn't have this section element right here, it would not be clear to you that this last paragraph here,0537

with the content of Grunt, is actually directly underneath the h1.0545

The way that this would get parsed would be: this h1 is the first level, and it has this Grunt paragraph directly underneath it.0550

So, this is actually a first-level paragraph.0560

Even though it follows all of these other ones, it is not a child or a part of any of these subsections.0564

And then, this section tag makes it explicit that all of this section is underneath the h1.0570

And then, you have h2, h3, h2, h3; this would be a section here, and this would be a section.0579

And note that this paragraph here would actually be, again, underneath this h2.0591

So, if you wanted to put a section around this part, you could, as well.0598

Let's take a look at how this actually would play out, really quickly.0611

Here is the code for what we were just looking at.0615

And this is how it shows up in the browser.0625

You are going to end up using styling to make sure that it looks a little bit better than this,0628

because this is using the complicated rules, and it may be a little bit confusing.0633

But you should be able to see that this is the largest text; it is the level 1 heading corresponding to this heading here.0638

And then, this section (if I highlight it) is all of this.0646

So, this Grunt text right here is part of this section, part of this level heading.0654

Now, the next two elements, Bar and...I don't even know how to pronounce this made-up word, Quux...0664

are both the second-largest text, which makes sense; they are level 2 headings, and they are both inside this section.0670

And h3, Thud, is the next largest...oh, and Bla--they are both children of this.0680

Baz, here, would be a part of this section.0691

All right, let us look at some further examples now.0717

Say this is a basic outline for a document that you have.0723

It is about apples, so all the rest of this page is about apples.0730

And everything following this h1 is going to be underneath that heading.0733

The first thing here is "Apples are fruit."0739

It is clearly the first paragraph underneath this heading.0742

And then, you have two subsections for the heading: Taste and Color.0745

And Taste has a further subsection of Sweet.0751

Let's look at it really quickly: it just looks like this.0758

Now, if we were going to improve this heading a little bit, we could add some sectioning content tags to clarify what, exactly, is the section of what.0762

This is all one section; and we can add a further section underneath the Taste, all the way down to above the Color section.0789

Now, this is clearly its own section.0810

Furthermore, we could add a section here, just for this.0814

If you remember the rules that we had, this section gets the heading of the element above it.0829

So, the heading for this section is this right here (Sweet); the heading for this section is Taste.0836

And then, lastly, we will add a section here: the heading for this section is Color.0844

And let's fix the indentation; so now, it should be clear what exactly is happening.0856

Now, if we tab over to the browser again and refresh, nothing actually changes,0892

because all of what we just did here was already defined according to the rules.0898

But we just made it clearer; and now, when we are adding code in later, if we are going to put paragraphs in,0904

we are not going to get confused and maybe put something in a place that we don't realize is going to be headed by the wrong thing.0909

Right now, if we put something here after this paragraph, we can specify if we want it to be a child of this,0920

by putting it in this section; or, by putting it inside this section, a child of Taste.0928

The last thing we are going to do today is look at a couple of real-world examples of websites that are using headings,0937

and then use the w3c validator to look at the headed outlines that it generates.0945

And this is going to give us a clue about how, for example, screen readers are going to go through the web page,0953

because it will take the outline of the headings, and it will read those first, if the user specifies it to.0962

And then, they can tell what part of the page they want to be read through.0971

This is A List Apart; and so, take a look at it, and you should be able to see that there are a few headings.0975

There are headings for the individual articles.0986

There is the main heading; let's put it into the validator and check Show Outline here.0990

And then, when we check it, we can shortcut down to the document outline.0999

There is actually not a first-level heading specified in Text.1005

In this page, the image is actually the first-level header.1010

But then, h3 here--this section here--would correspond to this entire section.1016

And if you look at it (I'll zoom in, so you can see a little better), the first heading that we come across is a date, actually.1024

And the reason that it is a date is because (and you can see the date showing up right here) this little section changes according to the date.1034

It is a little newsletter, and it comes out in sections; and that is all right.1043

And then, the subheadings are the names of the articles.1057

Now, the next level heading that is parallel with this is Editor's Choice, which is right here.1062

And the next one you should expect: Search ALA and Topics are also next to it.1069

Search ALA, Topics, and then A Book Apart down here are all next to each other.1083

If we were going to click on one of these and go into it, and put it into the validator, you will see a slightly different outline.1093

This time, we have, again: the first first-level heading is empty on this outline, because it is an image.1112

But we have an h1 that actually shows up as second-level.1117

That is because the first level applies to the entire page; the second h1 applies to the actual document that is this article here.1121

And then, these second-level headings are all the article headings within the article that help break it up a little bit.1134

Let's look at the World Wide Web Consortium; it has some interesting things in it.1148

This one actually validated, which you expect from the World Wide Web Consortium!1166

We have the first-level heading, which is W3C, corresponding to the title of the entire site.1176

And then, h2 is Site Navigation; now, you can see that there is actually not a second-level heading visible on the page that says Site Navigation.1185

That is fine; it is actually good practice of semantics, because visually, it is clear that this is site navigation, just by the way that it is laid up and laid out.1197

But to a screen reader, it is not clear what is the navigation and what is the content, right away,1208

if there are not these headings that you can use to tell the screen reader which parts are what.1215

That is really good practice there.1224

And then, we have the News section, which I assume is this, and then the other second-level headings, following all the way down.1226

Now, if we were to take this and click on, say, Semantic Web (now we are on a subpage of the website),1236

and run this through the validator, you will see: it changes a little bit.1248

Now, what we have is a first-level heading, like we had before, and the Site Navigation.1261

But then, we have another first-level heading, Semantic Web.1267

And that first-level heading relates to this area here, and it is the first-level heading for this area.1271

And then, you have second-level headings, and so on, all the way down.1279

Think about this in terms of screen reading, and it is probably going to help you create your headings in a way that makes sense.1288

If you are blind, and you are using a screen reader, you are not going to see this layout.1295

What you are going to have is a screen reader that is going to go through in order.1301

And it may (if you don't have a very advanced one) just start at the top and start reading as the page goes.1304

So, it would say "W3c Views Desktop Mobile Print Standards Participate Membership..."1312

And that is not very useful, because it is going to take you through all this heading stuff, and all this, before you even get into the content.1318

And if you want to indicate something at the very bottom of the page, and click on that link--1325

say, a feedback link--you are going to have to listen through the entire website to get there.1330

And that is not helpful at all.1335

What good screen readers will do is actually give the user an option to navigate through it, based on the headings.1337

They will first listen to the first-level headings (W3C and then Semantic Web); and there are no other first-level headings.1346

And then, the user will choose: do they want the W3C section or the Semantic Web section?1353

W3C applies to the entire website; so they should know that there is navigation underneath there.1359

Semantic Web is the section that they hopefully just clicked on, and then they can select that and then listen to the h2 headings.1363

If they want to get into this article right here, if you don't use good headings,1373

they are going to have to listen through the entire site until they get down to it, down around here.1380

But if you use good headings, they will have to listen to this and this, and they will select this;1385

and then, they will listen through these headings and select News1390

(hey won't have to listen to these headings, because they can click it as soon as they get to it)1394

and then listen to these headings, skipping all the content in each of these headings, until they get to the one that they want.1398

That is the end of the headings section lesson.1413

Thank you for watching Educator.com.1417