HTML SPAN Tag

Reference on how the HTML span element is used, and a few working examples, along with Brugbarts recommendations.

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

Do not use IDs on span elements, unless you are absolutley sure that they will only be used once on your page. It is invalid to repeat IDs on a page, so you should use classes instead, in case you want to apply the same style on multiple elements.

Usage

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

Attributes

Standard Attributes

Attribute:	Value:	Description:
Attributes	Global Attributes	Common, I18n, Event

Examples

The Simple Example:

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

Working examples

<!DOCTYPE html>
<html lang="en-US">

  <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>

Brugbart Vision!

Using class and ID selectors

Each time span accurs, it will have the styles applied that we specified. You can also give the span tag a class, or an id like in this example. You can find more selectors in the reference: CSS Selectors.

<!DOCTYPE html>
<html lang="en-US">

  <head>
    <title>Brugbart Span Example</title>
    <style type="text/css">
    .repeat {
     text-decoration: underline;
     font-weight: bold; /* Eh i ate to much lunch */
    }
    #DoNotRepeatMeOrIwillEatYou {
     color: red; /* Is this color ugly? */
    }
    </style>
  </head>

  <body>
    <p>This is My first <span id="DoNotRepeatMeOrIwillEatYou">Website</span>.</p>
    <p>This is an example using <span class="repeat">Span Tags</span>.</p>
    <p>This is an example using <span class="repeat">Span Tags</span>.</p>
    <p>This is an example using <span class="repeat">Span Tags</span>.</p>
  </body>

</html>