div and span

In HTML, <div> and <span> tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as <p> (paragraph), <em> (emphasis), and so on, accurately represent the semantics of the content, the additional use of <span> and <div> tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, <span> and <div> 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. <div> stands for division. The elements allow semantic attributes (e.g. lang="en-US"), CSS styling (e.g., color and typography), or client-side scripting (e.g., animation, hiding, and augmentation) to be applied.

<div> defines a 'division' of the document, a block-level item that is more distinct from elements above and below it than a span of inline material.