Controlling document outlines <h3>
https://www.linkedin.com/learning/html-essential-training-2017/controlling-document-outlines?autoAdvance=true&autoSkip=false&autoplay=true&resume=false

www.w3.org/TR/html5/sections.html

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:


HTML5 outliner
https://gsnedders.html5.org/outliner/

https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo?hl=en

https://addons.mozilla.org/en-US/firefox/addon/headingsmap/

Prior to HTML5 we used to use headings from <h1> to <h6> to generate a document outline. 

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.

Now, I do want to point out the facts 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.