div ... ⁄div
HTML5 div element
The div element represents its children, does not have any semantic. Its role is simply to group flow content for styling purpose, interactivity purpose, or other purposes. »video
Note: use it when no other appropriate element exists.
About div
- is an optional element
- multiple div elements allowed per HTML5 document
Display & support div
- display in browser »video
- display type: block
Parents, children div
- div nested within elements »div parents
- elements nested within div »div children
»examples
Attributes div
- required: none
- optional: global attributes, event attributes
div vs span
The difference between div and span: when each should be used? »elements + examples
Note
if so far you've probably used elements to organize the content on your page, now with HTML5, it is highly indicated to use the appropriate element in each case.
- USE:
- : to mark up content appropriate for the header of the page
- : for navigation purposes
- : to mark up the main content of the page
- : to mark up content appropriate for the footer of the page
- for thematic groups of content
- for independent groups of elements ⁄applications
- and use in all other cases, including styling ⁄scripting ⁄semantics purposes
Syntax div
| 1 | <> ... </> »video |
Attributes and Values div (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 div element
HTML5 div element Tutorial
| min | video details |
|---|---|
| 00:00 | video tutorial: div element |
| 00:05 | div element allows you to group flow content for the different purposes: styling, scripting, others (semantics) |
| 00:10 | div element represents its children (the grouped elements), and does not have any semantic on its own |
| 00:14 | use div element only when there's no other element more appropriate |
| 00:23 | example: let's say we want the next 3 elements (img, a, h5) to float to the right; |
| 00:31 | - we can take each element and float it to the right or - we can group them inside a div, and float the div (with all its children) to the right |
| 00:55 | the div element (together with its children) floats to the right |
| 01:01 | in this example, div element has been used to group 3 elements (classified as flow content) for styling purpose |
| 01:02 | note: div can be used for scripting purpose or to add a common semantic to a group of elements |
For more information about the element, please see the specs: W3C ⁄ WHATWG