In Action

Example of using the span tag

The span tag is used to inline a style within a given tag

Interviewers for web development positions like to ask the question, "When would you use the span tag and when would you use the div tag?

The html div tag is more of a container to hold other html markup. You can almost think of a div tag as as mini html page with your html page. On the other hand the span tag is mean to modify a style within an html tag. For example you might want to make certain text stand out from the other text as is shown in this example.

Example



CSS Code

CSS Code - Styling the Span tag

 

       .bigbold { 
           color: red; 
           font-family:arial; 
           font-size: 18px; 
        } 

HTML Code

HTML Code - Styling the Span tag

 

<p>
You can use the span tag <span class="bigbold">to modify styles</span> 
inline with other html markup as is being done in this example. 
</p>
<p>
Here we are doing the same, <span style="color: green;"> except 
when you </span> examine the code you will find that the CSS is 
being done within the html itself. Whereas the example above is 
referencing a CSS class named "bigbold." 
<p>