W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

hgroup ... ⁄hgroup

Share it

hgroup intro hgroup browser display hgroup parents - children hgroup outlinehgroup syntax

HTML5 hgroup element

The hgroup element allows you to group headings h1, h2, h3, h4, h5, h6, group that represents the heading of a section. »video

About hgroup

Display & support hgroup

Firefox iconChrome iconIE icon9+Opera iconSafari icon

Parents, children hgroup

Attributes hgroup


The hgroup element influence the document outline: user agents may concatenate the heading + its subheadings, the subheadings may not be displayed at all... »video

Syntax hgroup

1<hgroup> ... </hgroup> »video

Attributes and Values hgroup (comma separated)

<hgroupattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<hgroup accesskey="h"> ... </hgroup>
2.class=class name»html »img<hgroup class="class_name"> ... </hgroup>
3.contenteditable="",  , true, false »html<hgroup contenteditable="true"> ... </hgroup>
4.contextmenu=menu id value»html<hgroup contextmenu="menu_id_value"> ... </hgroup>
5.data-*= value -<hgroup data-http-error="404"> ... </hgroup>
6.dir=ltr, rtl, auto»html<hgroup dir="ltr"> ... </hgroup>
7.draggable= true,  , false»img<hgroup draggable="false"> ... </hgroup>
8.dropzone= copy, move, link, string:, file: -<hgroup dropzone="copy"> ... </hgroup>
9.hidden= "",  , hidden»html »img<hgroup hidden="hidden"> ... </hgroup>
10.id=id name»html »img<hgroup id="unique_id_name"> ... </hgroup>
11.itemid= URL --
12.itemprop= string »link »a-
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<hgroup lang="en"> ... </hgroup>
17.spellcheck="",  , true, false»html<hgroup spellcheck="true"> ... </hgroup>
18.style=CSS property:value»html »img<hgroup style="color:red"> ... </hgroup>
19.tabindex= integer »img<hgroup tabindex="3"> ... </hgroup>
20.title=text»html »link»style »abbr»dfn
»img »meter
<hgroup title="html page"> ... </hgroup>
21.translate="", yes, no»html »img<hgroup translate="yes"> ... </hgroup>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration hgroup element

HTML5 hgroup element: grouping headings Tutorial

min video details
00:04 video tutorial: hgroup element
00:10 hgroup element represents the heading of a section, allowing you to group the next headings: h1, h2, h3, h4, h5, h6
00:17 Explanations:
00:17 <h1> Section heading<⁄h1> represents the heading of that section
00:22 Question: what if we have more than 1 heading (heading + subheadings) that represents the heading of that section ?
00:43 in order to make the 2 headings (h1, h2) to represent the heading of the section, we need to group them → thus resulting the hgroup element
00:49 grouping h1 and h2 headings, by nesting them inside hgroup element
01:08 h1 represents the heading of the first explicit section in page
01:13 hgroup (h1+h2) represents the heading of the second explicit section in page
01:20 if you have more subheadings, these can be added inside hgroup (h1+h2+..) if you whish to be part of the hgroup = the heading of the section

For more information about the hgroup element, please see the specs: W3CWHATWG