W3docs
en
Log in

Is It Possible to Use a <span> Within Another <span>

In this snippet, you will learn whether it is possible to use an HTML <span> element within another element. Read this tutorial and find the answer to this question.

Tags

Using the HTML <span> element

As we know, the <span> tag is a generic inline-level container for phrasing content, and it groups elements for styling purposes. It uses the <span class="attribute">class</span> and <span class="attribute">id</span> attributes.

According to the HTML5 specification, the <span> element is a generic inline container for phrasing content. Nesting <span> elements is valid, though it is often unnecessary; consider using semantic HTML elements or applying CSS classes directly to a single <span> when possible.

The <span> element along with the <span class="attribute">id</span> and <span class="attribute">class</span> attributes offers a generic mechanism to add structure to documents. It defines the content to be inline, but does not require any other presentational idiom on the content.

Example of using a <span> within another <span>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <span>
      <span>A span element</span>
    </span>
  </body>
</html>
Try it Yourself »

Example of using a <span> tag with CSS properties:

Example of using a <span> within CSS properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #example {
        display: block;
        background-color: lightblue;
        padding: 10px;
      }
      .text {
        display: inline-block;
        padding: 10px 20px;
        background-color: lightgreen;
      }
      .right-text {
        display: block;
        text-align: right;
        background-color: pink;
        padding: 5px 10px;
      }
    </style>
  </head>
  <body>
    <span id="example">
      <span class="text">This is a span element.</span>
      <span class="right-text">This is another span element</span>
    </span>
  </body>
</html>
Try it Yourself »