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.
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.
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.
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.
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.
<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:
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.
Originally published Jun 9, 2021 7:00:00 AM, updated August 23 2021