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++

main ... ⁄main

Share it

main intro main parents - children main syntax

HTML5 main element

The main element allows you to mark up the dominant ⁄main content of an element. »video
It could be the main content of the page, or the main⁄dominant content of a specific element.

Instead of using <div id="main"> use the <main> tag, it serves the same purpose.

About main

Parents, children main

Attributes main

Syntax main

1<main> ... </main> »video

Attributes and Values main (comma separated)

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

HTML5 main element: mark up the main content

min video details
00:00 video tutorial: main element
00:05 the main element allows you to mark up the main /dominant content of the page or of a particular element
00:15 the body of our page contains the next 3 elements: header, main, footer
00:20 header element: marks the header of the page
00:23 main element: marks the main content of the page
00:27 footer element: marks the footer of the page
00:32 where the main element marks up the main content of the page

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