Of the many HTML elements you’ll encounter on your journey to front-end mastery, span is one you’ll see very often. But, unlike other elements, the <span> tag doesn’t create a specific type of page element on its own. At first, this might be confusing — what’s an element like <span> actually used for?
As it turns out, a lot. Span elements give designers and developers tight control over the styling and formatting of their web pages and content. If you want to know how web pages are built, you should get comfortable with <span> tags and their purpose.
In this guide, we’ll introduce you to the span element in HTML. We’ll show you how they’re written, what they’re meant for (and what they’re not), and give some examples of spans in action. Finally, we’ll clarify the difference between span and a similar element, the div. Let’s get started.
What is the ‘span’ tag in HTML?
In HTML, the span tag is a generic inline container element. Span tags usually wrap sections of text for styling purposes or for adding attributes to a section of text without creating a new line of content.
A span tag is written with an opening and a closing tag, like so:
<span>Content goes here</span>
The span element is called “generic” because the name of the tag itself doesn’t tell us anything about the contents of the element. In other words, “span” doesn’t mean anything to us. The opposite of a generic HTML element is a semantic HTML element, one whose name describes its purpose (e.g., <p> for paragraph, <button>, and <form>).
Span tags are also “inline” elements, meaning that the element stays on the current line and does not create a line break. A div, the other generic HTML element, is block-level and creates a new line on the page. We’ll explore the differences between span and div more later on.
What does ‘span’ do in HTML?
On its own, a <span> tag does not affect how the page renders.
See the Pen Span Tag With No Attributes by Christina Perricone (@hubspot) on CodePen.
However, <span> tags are powerful because 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, used to apply styling to specific words. See the example below for some various examples.
See the Pen Styling Text With Span by Christina Perricone (@hubspot) on CodePen.
It’s also possible to apply CSS to HTML elements within <span> tags using the style attributes (also known as “inline CSS”). Inline CSS should be avoided, 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 the tag to indicate the temporary language change. This helps search engine indexing and instructs text-to-speech programs to pronounce these words differently.
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.
Lastly, 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 — see below.
See the Pen strong and em vs. span by Christina Perricone (@hubspot) on CodePen.
Whenever possible, you should always see if there’s a more semantic alternative to <span> before using it for better accessibility.
HTML Span vs. Div
Like span, div is a generic HTML element that you’ll see all over web pages. But, these two elements serve different purposes. Span is a generic inline element, while 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, in short, here are the main differences between span and div elements:
- <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. The width and height of a <div> element can be changed in CSS, but you cannot change the width and height of a <span> element with CSS.
- Generally, <div> elements are used to separate chunks of content, and <span> tags are used 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, there’s a lot you can do with <span> tags, as long as you’re applying them correctly. Without span and div tags, the internet would look pretty different (and pretty bland) compared to how it does today, these generic elements let us style page content down to the individual paragraph or word.
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.