|
If you find this helpful, please click the Google |
Button
The <span> Tag in HTML 5
The <span> tag is one of the inline tags used to group content in HTML.
The following example demonstrates syntax highlighting using the <span> tag.
This is an actual working example of the <span> tag example code below.
<span> Tag Syntax
<body> ... ... phrasing content expected ...<span>... phrasing content ...</span>... ... </body>
Rules for coding the HTML span element
Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.
- Code the span element where phrasing content is expected.
- Begin the span element with a starting <span> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the
xmlnsattribute on the <html> tag. - Include any HTML global attributes on the <span> tag as appropriate.
- Inside the span element, between the starting
<span>tag and the ending</span>tag, code the inner HTML phrasing content. - End the span element with a matching
</span>closing tag.
Content Model
Content of the span element
The content of the span element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.
<span> Tag Attributes
Attributes of the <span> tag
| global attributes | The only attributes that can be coded on the <span> tag are the common HTML attributes. A class attribute or style attribute is often used to style the inner HTML of the span element. |
span tag for Google Translate
Although it is a misuse of the class attribute on the span tag, Google Translate recognizes the specific value notranslate, indicating that the content of the element should not be translated into other spoken languages.
http://www.Google.com/help/faq_translation.html#donttrans
Example
<span class="notranslate"/>
<span> Tag Examples
Examples of the span tag in HTML 5
Using the <span> tag for syntax highlighting
(see <span> tag demo above)
<div id="span-tag-demo">
<style scoped="scoped">
.syntax-highlighting .correct {
text-decoration: none;
}
.syntax-highlighting .incorrect {
text-decoration: line-through;
color: #ee0000;
}
.syntax-highlighting mark {
font-weight: bold;
}
.syntax-highlighting .delimiter {
color: #000000;
}
.syntax-highlighting .tag {
color: #0000ff;
}
.syntax-highlighting .attribute-name {
color: #009900;
}
.syntax-highlighting .attribute-value {
color: #006666;
}
.syntax-highlighting mark {
background-color: #ffff00;
}
</style>
<p class="syntax-highlighting">
Correct: <code class="correct"><span class="delimiter"><</span><span
class="tag">th</span> <span class="attribute-name">colspan</span><span
class="delimiter">="</span><span class="attribute-value">3</span><span
class="delimiter">"></span></code><br/>
Incorrect: <code class="incorrect"><span class="delimiter"><</span><span
class="tag">th</span> <span class="attribute-name">colspan</span><span
class="delimiter">=</span><mark><span class="delimiter">'</span><span
class="attribute-value">3</span><span class="delimiter">"</span></mark><span
class="delimiter">></span></code>
</p>
</div>
The mark element is inserted to highlight the incorrect code by adding a starting <mark> tag between the = and the incorrect ' and adding an ending </mark> tag between the " and the >. Since those locations are within the inner HTML of different span elements, each of those elements must be split into two elements by adding an ending </span> tag and a new starting <span> tag on either side of the inserted <mark> tags.
Chrome renders the text inside the mark element with a yellow background. For consistency in other browsers, the background-color property is specified for the mark element.
Changes in HTML 5 - <span> Tag
What's new in HTML 5
Differences between HTML 5 and earlier versions of HTML
The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the span element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.