w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it



h1 h2 h3 h4 h5 h6 outline

h1, h2, h3, h4, h5, h6 elements contribute to document outline

The outline is the structure of your document.

Warning: the browser display and the outline of the HTML markup are 2 different things.

Video demonstration h1, h2, h3, h4, h5, h6 outline

HTML5 h1, h2, h3, h4, h5, h6 elements, outline Tutorial

min video details
00:04 h1, h2, h3. h4, h5, h6 elements contribute to document outline
00:08 outline = the structure of your HTML document
00:15 the new way HTML5 compliant
00:15 this markup should produce this outline
00:26 if you do not understand this markup, please watch the intro video from the main page, here
00:36 this markup produces this display in browser
00:44 Question: does this markup produce this outline? because that is the intended outline
00:51 let's check it
01:00 search and download an HTML5 outliner
01:23 download and save the HTML5 outliner locally
01:37 drag and drop the html file in browser then the link in Browser's Bookmarks Toolbar
01:43 done: we can now check the outline of an HTML5 document
01:50 checking the outline of this HTML5 document
01:52 this document outline looks like this
02:06 it is exactly the outline we wanted
02:23 the old way HTML4 and HTML5 compliant
02:23 creating document outline using h1...h6 just like in HTML4
02:30 adding the h1 → h6 tags in page
03:38 our HTML5 document has the same outline
h1...h6 intro h1...h6 browser display h1...h6 parents - children h1...h6 syntax