Span and div
In HTML, span and div elements are used to define parts of a document so that they are identifiable when no other HTML element is suitable. Where other HTML elements such as p (paragraph), em (emphasis) and so on accurately represent the semantics of the content then their use leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, span anddiv can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.
span represents an inline portion of a document, for example words within a sentence. div represents a block-level portion of a document such as a few paragraphs, or an image with its caption. Neither element has any meaning in itself but they allow semantic attributes (e.g.lang=”en-US”), CSS styling (e.g. color, typography) or client-side scripting (e.g. animation, hiding, augmentation) to be applied.
Differences and default behavior
There are multiple differences between div and span. The most notable difference is how the elements are displayed. In standard HTML, adiv is a block-level element whereas a span is an inline element. The div block visually isolates a section of a document on the page, and may contain other block-level components. The span element contains a piece of information inline with the surrounding content, and may only contain other inline-level components. In practice, the default display of the elements can be changed by the use of Cascading Style Sheets(CSS), however the permitted contents of each element may not be changed. For example, regardless of CSS, a span element may not contain block-level children.