h1 h2 h3 h4 h5 h6, display in browser
Browser display, h1, h2, h3, h4, h5, h6 elements
- empty h1, h2, h3, h4, h5, h6 elements (start tag, end tag only): do not display in browser
- their children, phrasing content: the display depends strictly on the nested element
- their content, type text: displays block in browser: the biggest heading is h1, the smallest heading in page is h6: as the heading rank increases, its size decreases
Display type: block
Video demonstration h1, h2, h3, h4, h5, h6 elements, view in browser
HTML5 h1, h2, h3, h4, h5, h6, browser display, Tutorial
min | video details |
---|---|
00:05 | testing the browser display of the: h1, h2, h3, h4, h5, h6 elements |
00:12 | for this given structure of the document, we will add the corresponding headings and test their browser display |
00:27 | h1: start, end tags: no browser display |
00:33 | h1: the content between the start tag and the end tag: displays in browser |
00:44 | h2: start, end tags: no browser display |
00:50 | h2: the content between the start tag and the end tag: displays in browser |
01:02 | h3: start, end tags: no browser display |
01:08 | h3: the content between the start tag and the end tag: displays in browser |
01:22 | note: as the heading rank increases, its size decreases; h3 is smaller than h2 and h2 is smaller than h1 |
01:30 | h4: start, end tags: no browser display |
01:38 | h4: the content between the start tag and the end tag: displays in browser |
01:39 | note: h4 i smaller than h3 |
01:48 | h5: start, end tags: no browser display |
01:55 | h5: the content between the start tag and the end tag: displays in browser |
01:55 | note: h5 is smaller than h4 |
02:06 | h6: start, end tags: no browser display |
02:13 | h6: the content between the start tag and the end tag: displays in browser |
02:13 | note: h6 is smaller than h5 (h6 is the smallest heading) |
02:21 | using headings with HTML5's new elements: article, section (part of sectioning content), while maintaining the same semantic and display, thing achievable with h1's only inside explicit sections ⁄ nested sections |
02:35 | same display, a more logical structure |
02:38 | testing the display in different browsers in both cases: 1. just h1→h6 added like before (HTML4) 2. h1→h6 nested inside new HTML5 sections |
02:43 | note: same content, same display, 2 different HTML markup: Mozilla Firefox : ok |
02:54 | Google Chrome: display ok |
03:04 | Opera version 12.02: display not ok |
03:22 | Safari: display ok |
03:33 | Internet Explorer9: display ok |