Description

The HTML element <span> is used to define a generic inline container, which can be a part of a text or a part of a document.

The element <span> can be easily styled or manipulated with JavaScript using the element's class or ID attribute.

The elements <span> and <div> are similar with a difference.

  • Element <span> can be used to define a generic inline container.
  • Element <div> can be used to define a generic block container.

The below table summarizes its usage.

Usage Details
Placement It is displayed as an Inline element.
Contents It can contain the Inline elements and text.
Tags Both the opening and closing tags are required.
Versions HTML 4, 4.01, 5

Syntax

Here is the basic syntax of the <span> element.

<span>...</span>

Examples

Run this on IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example - HTML Element span</title>
</head>
<body>
    <p>This paragraph contains a generic inline container that looks <span style="color:red;">different</span> from its surrounding text.</p>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <span> element.

Attribute Type Details
Element-Specific Attributes The tag <span> doesn't have any element-specific attributes.
Global Attributes Like all other HTML tags, the tag <span> supports the HTML Global Attributes.
Event Attributes The tag <span> also supports the HTML Event Attributes.

Browser Compatibility

The tag <span> is supported in all modern browsers.

  • Google Chrome 1+
  • Internet Explorer or Edge 3+
  • Firefox 1+
  • Apple Safari 1+
  • Opera 4+

Related Links