section ... ⁄section
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
- is an optional element
- multiple section elements allowed per HTML5 document
Display & support section
- display in browser »video
- display type: block
9+
Parents, children section
- section nested within elements »section parents
- elements nested within section »section children
»examples
Attributes section
- required: none
- optional: global attributes, event attributes
Warnings
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 | <> ... </> »video |
Attributes and Values section (comma separated)
| < | attribute | = | "attribute_value(s)" | > | Video | Examples |
|---|---|---|---|---|---|---|
| 1. specific attributes | ||||||
| All Specific Attributes | ||||||
| 2. global attributes | ||||||
| 1. | accesskey | = | keyboard key | »img | < accesskey="h"> ... </> | |
| 2. | class | = | class name | »html »img | < class="class_name"> ... </> | |
| 3. | contenteditable | = | "", , true, false | »html | < contenteditable="true"> ... </> | |
| 4. | contextmenu | = | menu id value | »html | < contextmenu="menu_id_value"> ... </> | |
| 5. | data-* | = | value | - | < data-http-error="404"> ... </> | |
| 6. | dir | = | ltr, rtl, auto | »html | < dir="ltr"> ... </> | |
| 7. | draggable | = | true, , false | »img | < draggable="false"> ... </> | |
| 8. | dropzone | = | copy, move, link, string:, file: | - | < dropzone="copy"> ... </> | |
| 9. | hidden | = | "", , hidden | »html »img | < hidden="hidden"> ... </> | |
| 10. | id | = | id name | »html »img | < id="unique_id_name"> ... </> | |
| 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 | < lang="en"> ... </> | |
| 17. | spellcheck | = | "", , true, false | »html | < spellcheck="true"> ... </> | |
| 18. | style | = | CSS property:value | »html »img | < style="color:red"> ... </> | |
| 19. | tabindex | = | integer | »img | < tabindex="3"> ... </> | |
| 20. | title | = | text | »html »link»style »abbr»dfn »img »meter | < title="html page"> ... </> | |
| 21. | translate | = | "", yes, no | »html »img | < translate="yes"> ... </> | |
| 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:00 | video 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:47 | the 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 element, please see the specs: W3C ⁄ WHATWG