What is an HTML Span Tag?

Article Details
  • Written By: Dorothy Distefano
  • Edited By: Michelle Arevalo
  • Last Modified Date: 06 October 2019
  • Copyright Protected:
    Conjecture Corporation
  • Print this Article
Free Widgets for your Site/Blog
Fr. Thomas Byles, who refused to leave the sinking Titanic and stayed to help others, is a candidate for sainthood.  more...

October 21 ,  1879 :  Thomas Edison lit up a light bulb for the first time.  more...

Hyper Text Markup Language (HTML) is a specialized set of computer codes used to determine how a webpage appears. Each element is tagged with a specific code so that the browser displays the text in the way the tagger has intended. The span tag is indicated by and is used to add a hook to a specific portion of text.

The html span tag is similar to the logical division, or div tag. Both are used with Cascading Style Sheets (CSS), a language that web developers use to assign style properties to html, xhtml, and xml web documents. The use of CSS enables the separation of the content from the presentation elements, such as layout, font, and color. This makes content more accessible and presentation more flexible.

The html span tag makes no active change to the indicated text, unlike tags that indicate heading size, paragraph, or text color. Instead, this tag is used to group a portion of html together, and to hook some other information to that portion. The html div tag works similarly, but each tag serves a different purpose.


The div tag divides a web page into large sections. Its use allows developers to define the style of a large section of html code. With the div tag, comes the ability to name the tagged sections so that they may be easily dealt with in CSS. Note that the html div tag breaks paragraphs. In other words, you may have paragraphs within a section marked with div, but you may not have a div inside of a paragraph.

The html span tag is similar to the div tag as it encloses a section of text. Without style attributes, it will not change the text it has enclosed. will not do any formatting without attribute tags, where div includes breaks.

Three useful attributes that may be used with the html span tag are style, class, and id. By using span, a specific attribute may be attached to a small portion of text. For example, if a sentence is written in a Level 1 Heading and the last word must be red, the html span tag may be used to accomplish this. See the example below.

will yield this result:

This should be red

By enclosing the desired word with the html span tag, the attribute — in this case the color red — is limited to the single word indicated. It should be noted that the html span tag may be inside paragraph or div tags. As with all html tags, you must close the element in order for it to work properly.


You might also Like


Discuss this Article

Post your comments

Post Anonymously


forgot password?