Controlling document outlines

One of the first things to consider when structuring your pages is what type of document outline you want to generate. HTML uses semantic elements like headings and sectioning tags to describe the outline of a page's contents. In many ways, you can think of this like a table of contents. These outlines are used by devices to skim and search your files, navigate to specific sections. And things like determining how content actually relates to each other. As you can imagine, generating the correct document outline for a site is a fairly important part of its overall success.

So to practice this we have the Outline.htm file that you'll find in the 04_02 directory. And right now if I were to scroll through this you can see that all of the elements, except for a few that are in some lists. Are contained within paragraphs so everything is in a paragraph. So just to give you an idea of what's going on here I'm going to preview this in the browser. And you can kind of see that there's a line up top, this is my big blog. Site navigation, things I like, my favorite books.

We have Fiction and Non-fiction, we have Favorite Movies and Shows. In those two categories we have Favorite Music, Jazz, Rock, Americana and then we have a spotlight down here. And then the copyright down there at the bottom. So this is kind of a very basic, simple blog layout for describing some of my very favorite things. But right now, there is nothing in the way of structure on this page to denote any type of information whatsoever. It's all on the same level. In fact, if I go back to the code editor.

Now I'm using Brackets, and Brackets has this really cool outliner extension. To get extensions in Brackets, if you're using this, you can just click on the extension manager and then search for outlines. And you'll find the one I'm talking about. But when you've installed that, if you have a page open, you can go up to View, and you can Show Document Outline. Now if I do this for this document, you can see that not much comes up, it just says untitled body. So there's no outline going on. Now for those of you that are using a different type of code editor.

Or don't have that extension installed, there is a way for you to check your document outline as well. I'm going to go ahead and select all my code and copy it. You can go out online to this site. This is the HTML 5 Outliner, and here you can choose a URL, or we have this one text area that we can just paste our own HTML into it. And then we can say outline this and again it says not a lot going on here. So then I'll hit the back button. For those of you that don't have the extensions installed in the brackets or maybe aren't using brackets.

Feel free to use this to check the outline as we begin to work. Okay, let's get back into our code and start giving this document a little bit of an outline. By semantically structuring the elements. The easiest and best way to do this is through the use of headings. Now this is going to be a little bit of a refresher of what we covered early in the course when we talked about headings. But it also gives you an idea about how important headings are to the semantic information of your page. So the first paragraph right here says My Big Blog. I would assume this to be the title.

That's probably going to be the most important thing, so we're just going to go ahead and get that and h1, and save that. Now after that, we are at site navigation, we're going to just pretend like that's a big menu. We'll leave that alone. Then we have things I like, and that would be probably the title of this page, so I'm going to make that an h2. Below that we begin to get into the individual categories. Notice that we have categories for books. We have categories for movies and shows and we have categories for music. All of those seem to be on the same level, if you will.

If you were to think about this as a table of contents. And you wanted to give somebody the ability to navigate from one area to the next, you'd probably list those all together. There's books, there's movies, that sort of thing. So what I'm going to do, is for my favorite books, I'm going to use the next level of heading, H3. And then for the sub categories fiction and non-fiction, they wouldn't be on the same level because these are sub-categories of books. So they would get an h4. So you can begin to see how you start to develop a strategy for how headings on your site are going to be representing the document outline.

And you need to set that for both Fiction and Non-fiction. Now take a moment, and go through, and finish categorizing everything. Using those h3 and h4 in place of those paragraphs. So, movies would get an h4. Movies would get and h4. Where as music would get and h3. Scroll down a little bit. Jazz would be a subcategory. So, that going get an h4 and as you are doing this don't neglect the opening and closing tag. You want to make sure as you're switching these from paragraph to headings that you're getting both the opening and closing tags.

I'm going to save that and then finally I have to make a decision about this spotlight favorite. It's not really a subcategory of music, it's a specific element or item that I've decided. To kind of talk about a little bit. It's related to all the content. And in that sense, it's probably best suited to an h3. But in a lot of cases, this is a judgment call. It's kind of like where you want it to sit on that outline. And then the very last thing is this copyright down here. And that doesn't really fit in its own section, I would say.

