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

section ... ⁄section

Share it

section intro section browser display section parents - children section syntax

HTML5 section element

The section element allows you to mark up a section of content, part of a thematic group of content. »video

Note: The section element creates a section (potentially has a heading = its own outline).

About section

Display & support section

Firefox iconChrome iconIE icon9+Opera iconSafari icon

Parents, children section

Attributes section


Use article element to mark up sections of content that can be independently distributable or reusable
and section element to mark up sections of content part of a thematic group.

Don't use section element for styling ⁄scripting purposes, use div element for that.

Syntax section

1<section> ... </section> »video

Attributes and Values section (comma separated)

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

HTML5 section element: mark up a section

min video details
00:00video tutorial HTML5 section element
00:05 section element allows you to mark up a section of content, part of a thematic group of content
00:14 this is a group of content with a specific thematic
the thematic in this case is: the section element
00:20 within the group, a few sections present different aspects related to this thematic, sections that can be marked up with section element
00:30 let's mark up the 1st section with section element
00:47the 1st section marked up properly
00:51 marking up the rest of the sections
01:10 this demo presented an article with 3 sections
01:15 note: each section potentially has a heading (h2 in our case) and its own outline
01:18 we can see the headings of each section
01:24 we can see the outlines of each section

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