HTML Span Tag

The HTML span tags are used to define the HTML span element. The HTML span element begins with the HTML <span> tag and ends with the HTML </span> tag. The HTML span element is used to provide additional structure to an HTML document. The HTML span element is an inline element and can be used to give different characteristics to specific parts of other elements.

HTML Span Element Attributes

HTML "span" element attributes include:

  • class - The class attribute is used in conjunction with style sheets to associate an element with a class. The class attribute can set a class for specific element types or it can be independent of element types and work for all elements. The class attribute will provide the settings for specific style formatting. CSS properties are shown at the CSS Properties page.
  • ID - The ID attribute is used to apply style settings to specific individual HTML elements.
  • style - The style attribute is used to apply style settings for the specific element the style attribute is included with. An example is" <p style="font: 16pt courier"> - This sets the style or color of the text. This statement starts a paragraph with color, green: <p style="color: green">. The STYLE attribute is common to most HTML elements (See the CSS Properties page).
  • title - Used to give specific elements a title which may appear as a tooltip in some browsers when the mouse is held at or near the element.

HTML Span Element Contents

The HTML span element may contain other inline elements as listed at the HTML Inline Elements page.

HTML Span Element Inside

The HTML span element can be contained inside any block, inline, or combination block/inline elements.


HTML Span Element Use Example

This is the HTML code for a paragraph demonstrating use of the "span" element while using the "style" attribute to change characteristics of part of the content of a paragraph element.

<p style="text-align: 'center'; font: '16pt courier'; color: 'blue'">
The color of the sky is blue, but if you look at the <span style="color: 'green'">trees, they are green</span>. This effect is produced using the &#60span&#62 element with the style ="color: 'green'" attribute set.
</p>

Here is how it looks:

The color of the sky is blue, but if you look at the trees, they are green. This effect is produced using the <span> element with the style ="color: 'green'" attribute set.