<span>

  • Revision slug: HTML/Element/span
  • Revision title: span
  • Revision id: 17398
  • Created:
  • Creator: McGurk
  • Is current revision? No
  • Comment Added info; 66 words added, 1 words removed

Revision Content

This HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. <span> is very much lika a {{ HTMLElement("div") }} element, but {{ HTMLElement("div") }} is a block-level element whereas a <span> is an inline element.

Usage context

Content categories Flow content, phrasing content
Permitted content Phrasing content
Tag omission None, must have both a start tag and an end tag.
Permitted parent elements Any element that accepts phrasing content, or any element that accepts flow content.
Normative document HTML5, section 4.6.24; HTML 4.01, section 7.5.4

Attributes

Like all other HTML elements, this element supports the global attributes..

DOM interface

This element implements the HTMLSpanElement interface.

Examples

<p><span>Some text</span></p>

Result

Some text

Revision Source

<p>This HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the <strong>class</strong> or <strong>id</strong> attributes), or because they share attribute values, such as <strong>lang</strong>. It should be used only when no other semantic element is appropriate. &lt;span&gt; is very much lika a {{ HTMLElement("div") }} element, but {{ HTMLElement("div") }} is a block-level element whereas a &lt;span&gt; is an inline element.</p>
<h2>Usage context</h2>
<table class="standard-table"> <tbody> <tr> <td>Content categories</td> <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content categories#Flow content">Flow content</a>, <a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">phrasing content</a><a href="/en/HTML/Content_categories#form-associated_content" title="en/HTML/Content categories#form-associated content"><br> </a></td> </tr> <tr> <td>Permitted content</td> <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a><a href="/en/HTML/Content_categories#form-associated_content" title="en/HTML/Content categories#form-associated content"><br> </a></td> </tr> <tr> <td>Tag omission</td> <td>None, must have both a start tag and an end tag.</td> </tr> <tr> <td>Permitted parent elements</td> <td>Any element that accepts <a href="/en/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en/HTML/Content_categories#Flow_content">flow content</a>.</td> </tr> <tr> <td>Normative document</td> <td><a class="external" href="http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element" title='http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element"'>HTML5, section 4.6.24</a>; <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN" title="http://www.w3.org/TR/html401/struct/global.html#edef-SPAN">HTML 4.01, section 7.5.4</a></td> </tr> </tbody>
</table>
<h2>Attributes</h2>
<p>Like all other HTML elements, this element supports the <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>..</p>
<h2>DOM interface</h2>
<p>This element implements the <code><a href="/en/DOM/HTMLSpanElement" rel="internal">HTMLSpanElement</a></code> interface.</p>
<h2>Examples</h2>
<pre class="brush: html">&lt;p&gt;&lt;span&gt;Some text&lt;/span&gt;&lt;/p&gt;
</pre>
<h4>Result</h4>
<p><span>Some text</span></p>
Revert to this revision