The HTML Document Outline
The HTML “Document Outline” is fundamental to our jobs as web developers. When you create a webpage you are ultimately organizing data that will be presented to user agents (Web Browsers, RSS Feeds, Screen readers, Etc.).
The document outline is a visual/written interpretation of how the data on your page will be understood by browsers and search engines, which make up the majority of your sites consumers.
It is commonly written as a tree-list of semantic topics and sub-topics that make up your content, breaking down the information into smaller and smaller chunks. For example, the wikipedia page for the Lord of the Rings has a document outline that looks like this:
[document]The Lord of the Rings
├── [h2]Contents
└── [h2]Plot[edit]
└──[h3]The Fellowship of the Ring[edit]
├──[h4]Prologue[edit]
├──[h4]Book I: The Ring Sets Out[edit]
└──[h4]Book II: The Ring Goes South[edit]If you want to visualize the document outline of any webpage in this way, you can use a copy/paste tool like this one, or you can download a chrome extension to help you visualize it. For example, the header tree for chrome shows me the outline of the Stranger Things IMDB entry like so:
