They are used to group content in a container that does not represent anything. It can be used to style your content or manipulate it with JavaScript (using id and class), to compose layouts, to mark language changes (with lang)... as long as there is no alternative with semantic meaning that can be used instead.
The <div> will be used when you want to group in a block element (ex: create a wrapper that limits the width of the contents on the page) and the <span> when you want to do it in an inline element (ex: mark a color change in a text).
We must be careful with its use, especially in the case of <div> and not fall into an abusive use to achieve the desired composition in design by filling the code with containers without semantic value that are not necessary (divitis).
- Type: block / inline
- Self-closing: No / No
- Semantic value: No / No
Definition and example <div> - Definition and example <span> | Support <div> - Support <span>
Top comments (0)