W3-Video WEB Tutorials

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

HTML5 Tutorial

Home HTML5 XAMPP Firefox Notepad++


header ... ⁄header


Share it

header intro header browser display header parents - children header syntax

HTML5 header element

The header element allows you to mark up a header; it can be the header of your HTML5 document, or the header of a section within your document. »video

About header

Display & support header

Firefox iconChrome iconIE icon9+Opera iconSafari icon

Parents, children header

Attributes header

Syntax header

1<header> ... </header> »video

Attributes and Values header (comma separated)

<headerattribute="attribute_value(s)"> Video Examples
1. specific attributes
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<header accesskey="h"> ... </header>
2.class=class name»html »img<header class="class_name"> ... </header>
3.contenteditable="",  , true, false »html<header contenteditable="true"> ... </header>
4.contextmenu=menu id value»html<header contextmenu="menu_id_value"> ... </header>
5.data-*= value -<header data-http-error="404"> ... </header>
6.dir=ltr, rtl, auto»html<header dir="ltr"> ... </header>
7.draggable= true,  , false»img<header draggable="false"> ... </header>
8.dropzone= copy, move, link, string:, file: -<header dropzone="copy"> ... </header>
9.hidden= "",  , hidden»html »img<header hidden="hidden"> ... </header>
10.id=id name»html »img<header id="unique_id_name"> ... </header>
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<header lang="en"> ... </header>
17.spellcheck="",  , true, false»html<header spellcheck="true"> ... </header>
18.style=CSS property:value»html »img<header style="color:red"> ... </header>
19.tabindex= integer »img<header tabindex="3"> ... </header>
20.title=text»html »link»style »abbr»dfn
»img »meter
<header title="html page"> ... </header>
21.translate="", yes, no»html »img<header translate="yes"> ... </header>
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 header element

HTML5 header element: mark up a header

min video details
00:00 video tutorial header element HTML5
00:09 header element allows you to mark up a header in your HTML5 document
00:16 it can be the header of your document, IF the nearest ancestor of the header element is the body element
00:22 the header of our document
00:29 or it can be the header of a section e.g. the nearest ancestor of the header element in this case is the article element
00:37 that's our article (= a section of content)
00:42 and that's the header of the article (= the header of the section)

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