Have you heard of an HTML document outline? This subject has been nearly forgotten since the early HTML5 days, but it’s still important.

A good outline for your website has the potential for more accessibility and better semantic structure. Despite browsers not having implemented HTML5’s outlining algorithm, developers should still know how it works. In this screencast, I walk you through some examples and show you how simple it is to define and assess a document’s outline.

You can find the code sample from this screencast on GitHub.

Loading the player…

jwplayer(“video-5896”).setup({
image: “https://d3rj1gznkm47xj.cloudfront.net/31e5285b-cd83-4755-a7fc-1e66559e63a8.png”,
sources: [
{
file: “https://d3rj1gznkm47xj.cloudfront.net/bb73772f045216fb035a34b10b2f1f3a.mp4”,
label: “SD”
},
{
file: “https://d3rj1gznkm47xj.cloudfront.net/7be904ef44d4dd3ecc9ded6ac6ce7ff9.mp4”,
label: “HD”
},
],
tracks: [
{
file: “http://djdvv9xnh2mt5.cloudfront.net/94aa4310-c1c6-475b-ade2-be5e9544af37.srt”,
“default”: true
}
],
aspectratio: “16:9”,
width: “100%”,
height: “480px”,
fallback: true,
primary: “flash”,
streaming: false,
analytics: {
enabled: false,
cookies: false
},
captions: {
back: false,
fontsize: 12
},
advertising: {
client: “googima”,
schedule: {
“myAds”: {
“offset”: “pre”,
“tag”: “https://pubads.g.doubleclick.net/gampad/ads?sz=855x483u0026iu=/7448792/Videou0026cust_params=[post_id]%3Dstaging%26channel%3D[channel]u0026impl=su0026gdfp_req=1u0026env=vpu0026output=xml_vast2u0026unviewed_position_start=1u0026url=[url]/u0026description_url=[description_url]u0026correlator=[timestamp]”
}
}
}
});

Continue reading %Watch: Remembering the Document Outline in an HTML5 World%

Source: SitePoint