DIV and SPAN tags: What’s the “div”ference?
When using CSS instead of Tables as the basis for your designs (which CSS is STRONGLY recommended in order to increase speed and compatibility of your design), we use two main HTML tags for the formatting. <DIV> and <SPAN>. Understanding the fundamental difference (it is election season) between these two tags is critical to moving forward with a CSS based layout.
There are two main category types that nearly all HTML tags can fall into. “Block” elements and “Inline” elements. a <DIV> tag is considered a “Block” element, while a <SPAN> tag is an “Inline” element.
Common block elements are <table><ul><p><hr>, etc. Block elements by default use 100% of the width available and any elements that follow their closing tag will begin on the next line.
Common inline elements are <strong><em><abbr>, etc. Inline elements are different in that they are commonly applied to text and that they fall inline with the elements that precede and follow them. Here are some examples:
However, only this shaded area is a “SPAN” tag.
Notice the difference? By understanding the difference between SPAN and DIV tags, you can now begin applying formatting to specific areas of your layout!
