What Is 'Span' in HTML?

Of the manyHTMLelements you’ll encounter on your journey to front-end mastery, span is one you’ll see very often. But, unlike other elements, thetag doesn’t create a specific type of page element on its own. At first, this might be confusing — what’s an element likeactually used for?

一个s 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 withtags 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.

一个span tag is written with an opening and a closing tag, like so:

Content goes here

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 asemantic HTML element, one whose name describes its purpose (e.g.,

for paragraph,, and

).

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, atag does not affect how the page renders.

See the PenSpan Tag With No Attributesby Christina Perricone (@hubspot) onCodePen.

However,tags are powerful because they let us assign anyglobal HTML attributeto a section of text or other inline page content. The most common attributes you’ll see used with span are the selectorsidandclass, used to apply styling to specific words. See the example below for some various examples.

See the PenStyling Text With Spanby Christina Perricone (@hubspot) onCodePen.

It’s also possible toapply CSS to HTML elementswithintags using thestyleattributes (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 atag and add thelangattribute 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 PenSpan Tag With Langby Christina Perricone (@hubspot) onCodePen.

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

See the PenUsing Span With JavaScriptby Christina Perricone (@hubspot) onCodePen.

Lastly, we can useto粗体和斜体文本with CSS. However, it’s a better practice to use thetag for bolding text and the(emphasis) tag for italicizing text. This is becauseandare semantic HTML elements (whereas) is not, which makes your code more accessible to screen readers. Visibly, these techniques are identical — see below.

See the Penstrong and em vs. spanby Christina Perricone (@hubspot) onCodePen.

Whenever possible, you should always see if there’s a more semantic alternative tobefore using it forbetter accessibility.

HTML Span vs. Div

Like span,divis 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 genericblock-levelelement.

For a more in-depth explanation of what this means in practice, see ourfull explanation of span versus div in HTML. But, in short, here are the main differences between span and div elements:

• adds a line break after its closing tag, whiledoes not. This is why divs are “blocks” while spans are inline.
• 一个
  element takes up the full width of its container, whileonly takes up the width of its inner content. The width and height of a

  element can be changed in CSS, but you cannot change the width and height of aelement with CSS.
• Generally,
  elements are used to separate chunks of content, andtags 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 Penspan vs div 1by Christina Perricone (@hubspot) onCodePen.

Style Your Text With Span Tags

一个s we’ve seen, there’s a lot you can do withtags, 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, keepin your tool belt — you’ll use it quite a bit.

Originally published Jun 9, 2021 7:00:00 AM, updated August 23 2021

Topics:

HTML

Don't forget to share this post!