<span>: The Content Span element #

::: section-content The <span> 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 like a ](div) element, but [ is a block-level element whereas a <span> is an inline-level element. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <span> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

Add the basil, pine nuts and garlic to a blender and blend into a paste.

<p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} span.ingredient { color: #f00; } ::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: ::: :::

Attributes #

::: section-content This element only includes the global attributes. :::

Example #

Example 1 #

::: section-content

HTML #

::: code-example [html]{.language-name}

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

:::

Result #

::: {#sect1 .code-example} ::: iframe ::: ::: :::

Example 2 #

::: section-content

HTML #

::: code-example [html]{.language-name}

<li>
  <span>
    <a href="portfolio.html" target="_blank">See my portfolio</a>
  </span>
</li>

:::

CSS #

::: code-example [css]{.language-name}

li span {
  background: gold;
}

:::

Result #

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

Specifications #

::: _table #

Specification #

HTML Standard
[# the-span-element]{.small}

:::

Browser compatibility #

::: _table Desktop Mobile

       Chrome    Edge   Firefox   Internet Explorer   Opera   Safari   WebView Android   Chrome Android   Firefox for Android   Opera Android   Safari on IOS   Samsung Internet

span 1 12 1 Yes 15 1 4.4 18 4 14 1 1.0 :::

See also #

::: section-content

• HTML `` element :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span{._attribution-link} :::