DIV and Span Tags - How to Use DIV and Span Tags to Format in HTML Video
  1. Tech

Your suggestion is on its way!

An email with a link to:


was emailed to:

Thanks for sharing About.com with others!

Video:DIV and Span Tags

with Don Schechter

Learn what the DIV and span tags are, and how to use them to format your website.See Transcript

Transcript:DIV and Span Tags

Today I'll show you how to use the div and span tags in your HTML file to help format your website.

What Is the DIV Tag?

The div tag is a block level structure element meaning that it cannot be inside a paragraph or any other block level element. It is used to format whatever text is within the div tag. I am going to type a div tag around these two paragraphs. I'll include a class and name it top. The class is just used to identify elements, so you can name it anything you want. Now I'll save my html file and open it in a browser, you will see that nothing has changed. The div tag has no style by default so it will not change your format.

Using the DIV Tag

Say I wanted to make the background in these paragraphs a different color. In the head tag, within the style tag type: dot top, brace, enter and tab over. Now type background dash color, colon, pound and the hexadecimal number you want for the background. Don t forget the semicolon and close the brace. Save your HTML file. Open it in a browser. There you can see the paragraphs now have a different background color. If I wanted to incorporate the next paragraph in the div tag, all I have to do is move the end tag below it. You can have multiple attributes for the same class.

What Is the Span Tag?

The span tag is an inline level structure meaning it can be used within a block element such as a div or paragraph tag. If you wanted to make a single word a different color within a paragraph, type span class equals, then name your class in quotes. I'll type bottom. Then the end tag after the word or phrase you want to change. As with the div tag, the span tag by default has no styling information.

Using the Span Tag

Now go up to your style tag in HTML. Type dot bottom, brace, enter and tab over. Type color, colon pound and the hexadecimal number you want. Don t forget the semicolon and the closing brace.

Save your file and open it in a browser to see your changes. You can use the div and span tags to change styling attributes including font weight, color, and background color. You can assign the same class for a div or span tag to multiple blocks of text in your website.
About videos are made available on an "as is" basis, subject to the User Agreement.

©2015 About.com. All rights reserved.