What are the differences between Span and Div tag in HTML5?
Dariush Soofer
3 replies
?
Replies
Arthur Kay@arthurakay
HTML is funny... it has all of these different semantic tags, yet browsers hardly enforce their specific use.
As Joonas points out, a DIV is a block-level element whereas SPAN is an inline-element. Browsers treat block/inline elements differently by default, but you can completely override that behavior using CSS.
The vast majority of websites and web applications don't follow any semantic patterns worth discussing.
DIVs are the most common type of block-level element you'll encounter, and they typically break content apart into logical sections. You can combine DIVs with other block-level elements, or try to be more deliberately semantic with SECTION or HEADER/FOOTER/NAV elements (see https://developer.mozilla.org/en...)
SPANs are the most common type of inline element you'll encounter, and they're most often associated with styled text (color, font, size, etc). They are "generic inline container[s] for phrasing content, which does not inherently represent anything": https://developer.mozilla.org/en...
Share
Difference between Div and Span is their semantic behaviour.
Div is block level element on webpage. It takes it's own "space", and you can give positional properties to it.
Span is inline level element. It is only affecting things that are inside it, ie. altering colors, sizes, styles and such. You don't give position attributes to span.
So roughly said Div is like building block that you pile on top of each other. Span is then just altering small parts inside other elements.
Span and div are both generic HTML elements that group together related parts of a web page. However, they serve different functions. A div element is used for block-level organization and styling of page elements, whereas a span element is used for inline organization and styling.