<span>

  • Revision slug: Web/HTML/Element/span
  • Revision title: <span>
  • Revision id: 480811
  • Created:
  • Creator: pablofiumara
  • Is current revision? No
  • Comment clarified that span element takes up the width of their content

Revision Content

Summary

The HTML <span> 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 like a {{HTMLElement("div")}} element, but {{HTMLElement("div")}} is a block-level element whereas a <span> is an inline element. Taking into account that this is an inline element,  they take up the width of their content. On the other hand, paragraphs, which are block elements, take up the width of their containers.

Attributes

This element only includes the global attributes.

Examples

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

Result

Some text

Specifications

Specification Status Comment
{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '<span>')}} {{Spec2('HTML WHATWG')}}  
{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '<span>')}} {{Spec2('HTML5 W3C')}} The DOM interface is now {{domxref("HTMLSpanElement")}}.
{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '<span>')}} {{Spec2('HTML4.01')}}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}

See also

  • HTML {{HTMLElement("div")}} element
{{HTML:Element_Navigation}}

Revision Source

<h2 id="Summary" name="Summary">Summary</h2>
<p>The <strong>HTML <code>&lt;span&gt;</code> element</strong> 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 <code>class</code> or <code>id</code> attributes), or because they share attribute values, such as <code>lang</code>. It should be used only when no other semantic element is appropriate. <code>&lt;span&gt;</code> is very much like a {{HTMLElement("div")}} element, but {{HTMLElement("div")}} is a block-level element whereas a <code>&lt;span&gt;</code> is an inline element. Taking into account that this is an inline element,&nbsp; they take up the width of their <strong>content</strong>. On the other hand, paragraphs, which are block elements, take up the width of their containers.</p>
<ul class="htmlelt">
  <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>.</li>
  <li><dfn>Permitted content</dfn><a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">Phrasing content</a></li>
  <li><dfn>Tag omission</dfn> {{no_tag_omission}}</li>
  <li><dfn>Permitted parent elements</dfn>Any element that accepts <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content">phrasing content</a>, or any element that accepts <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content">flow content</a>.</li>
  <li><dfn>DOM interface</dfn> {{domxref("HTMLSpanElement")}} (before HTML 5, the interface was {{domxref("HTMLElement")}}</li>
</ul>
<h2 id="Attributes" name="Attributes">Attributes</h2>
<p><span style="line-height: 21px;">This element only includes the&nbsp;</span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">global attributes</a><span style="line-height: 21px;">.</span></p>
<h2 id="Examples" name="Examples">Examples</h2>
<pre class="brush:html;gutter:false">
&lt;p&gt;&lt;span&gt;Some text&lt;/span&gt;&lt;/p&gt;</pre>
<h3 id="Result" name="Result">Result</h3>
<p><span>Some text</span></p>
<h2 id="Specifications"><span>Specifications</span></h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('HTML WHATWG', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
      <td>{{Spec2('HTML WHATWG')}}</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML5 W3C', 'text-level-semantics.html#the-span-element', '&lt;span&gt;')}}</td>
      <td>{{Spec2('HTML5 W3C')}}</td>
      <td>The DOM interface is now {{domxref("HTMLSpanElement")}}.</td>
    </tr>
    <tr>
      <td>{{SpecName('HTML4.01', 'struct/global.html#edef-SPAN', '&lt;span&gt;')}}</td>
      <td>{{Spec2('HTML4.01')}}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="See_also" name="See_also">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>HTML {{HTMLElement("div")}} element</li>
</ul>
<div>
  {{HTML:Element_Navigation}}</div>
Revert to this revision