So I'm just going to leave that alone. I'm going to save this. And then I'm going to go back. And check the document outline. Now this makes a lot more sense. You can see that we have My Big Blog up top, Things I Like. We have Books, Movies and Shows, and Music. And each of those has their own individual subcategories. And then finally down at the bottom,. We have spotlight favorite which you can see shares the same level of importance as the categories themselves. And again that was my own personal choice to make it to have that level of importance.

If I tested this online in the outliner you can see it gives us the same type of outline. Perfect. Prior to HTML5 that was pretty much the only way that we could generate a document outline. And one of the reasons why it was so important to have a specific sitewide strategy, in how headings are applied to elements. Now HTML5 has some new semantic sectioning elements. That are designed to assist in making outlines that are maybe a little bit more meaningful. So those elements are the nav, article, section and aside.

Let's take a look at what they can do for us. So going back into my pseudo blog thing here, I'm going to take the site navigation and I'm going to wrap that in a nav element. Now, I'm just going to leave the paragraph inside of there. That's fine. But what the nav element does for me, is it creates a new section that's specific to the navigation of the site. The next thing I'm going to do, is I'm going to take the content of this page. And that would be all the things that I like, and I'm going to wrap that in an article element. Now, you'll notice that I'm going over these pretty quickly.

And I'm not spending a lot of time. Talking about what each of these elements do for you. That's because we're going to look at them individually in their own exercises in just a moment. So right now I'm just sort of introducing you to these elements so you get an idea as to sort of where they fit. So now everything except for the copyright here down at the bottom. Because that's not part of the main content, is now wrapped within this article. Now another semantic sectioning element is the section element. And if you think about this inside the things I like I have sections for books, I have sections for movies, I have sections for music that sort of thing.

So it makes sense to have individual sections so what I'm going to do is for each of those I'm going to wrap them in a section element. So books will be wrapped in their own element. And pay special attention as to where I'm adding these elements. Movies and shows will get their own section. And notice that you have to be really careful about where you place these. You want to make sure that the heading for each of the sections is just inside of it. Every time I see an H three, I know, that's a new section, and if your code doesn't format exactly right for you, it's not that big of a deal.

Most code editors have the ability to reformat the code so it's a little bit easier to read. Now, if I go down to the last section here, spotlight favorites. It would make sense that this is also a section as well. However, there's a new semantic sectioning element called, aside, in HTML5. And what Aside does for me is it basically says, this content is not really a critical part of the content that it's related to. But it is related to content on the page. And if you think about the spotlight favorites, it's content that's related to the list of my favorites.

But, it's not necessary in order for me to complete my list of favorites. So that's a perfect example of using the aside element. So I'm going to wrap the spotlight in the aside. Now again be very careful about where your opening and closing tags are. Now if I save this and go back and look at my document outline. I don't really see too much of a difference. The only difference I really see, in fact, is this new section called untitled nav. Any section that you create using one of these sectioning tags. It could be nav, could be article, could be section, could be an aside.

Basically the title of the section is going to be whatever the top level heading in that section is. In this case nav only has a paragraph inside of it. It does not have a heading so it comes up as an untitled section. And in fact if I were to copy and past the new formatting into my online outline generator, I would see exactly the same thing. We have an untitled section up top. So there's a brief overview of the outline that's going to be generated as you're structuring your documents. And some things that you need to be aware of. Now, I do want to point out the fact about these new HTML5 sectioning elements.

Basically, the way that they create sections is controlled through what's known as the HTML5 outlining algorithm. It's brand new in HTML5, and it's written within that specification. Now that was designed to help with the overall semantics of the page. But as of the time of this recording, no user agents, that means browser, screen readers, any of those. Have implemented the HTML5's outlining algorithm. And that means that for now, the best practice is to continue to generate the document outline through the use of headings. While allowing the HTML5s sectioning element to assist with overall page semantics.