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.
- new way(HTML5): among others, document outline is given by the label (the heading) of the section; headings nested inside sections (elements part of sectioning content)
- old way(HTML4): among others, document outline is given by headings
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 |