Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

Articles & Tutorials

Divs and Spans; What's the Difference?

by Jocelyn Kinnear

« Prev · 1 · 2 · Next »

Summary : Ever wonder what the differences were between divs and spans? This article steps you through what a div is, what a span is and what the difference is.

Before we get into the definitions of divs and spans, we'll have to gather an understanding of what an element is. Elements are what make up a webpage. Each element is predefined by your browser and are all part of HTML (Hyper Text Markup Language). If you take a webpage and imagine it being pieced together using multiple blocks, you can call each block an element.

A div is what we call a block-level element, which basically means that it will take on the width of it's containing element and it can hold almost all other elements regardless of whether or not they are inline or block-level.

Div stands for division; when you are using it, you are defining the alignment, position and style of that specific webpage division. You can set an entire division of a website to have red text by using this style:

<div style="color: #f00">Some red text and some more text </div>

The resulting text:

Some red text and some more text

pan is referred to as an inline element, which mainly means that the element is inline, thus inside of another element. You can place inline elements inside of each other, but you can't place block-level elements inside of inline elements.

Span stands for just that; a span. If you have a div and have set the font to be red, but you want couple of words to be blue, you can use a span to surround the text you would like to turn blue:

<div style="color: #f00"> Some red text and <span style="color: #00f">some more text </span></div>

The resulting text would show this:

Some red text and some more text

« Prev · 1 · 2 · Next »