π Firstly,let's start by identifying the similarities and differences between div and span tags.
1οΈβ£ div and span tags are both generic HTML elements
2οΈβ£ div tag is a block-level element while on the other hand, span tag is an inline element.
3οΈβ£ div tag is used to wrap sections of a document, while smaller portion of text, image, and other content is wrapped using span tags.
- A div
div or (a division element) is defined as a generic Block-Level element used in HTML document to create sections for content such as headers, footer, images and other elements.
What is block-level elementπ€β
π A block-level element is a page element that takes a new line and the whole width of the browser or its container. Example π
- span
span tag is an Inline element that is used to select inline content such as text, links, and other HTML elements that are displayed inline for styling purposes.
Example π
Inline elementπ€β
π Inline element displays in a single line.And doesn't create a new line,it only takes up the space bounded by the tags defining the HTML element.
Can the use of div and span tags be regarded as the best practices in HTML documentπ€β
πDiv and span tags are considered "generic" components and are not best practices in HTML documents since they do not accurately communicate the content contained inside to the search enginesπ₯Ί.
Only "semantic" elements communicate a true meaning β .
π A semantic element explains its meaning in detail to both the browser and the developer.
Example of semantic Elements are:
β’ nav
β’ header
β’ footer
β’ main>
β’ section ,e.t.c
SUMMARY
1οΈβ£ When creating a block-level element, a div is used; however, when wrapping content, such as text, a span is used.
2οΈβ£ Use of semantic elements is the best practices when creating a website.
Top comments (0)