HTML SPAN Tag - Reference Entry / Learn By Doing

// References / HTML SPAN Tag

Posted The: 14/05/2008 - AT: 21:36

Edited The: 02/09/2008 - AT: 18:45

The <span> Tag is used to apply styles to sections of text, inside inline elements such as, links, or paragraphs.

Usage

Span can be used as a replacement for the deprecated font tag, it is recommended that webdesigners begin using span instead of font, when making new pages.

Attributes

Standard Attributes

Attribute:	Value:	Description:	DTD:
Attrs	Other Attributes	Common, I18n, Event	STF

DTD. Defines which document type the attribute is allowed. S=Strict, T=Transitional, F=Frameset.

Examples

The Simple Example.

<p>This is My first <span>Website</span>.</p>

The Complete Examples

The Complete Examples.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

  <head>
    <title>Brugbart Span Example</title>
    <style type="text/css">
    span {
     text-decoration: underline;
     font-weight: bold;
    }
    </style>
  </head>

  <body>
    <p>This is My first <span>Website</span>.</p>
    <p>This is an example using <span>Span Tags</span><.</p>
  </body>

</html>

Each time span acurs, it will have the styles applyed. You can also give the span tag a class, or an id like below.

  <head>
    <title>Brugbart Span Example</title>
    <style type="text/css">
    .span01 {
     text-decoration: underline;
     font-weight: bold;
    }
    #UniqueSpan {
     font-weight: bold;
     font-size: 0.5em;
    }
    </style>
  </head>

  <body>
    <p>This is My first<span class="span01">Website</span>.</p>
    <p>This is an example using <span class="span01">Span Tags</span>.</p>
    <p>This is an example using <span id="UniqueSpan">Span Tag with an ID.</span>.</p>
  </body>

Note: Ids are unique, while classes are used to group elements.