div ... ⁄div versus span ... ⁄span
div Element versus 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <> <> <>...</> </> <> <> <>...</> <> <>...</> </> </> </> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype html> <> <> <>...</> </> <> <> <>...</> <> <>...</> </> </> </> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!doctype 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