1. Technology

The SPAN and DIV HTML Elements

Learn How to Use SPAN and DIV with CSS on Web Pages


SPAN and DIV tags in HTML

SPAN and DIV tags in HTML

courtesy J Kyrnin

The SPAN and DIV HTML tags are very useful for use with Cascading Style Sheets. Many beginners use the two elements in a similar fashion, but they serve different purposes. Learn how to use these two elements effectively in your web pages.

The DIV Element

The DIV element defines logical divisions on your web page. It acts a lot like a P element, by placing newlines or carriage returns before and after the division. A division can have multiple paragraphs in it.

Using the DIV Tag

To use the DIV element, surround the area of your page that you want as a separate division with the <div> and </div> tags:

<p>contents of div</p>

If the area is unique on the page, you can add an id, e.g. <div id="myDiv"> or if there are many similar areas onthe page, you can add a class, e.g. <div class="bigDiv">. Both of these attributes can then be selectted using CSS or modified using JavaScript.

The DIV element allows you to define the style of entire sections of the HTML. You can define a division of your page as a callout and give that area a different style from the surrounding text. That area may have images, paragraphs, headlines, anything you wanted. The DIV element also gives you the ability to identify unique areas of your documents.

The DIV element is different from the HTML5 SECTION element because it does not give the enclosed content any semantic meaning. If you aren’t sure whether the block of content should be a DIV or a SECTION, think about what that content’s purpose is and why you need the DIV or SECTTION element.

  • If you need the element simply to add styles to that area of the page, you should use the DIV element.
  • If that area of the page has a specific semantic meaning or the contents can stand on its own like an article or or blog post, then you should use the SECTION element.

One thing to keep in mind when using the DIV element is that it breaks paragraphs. It acts as a paragraph end/beginning, and while you can have paragraphs within a DIV you can’t have a DIV inside a paragraph.

The most important attributes of the DIV element are:

Even if you don’t use style sheets or DHTML, you should get into the habit of using the DIV element. This will give you more flexibility and future proof your HTML.

Because the CENTER element has been deprecated in HTML 4.0 and is obsolete in HTML5, it is a good idea to start using <div style="text-align: center;"> to center the text inside your DIV elements instead.

Learn More About the DIV Element

The SPAN Element

The SPAN element has very similar properties to the DIV element, in that it, along with CSS, can change the style of the text it encloses. But without any style attributes, the SPAN element doesn’t change the enclosed text at all.

The main difference between the SPAN and DIV elements is that SPAN doesn’t do any formatting of it’s own. As mentioned above, the DIV element includes a paragraph break. The SPAN element simply tells the browser to apply the style rules to whatever is within the SPAN.

To use the SPAN element, simply surround the text that you want to add styles to with the <span> and </span> tags:

<div id="mydiv">
<p><span>Highlighted text</span> and non-highlighted text.</p>

Then add the class="highlight" or other class to the SPAN element to style the text with CSS. e.g. <style class="highlight">

The SPAN element has no required attributes, but the three that are the most useful are the same as for the DIV element:

  • style
  • class
  • id

Use SPAN when you want to change the style of elements without placing them in a new block-level element in the document. For example, if you had a Level 3 Heading (H3) that you wanted the second word to be red, you could surround that word with <span style="color: #f00;">2ndWord</span> and it would still be a part of the H3 tag, just red. For example:

<h3>This is My <span style="color: red;">Awesome</span> Headline</h3>

Learn More About the SPAN Element

Related Video
DIV and Span Tags

©2014 About.com. All rights reserved.