What Is 'Span' in HTML?

Of the many elements you’ll encounter on your journey to front-end development mastery, HTML span is one of the most common. However, unlike other elements, the HTML <span> tag doesn’t produce a specific type of page element on its own. At first, that might cause you to scratch your head and wonder, “What is span in HTML?” We’re here to answer that question. 

In this guide, we’ll walk you through everything you need to know about the HTML span element. You’ll learn how the element is written, how to use it, and even give some examples of the HTML span tag. Lastly, you’ll also discover the difference between span and a similar element, the div. Let’s dive in! 

• What is span in HTML?

• What does ‘span’ do in HTML?

• What’s the difference between HTML Span vs. div?

What is span in HTML?

In HTML, the span tag is a generic inline container element. You use this element to wrap sections of text for styling purposes or to add attributes to a section of text without creating a new line of content. It is similar — but not the same as — the <div> tag.

The reason designers and developers use <span> is because it provides them with significant control over the styling and formatting of their website content and pages. When you use an HTML span tag, you will also need to use an opening and closing tag. Here’s what it looks like:

We refer to the span element as “generic” because the name of that tag isn’t indicative of anything about the contents of the element. In other words, when we see the word “span,” it doesn’t mean anything to us. This is in sharp contrast with a semantic HTML element, one whose name describes its purpose (e.g., <p> for paragraph, <button>, and <form>).

One other thing you should know about the HTML span tag is that it is an “inline” element. As the name suggests, the element stays on its current line and won’t make a line break. On the contrary, a div (a similar generic HTML element) is block level and using it results in the creation of a new line on your page. Psst: There’s more to learn about the difference between span and div; we’ll cover those later. 

What does ‘span’ do in HTML?

So, what does the span class HTML achieve? Remember: On its own, a <span> tag will not impact how the page renders. 

See the Pen Span Tag With No Attributes by Christina Perricone (@hubspot) on CodePen.

The reason <span> tags are so powerful is that they let us assign any global HTML attribute to a section of text or other inline page content. The most common attributes you’ll see used with span are the selectors id and class, which you’ll use to apply styling to specific words. Here are a few examples: 

See the Pen Styling Text With Span by Christina Perricone (@hubspot) on CodePen.

Yes, it is possible to apply CSS to HTML elements within <span> tags using the style attributes. You may hear this referred to as “inline CSS.” While inline CSS is technically possible, it’s advisable that you avoid it as it makes it more difficult to make page-wide style changes. 

Span can accommodate other attributes, too. For example, if you have a piece of text in a different language than the document, wrap this text in a <span> tag and add the lang attribute to the tag. This indicates a temporary language change, which helps search engine indexing and even instructs text-to-speech programs to pronounce the words correctly. Check out how that works here: 

See the Pen Span Tag With Lang by Christina Perricone (@hubspot) on CodePen.

The span element is also great for targeting a section of text with JavaScript functions. In the example below, the text inside the <span> tag is hidden. The JavaScript code reveals this text when you click a button.

See the Pen Using Span With JavaScript by Christina Perricone (@hubspot) on CodePen.

Last — but certainly not least — we can use <span> to bold and italicize text with CSS. However, it’s a better practice to use the <strong> tag for bolding text and the <em> (emphasis) tag for italicizing text. This is because <strong> and <em>are semantic HTML elements (whereas <span>) is not, which makes your code more accessible to screen readers. Visibly, these techniques are identical — as you can see in our example below: 

See the Pen strong and em vs. span by Christina Perricone (@hubspot) on CodePen.

We have one last note about the HTML span element. Whenever possible, you should always see if there’s a more semantic alternative to <span> before using it. This boosts your website’s HTML accessibility.

What’s the difference between HTML Span vs. div? 

Similar to span, div is a generic HTML element that you’ll see all over web pages. However, the two elements serve different purposes — and it’s important to know which scenario you should use each in. 

First, let’s dive into the different purposes that span and div serve. While span is a generic inline element, div is a generic block-level element.

For a more in-depth explanation of what this means in practice, see our full explanation of span versus div in HTML. But, to keep it short and sweet, here are the must-know differences between div and span:

• <div> adds a line break after its closing tag, while <span> does not. This is why divs are “blocks” while spans are inline.

• A <div> element takes up the full width of its container, while <span> only takes up the width of its inner content. You can change the width and height of a <div> element in CSS, but you cannot change the width and height of a <span> element with CSS.

• Generally speaking, you’d use a <div> element to separate chunks of content, and <span> tags to target a piece of text within a larger chunk of content.

The example below illustrates two divs and two spans — notice the visual differences between these elements:

See the Pen span vs div 1 by Christina Perricone (@hubspot) on CodePen.

Style Your Text With Span Tags

As we’ve seen, the <span> tag is highly versatile — but be sure to apply it correctly. If we didn't have span and div tags, the internet would look drastically different — and pretty bland. These generic elements allow us to style the page content down to the individual paragraph or word, which is why they're invaluable.

So, whether you want to draw attention to a line of text, add dynamic content with JavaScript, or just level up the aesthetics of your site, keep <span> in your tool belt — you’ll use it quite a bit.

Editor's note: This post was originally published in June 2021 and has been updated for comprehensiveness.

How To Land a Developer Role in the World of AI

A free checklist to you help you stand out from the competition featuring Software Developer and YouTube Creator Tech With Tim.

• Expert advice on how to build a portfolio
• Top programming languages to learn
• Resume building and interview tips
• Resources to strengthen communication skills

Download for Free Learn more Download for Free

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now