w3-video.com logo

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

Share it



div ... ⁄div versus span ... ⁄span

div Element versus span Element


The difference between div element and span element
<div>...<⁄div><span>...<⁄span>
1. Utility 1. Utility
groups flow content for different purposes (styling, scripting, semantics)groups phrasing content for different purposes (styling, scripting, semantics)
represents its children, does not have any semantic represents its children, does not have any semantic
2. Type of Elements that can be Nested inside: 2. Type of Elements that can be Nested inside:
block elements, block + inline elements inline elements
3. Can group the next elements (Flow content): 3. Can group the next elements (Phrasing content):

Examples div, span

Valid Syntax 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
<head>
<title>...</title>
</head>
<body>

<div>
<p>...</p>
<img>
<ol>...</ol>
</div>

</body>
</html>
Invalid Syntax 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
<head>
<title>...</title>
</head>
<body>

<span>
<p>...</p>
<img>
<ol>...</ol>
</span>

</body>
</html>
Valid Syntax 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
<head>
<title>...</title>
</head>
<body>

<div>
<p>...<span><b>...</b><a>...</a></span></p>
<img>
<ol>...</ol>
</div>

</body>
</html>

Syntax 1: Valid, flow elements (p, img, ol) grouped inside div: allowed
Syntax 2: Invalid, p, ol elements are not part of the phrasing content category → can't be grouped inside span: not allowed
Syntax 3: Valid, phrasing elements (b, a) grouped inside span: allowed

div intro div browser display div parents - children div syntax
span intro span browser display span parents - children span element vs span attributespan syntax