×

span – Main Textual Tag [1/16]

<span> is the tag most common to text styling using CSS. It means, simple as it is, "a plain text block." So it has no special meaning of its own. Also, this tag does not change the text display in any way.

However, you can bring additional meaning to it using classes. For example:

<span class="error"></span>
<span class="ok"></span>

Then you can style the class and change the span appearance.


Do it
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>span &ndash; Main Tag to Format Text</title> </head> <body> <h1>Progressive Enhancement</h1> <p>You can&apos;t tell a word about Progressive Enhancement without mentioning Graceful Degradation first. So what&apos;s the difference between those concepts? As we have discussed in an earlier article, you can translate Graceful Degradation as fail safety.</p> <p>This is a very broad term, but in the context of the Web it can be approached as fail safety of client interfaces, server part of websites, and so on. In this article, Graceful Degradation for us means fault tolerance of Web interfaces.</p> </body> </html>
CSS
.important { font-weight: bold; font-style: italic; } .note { font-size: 0.8em; color: #999; } .error { text-decoration: line-through; color: red; }
HTML Academy

To style the text, use <span> tags with the following classes:

  1. important,
  2. note,
  3. error.
Theory Check Next