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

div ... ⁄div

Share it

div intro div browser display div parents - children div vs spandiv syntax

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

Display & support div

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children div

Attributes div

div vs span

The difference between div and span: when each should be used? »elements + examples


if so far you've probably used div elements to organize the content on your page, now with HTML5, it is highly indicated to use the appropriate element in each case.

Syntax div

1<div> ... </div> »video

Attributes and Values div (comma separated)

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