span (HTML element)

Description

For an element that offers no semantic information about the content inside and also provides no styling change, or any other visual change to speak of, the lowly span element is one of the most useful elements in your HTML toolbox.

When you wrap text with an opening <span> and closing </span>, you’re simply providing a hook—one that allows you to add styles (by adding a class attribute and using CSS to define the look of that class), or interact with the element via JavaScript and the Document Object Model (DOM).

In the example shown here, the author has decided that all brand names should be classed as “brandname” and styled differently via CSS, in italic, uppercase letters, as the following figure shows.

Company names styled via span elements

A span is an inline element, and must only contain text content or nested inline or phrase elements. It shouldn’t be used to surround block-level elements—a usage that’s often seen in Content Management Systems which attempt to apply styling to almost any element by throwing a span around it.

The span is closely related to the div element, which is a block-level generic container, as opposed to span, which is an inline generic container.

A note of caution: it’s not unheard of for people to go crazy with spans, using them all over the place. span-itis is a bad practice—it’s just as bad as a dose of div-itis. Be sure to check that you’re using the span element appropriately. For example, if you find yourself applying spans like this, you’re in trouble:

He said it was <span class="important">really</span> important
    to know the difference.

It’s clear that in the example above, the em element would have been more appropriate, as it implies emphasis in all browsers. On the other hand, without CSS styling, would be all but meaningless.

Example

Here’s an example of the span element being used for CSS styling
purposes:

.brandname {font-style:italic;color:#006;text-transform:uppercase;}

⋮
<p>There were various brands represented at the
    conference, including <span class="brandname">Adobe</span>,
    <span class="brandname">Microsoft</span>, <span
    class="brandname">Apple</span>, and <span
    class="brandname">Intel</span>.</p>

Frequently Asked Questions (FAQs) about the Span HTML Element

What is the purpose of the span HTML element?

The span HTML element is a versatile inline container that can be used to group other inline elements for styling purposes. It does not inherently represent anything, but it can be useful in applying CSS styles or performing certain JavaScript functions on a group of elements. Unlike other HTML elements, the span element does not create a new line on the webpage, making it ideal for applying changes to small sections of text within a paragraph or sentence.

How does the span HTML element differ from the div HTML element?

Both the span and div HTML elements are used to group other elements, but they differ in their display properties. The div element is a block-level element, meaning it creates a new line before and after the content, while the span element is an inline element, meaning it does not create a new line. This makes the span element ideal for grouping and styling small sections of text within a paragraph, while the div element is better suited for larger sections of content.

How do I use the span HTML element to style text?

To use the span HTML element to style text, you first need to wrap the text you want to style within the span tags. Then, you can apply CSS styles to the span element either inline, in the head section of your HTML document, or in an external CSS file. For example, if you want to change the color of a specific word within a paragraph, you could use the span element like this:

This is a <span style="color: red;">red</span> word.

Can I nest span HTML elements within each other?

Yes, you can nest span HTML elements within each other. This can be useful if you want to apply multiple styles to different parts of the same text. However, keep in mind that the innermost span element will take precedence if there are conflicting styles.

Can I use the span HTML element with other HTML elements?

Yes, the span HTML element can be used with any other inline HTML elements, such as the a, em, and strong elements. However, it should not be used with block-level elements, as this can cause unexpected behavior.

How does the span HTML element interact with CSS selectors?

The span HTML element can be targeted with CSS selectors just like any other HTML element. This means you can apply styles to all span elements on a page, or you can use classes or IDs to target specific span elements.

Can I use the span HTML element to perform JavaScript functions?

Yes, the span HTML element can be used to perform JavaScript functions. By giving the span element an ID or class, you can target it with JavaScript and manipulate its content or style, or use it to trigger events.

Are there any limitations or drawbacks to using the span HTML element?

The main limitation of the span HTML element is that it is an inline element, meaning it cannot contain block-level elements. Additionally, because it does not inherently represent anything, it should not be used to convey meaning or structure to your webpage.

How is the span HTML element supported across different browsers?

The span HTML element is widely supported across all major browsers, including Chrome, Firefox, Safari, and Edge. This means you can use it without worrying about compatibility issues.

What are some best practices for using the span HTML element?

When using the span HTML element, it’s important to remember that it should only be used for styling purposes, not for conveying meaning or structure. Additionally, because it is an inline element, it should not be used to group block-level elements. Finally, to ensure your code is easy to read and maintain, it’s a good idea to use classes or IDs to target span elements with CSS or JavaScript, rather than applying styles or functions directly to the span element.