Let’s talk HTML and CSS: about DIV and SPAN : behindthecodes.com - Programming, web design, gadgets, and anything beyond

Nov '11

3:31 pm

Let’s talk HTML and CSS: about DIV and SPAN

During my web development years, I got these questions a lot: How to convert an HTML table to DIVs and SPANs? How to put several DIVs on the same line? How to make give a SPAN width and height? Etcetera DIV, etcetera SPAN. So to make it easier to explain and refer to again later, allow me to present this ‘demo’ slash step-by-step tutorial. Hope this helps!

Intro: What is DIV? And what is SPAN?

Quoted from W3C website:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

If I may, w3school.com pages here about DIV and here about SPAN summarize these two HTML tags nicely:

The <DIV> tag defines a division or a section in an HTML document. [It] is often used to group block-elements to format them with styles.
The <SPAN> tag is used to group inline-elements in a document. [It] provides no visual change by itself.

So both DIV and SPAN are used for grouping. And if you want to know when to use what, check the sample below.

Execution

The following sentence is wrapped in a DIV:

Well, hello there.

The previous sentence is wrapped in a DIV.

The following sentence is wrapped in a SPAN: Well, hello there. The previous sentence is wrapped in a SPAN.

Source

				<p>The following sentence is wrapped in a DIV: <div>Well, <i><b>hello</b> there.</i></div> The previous sentence is wrapped in a DIV.</p>
				<hr />
				<p>The following sentence is wrapped in a SPAN: <span>Well, <i><b>hello</b> there.</i></span> The previous sentence is wrapped in a SPAN.</p>

I hope it’s clear to you: DIV will produce a block element (ie. it will be ‘separated’ from the previous and next elements), whereas SPAN will produce an inline element (ie. it will flow together with the previous and next elements). Also note that both tags don’t alter anything inside them, and they don’t make themselves different style-wise—except the line breaks, of course.

So far so good? GOOD! Let’s begin our journey deeper then, shall we