1. Computing

Video:How to Use Span and Div Tags

with Dimitri LaBarge

Using span and div tags in your HTML coding can make your web page look better. Watch this how-to video from About.com to see instructions for properly using them to get a great result.See Transcript

  • All Videos
  • All Computing Videos
  • Web Design / HTML Videos

Transcript:How to Use Span and Div Tags

Hi, this is Dimitri LaBarge for About.com, and today we're going to talk about how to use SPAN and DIV tags.

What Are Span and Div Tags?

The Span and Div tags are extremely useful in helping to define a layout on a page, and are often used within a CSS, or Cascading Style Sheets page structure. Let's talk about what these tags are and how they're used.

Using Span and Div Tags

DIV is a very powerful HTML tag. It's short for divisions, and it lets you define master style attributes to page divisions. For example, you can use the DIV tag to define a section of a page as an italicized quotation. It would look something like this: div style="text-align: center;" In this case, all text located within this DIV section would be centered.

More Uses for Div Tags

You can also use DIV to name particular sections of your code, which makes it easy to refer to in CSS. The one place where you give up control is that when you end a DIV tag, like this: /divYou create a paragraph break. It's very important to carefully plan out your code so you don't wind up with unwanted layout artifacts.

Tips for Using Span Tags

Now, the SPAN XHTML tag is, on the surface, very similar to DIV. But in many ways, it's more powerful - and less limiting - because SPAN is really an open container, if you will. SPAN is a tag that defines a style within everything placed within that tag. Unlike DIV - which is a block element - there's no paragraph break when you place the SPAN tag. And actually, it does nothing at all unless you give it an attribute to define.

So, let's say you want to define a color of a couple of words within a SPAN tag. It would look like this:span style="color : #f00;"Now this text is red!/span That changes just this text to the color red. You could tie it in with a CSS style sheet by using a class or ID attribute. SPAN is great for quick changes with a neutral effect on everything else on the page.

Thanks for watching. To learn more, visit us on the web at About.com.

About videos are made available on an "as is" basis, subject to the User Agreement.

©2014 About.com. All rights reserved.