w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it



hgroup ... ⁄hgroup outline

hgroup influence the document outline

Because hgroup element groups headings, the user agents may display in document outline:

Video demonstration hgroup outline

HTML5 hgroup outline Tutorial

min video details
00:05 video tutorial: hgroup outline
00:10 normally all h1 ..h6 headings display in document outline, EXCEPT when are grouped inside hgroup element, which may lead to unexpected results: the content of the headings may be concatenated in some user interfaces, or the subheadings may not display at all...
00:18 this h1 represents the heading of this section → exists ⁄ displays ⁄ is part of the document outline
00:24 while hgroup (h1+h2) represents the heading of this second section → in document outline may appear:
- h1+h2: 'Heading: Subheading' OR
- only h1: 'Heading' OR
- 'Heading
Subheading' OR ...
00:35 the + operator is just to illustrate that the headings may be concatenated

FOR EXAMPLE PURPOSE ONLY!

You will never use operators between HTML tags in page!!!
00:44 checking document outline
00:48 only h1 from inside hgroup element displays; h2 doesn't
00:50 the headings (inside hgroup) have been grouped, the most important displayed in outliner
hgroup intro hgroup browser display hgroup parents - children hgroup syntax