Wednesday, November 14, 2018

What is the difference between HTML tags DIV and SPAN?

There are lots of block elements (line breaks before and after) defined in HTML, and lots of inline tags (no line breaks). In standard HTML, a div 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. DIVs should be used to wrap sections of a document, while SPANs should be used to wrap small portions of text, images, etc.

SPAN and DIV signify no specific meaning besides the generic grouping of content, and are therefore more appropriate for creating organization or stylistic additions without signifying superfluous meaning.

For example, there's no meaning to a 800px-wide column. You just want your column of text to be 800px wide because that suits your design. For this reason, the generic, or meaningless elements span and div are added to HTML, because otherwise, people would go back to abusing the elements which do have meanings.