Using Div And Span Tags

In HTML programming, using div and span tags will happen very frequently as we could consider them as a backbone in this markup language.

If you've ever used Frontpage to create a web page and looked at the code, there's one specific HTML tag you will have noticed frequently: the <div> tag. This tag is used to divide your page text into sections, to which it applies a specific look, style, or name.

For example, say you want to use a lengthy quote by your favorite author. But you don't want to have it appear as a standard quote; instead, you want it to appear as a callout, or put it inside a box, or turn the text blue and neon. You would place this text inside a <div></div> pair and apply whatever styles you want within the initiating tag.

Let's say you want the text to be red, the paragraphs to justify, and the whole thing to be set in sans-serif font. You would have a <div> style that looks like this:

<div style="text-align: justify; color: green; font-size: 12 pt;>Hello, World!</div>

This may seem useless, as you already have other tags that can change color and font size. But it's not. More and more, HTML is moving away from simple tags that apply specific characteristics and toward CSS, cascading style sheets.

Cascading style sheets are a way you can define what all your quotes (or whatever other special text you have on your page) are supposed to look like, and then each time you use them on your page, you create a call to the CSS. CSS is defined in the beginning of the page outside the <body> tag, though in the case demonstrated above, all the stuff after "style" is actually CSS defined right there at the point of insertion, which is also called in-line CSS.

The reason <div> is being used in this manner right now is to prepare for CSS in the future. It's kind of like cars being built with large computer brains, even though you aren't using all the space right now; in the future, a lot of technological devices are coming online, like rewindable radio, that will use that capacity. The <div> tag is planning ahead.

When CSS is actually implemented, the <div> tag will look more like the statement below.

You cannot use <div> inside a paragraph; it will insert a paragraph break. In other words, it is a paragraph-specific HTML tag.

The current most common use for a <div> tag is to center text, since the most recent versions of HTML have deprecated (ceased using) a separate alignment tag. Now, instead of center looking like this:

<center>Hello, World!</center>

It looks like this:

<div style="text-align: center;">Hello, World!</div>

At the moment, both versions of centering are still translated as a centering of text by most browsers, but eventually the original center tag will be ignored.

<span> can be used in exactly the same way, but with <span>, you can perform other functions. In addition, <span> can be used in the middle of a paragraph without forcing a break. The two are used for different purposes, though, which we will get to in the section on CSS.

Something Really Cool

Tired of looking at these two stupid commands that aren't doing anything right now? Well, try this in your web page:

<SPAN onMouseOver="color='blue';"onMouseOut="color='orange';">Hi, I'm color-changing text!</SPAN>

When your page is live, run your mouse over the text. You can do this with font, strength, size, and with images as well as text.

This is only one of dozens of things you can do with your text using <span>.

I am sure you would now be clear on using div and span tags in HTML program codes.