Learn HTML

HTML: span tag

March 19, 2023
16 Min Read
HTML span tag

HTML: <span> tag

In this series of learning HTML, we will teach you how to use HTML span tag with proper syntax and lots of examples. Let’s start on the HTML span tag.

Description of HTML span tag

The HTML “span” tag is used to apply inline styling or to group a set of inline elements in a document. The “span” tag is typically used to apply a specific style, such as a font color or background color, to a small section of text within a larger block of text.

Here is an example of how to use the “span” tag in HTML:

<p>This is a <span style="color: blue;">blue</span> piece of text.</p>

In the example above, a “span” element is used to enclose the word “blue” within the larger paragraph. The “style” attribute is used to apply a blue color to the enclosed text, which is visually distinct from the surrounding text.

The “span” tag can also be used to group a set of inline elements together for styling purposes. For example:

<p>My favorite fruits are <span class="fruit">apples</span> and <span class="fruit">bananas</span>.</p>

In the example above, a “span” element is used to group the two fruits together and apply a common class of “fruit” to both. This approach allows for consistent styling of the fruits, such as applying a background color or font style.

Overall, the “span” tag is useful for applying inline styling or grouping inline elements together for styling purposes, and it can be a useful tool for improving the visual presentation and organization of a document.

 

Syntax for HTML span tag

The proper syntax for the HTML span tag is as shown below:

<body>
<p><span>Yoy can add text here for span</span> and not here</p>
</body>

We use HTML span tag for style purposes, for example, if you want to change the color of the text to Green then your HTML code will look like this as shown below:

<body>
<p>My sister has <span style="color:green;font-weight:bold">Green</span> eyes and my brother has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
</body>
Sample Output

html span tag

 

Global Attributes

The span tag in HTML is a generic container that is used to group and apply styles to inline-level elements. It does not have any semantic meaning on its own but can be used in conjunction with other HTML elements to provide additional styling and structure to the content.

When using the span tag, you can also apply global attributes that are common to most HTML elements. Some of the global attributes that can be used with the span tag include:

  1. class: Specifies one or more class names for the element, which can be used to apply CSS styles to the element.
  2. id: Specifies a unique identifier for the element, which can be used to reference the element in CSS and JavaScript.
  3. style: Allows you to apply inline styles to the element, such as font size, color, and background.
  4. title: Specifies additional information about the element, which is typically displayed as a tooltip when the user hovers over the element.
  5. aria-*: Attributes that are used to define accessible labels and descriptions for screen readers and other assistive technologies.

Here’s an example of how you can use some of these global attributes with the span tag:

<p>Click <span class="link" id="my-link" style="color: blue;" title="Click me!">here</span> to learn more.</p>

In this example, the span tag is used to group the text “here” and apply a blue color to it using the style attribute. The class attribute is used to specify a CSS class called “link,” which can be used to apply additional styles to the element. The id attribute is used to provide a unique identifier for the element, which can be used to reference it in JavaScript. Finally, the title attribute is used to provide additional information about the element, which is displayed as a tooltip when the user hovers over it.

 

 

Event Attributes

HTML event attributes are used to attach JavaScript functions to HTML elements that are triggered by certain events, such as mouse clicks, keyboard inputs, and page loads.

The span tag does not have any specific event attributes of its own, but it can use global event attributes that are common to most HTML elements. Here are some of the global event attributes that can be used with the span tag:

  1. onclick: This event is triggered when the element is clicked with the mouse.
  2. onmouseover: This event is triggered when the mouse pointer moves over the element.
  3. onmouseout: This event is triggered when the mouse pointer moves away from the element.
  4. onkeydown: This event is triggered when a key is pressed down while the element has focus.
  5. onkeyup: This event is triggered when a key is released while the element has focus.
  6. onload: This event is triggered when the element and its contents have finished loading.

Here’s an example of how you can use the onclick event attribute with the span tag:

<p>Click <span onclick="alert('Hello!')">here</span> to learn more.</p>

In this example, the onclick event attribute is used to attach a JavaScript function that displays an alert message when the user clicks on the span element. When the user clicks on the word “here,” an alert box will appear with the message “Hello!”.

It’s important to note that using inline event attributes like this is generally not considered a best practice, as it can make your HTML code harder to read and maintain. Instead, it’s recommended to use external JavaScript files and event listeners to attach functions to your HTML elements.

 

 

 

Other Attributes

In addition to global and event attributes, the span tag in HTML can also use other attributes that are specific to certain types of content or functionality. Here are some examples of other attributes that can be used with the span tag:

  1. data-*: Attributes that allow you to store custom data for an element. These can be used to pass information to JavaScript functions or to provide additional context to the element.
  2. contenteditable: An attribute that allows the user to edit the content of the element directly in the browser.
  3. dir: An attribute that specifies the text direction of the element, such as left-to-right or right-to-left.
  4. hidden: An attribute that hides the element from the user interface.
  5. lang: An attribute that specifies the language of the content within the element.
  6. spellcheck: An attribute that enables or disables spell checking for the content within the element.

Here’s an example of how you can use the data-* attribute with the span tag:

<p>Click <span data-url="https://www.example.com" class="link">here</span> to learn more.</p>

In this example, the data-url attribute is used to store a custom data attribute for the span element. This data attribute can be accessed using JavaScript and can be used to pass information to a function or to provide additional context for the element. The class attribute is also used to specify a CSS class for the element, which can be used to apply styles to it.

Overall, the span tag in HTML is a versatile and flexible element that can be used in a variety of ways. By using different attributes and combinations of attributes, you can create customized and functional elements that meet the needs of your website or application.

 

Notes on HTML span tag

Here are some important notes to keep in mind when using the span tag in HTML:

  1. The span tag is an inline-level element, which means that it is typically used to group and style small amounts of text or other inline elements.
  2. The span tag does not have any semantic meaning on its own, and is usually used in conjunction with other HTML elements to provide additional structure and styling to the content.
  3. When using the span tag, it’s important to keep accessibility in mind. Make sure to use appropriate tags and attributes to provide context and information to assistive technologies, such as screen readers.
  4. Avoid using the span tag for structural elements or to apply styles that could be achieved with more semantic HTML tags, such as headings or paragraphs. This can make your code less readable and harder to maintain.
  5. When using the span tag, it’s a good practice to separate your content from your presentation. This means using CSS to apply styles to your elements instead of using inline styles or other attributes that mix content and presentation.

Overall, the span tag is a useful and versatile element that can be used in a variety of ways to provide structure and styling to your HTML content. By keeping these important notes in mind, you can ensure that your HTML code is well-structured, accessible, and easy to maintain.

Browser Compatibility

The HTML span tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

 

Examples for HTML span tag

We will discuss the <span> tag below, exploring examples of how to use the <span> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

We will discuss the HTML span tag below, with some examples of how to use the span tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Strict, XHTML 1.0 Transitional, and XHTML 1.1.

  1. HTML5
  2. HTML4
  3. XHTML

 

HTML5 Document

here’s an example of how you can use the span tag in an HTML5 document:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Document with Span Tag Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>HTML5 Document with Span Tag Example</h1>
<p>
This is a <span class="highlight">highlighted</span> text using the <code>span</code> tag.
</p>
<p>
You can also use the <span style="color: blue;">style</span> attribute to apply inline styles to a <code>span</code> element.
</p>
<p>
This is a <span data-custom="my-custom-data">customized</span> text using the <code>data-</code> attribute.
</p>
<p>
You can also use the <span contenteditable="true">contenteditable</span> attribute to allow the user to edit the content of an element directly in the browser.
</p>
<script>
const highlightSpans = document.querySelectorAll('.highlight');
highlightSpans.forEach(span => {
span.addEventListener('click', () => {
span.classList.toggle('highlight');
});
});
</script>
</body>
</html>

In this example, we have a basic HTML5 document that uses the span tag in a few different ways. Here’s a breakdown of each usage:

  1. In the first paragraph, we use the span tag with a class attribute of highlight to apply a yellow background color to the word “highlighted.” This is achieved with the CSS rule .highlight { background-color: yellow; }.
  2. In the second paragraph, we use the span tag with a style attribute to apply a blue color to the word “style.”
  3. In the third paragraph, we use the span tag with a data-custom attribute to store custom data for the element.
  4. In the fourth paragraph, we use the span tag with a contenteditable attribute to allow the user to edit the content of the element directly in the browser.

Finally, we add a JavaScript script that adds a click event listener to all span elements with a class of highlight. When the user clicks on a highlighted word, the script toggles the highlight class on and off, changing the background color accordingly.

Overall, this example demonstrates some of the different ways you can use the span tag in an HTML5 document to provide structure and styling to your content.

HTML 4.01 Transitional Document

here’s an example of how you can use the span tag in an HTML 4.01 Transitional document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Document with Span Tag Example</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>HTML 4.01 Transitional Document with Span Tag Example</h1>
<p>
This is a <span class="highlight">highlighted</span> text using the <code>span</code> tag.
</p>
<p>
You can also use the <span style="color: blue;">style</span> attribute to apply inline styles to a <code>span</code> element.
</p>
<p>
This is a <span data-custom="my-custom-data">customized</span> text using the <code>data-</code> attribute.
</p>
<p>
You can also use the <span contenteditable="true">contenteditable</span> attribute to allow the user to edit the content of an element directly in the browser.
</p>
</body>
</html>

 

In this example, we have a basic HTML 4.01 Transitional document that uses the span tag in a few different ways. Here’s a breakdown of each usage:

  1. In the first paragraph, we use the span tag with a class attribute of highlight to apply a yellow background color to the word “highlighted.” This is achieved with the CSS rule .highlight { background-color: yellow; }.
  2. In the second paragraph, we use the span tag with a style attribute to apply a blue color to the word “style.”
  3. In the third paragraph, we use the span tag with a data-custom attribute to store custom data for the element.
  4. In the fourth paragraph, we use the span tag with a contenteditable attribute to allow the user to edit the content of the element directly in the browser.

Overall, this example demonstrates some of the different ways you can use the span tag in an HTML 4.01 Transitional document to provide structure and styling to your content.

 

 

XHTML 1.0 Transitional Document

Here’s an example of how you can use the span tag in an XHTML 1.0 Transitional document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Transitional Document with Span Tag Example</title>
<style type="text/css">
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>XHTML 1.0 Transitional Document with Span Tag Example</h1>
<p>
This is a <span class="highlight">highlighted</span> text using the <code>span</code> tag.
</p>
<p>
You can also use the <span style="color: blue;">style</span> attribute to apply inline styles to a <code>span</code> element.
</p>
<p>
This is a <span data-custom="my-custom-data">customized</span> text using the <code>data-</code> attribute.
</p>
<p>
You can also use the <span contenteditable="true">contenteditable</span> attribute to allow the user to edit the content of an element directly in the browser.
</p>
</body>
</html>

In this example, we have an XHTML 1.0 Transitional document that uses the span tag in a few different ways. Here’s a breakdown of each usage:

  1. In the first paragraph, we use the span tag with a class attribute of highlight to apply a yellow background color to the word “highlighted.” This is achieved with the CSS rule .highlight { background-color: yellow; }.
  2. In the second paragraph, we use the span tag with a style attribute to apply a blue color to the word “style.”
  3. In the third paragraph, we use the span tag with a data-custom attribute to store custom data for the element.
  4. In the fourth paragraph, we use the span tag with a contenteditable attribute to allow the user to edit the content of the element directly in the browser.

Note that in an XHTML document, all tags must be properly closed, which means that we need to close the meta tag with a slash before the closing > and close the br tag with a slash before the closing >. Also, the xmlns attribute is used to declare the namespace of the document, which is necessary for XHTML documents.

 

 

XHTML 1.0 Strict Document

here’s an example of how you can use the span tag in an XHTML 1.0 Strict document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Document with Span Tag Example</title>
<style type="text/css">
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>XHTML 1.0 Strict Document with Span Tag Example</h1>
<p>
This is a <span class="highlight">highlighted</span> text using the <code>span</code> tag.
</p>
<p>
You can also use the <span style="color: blue;">style</span> attribute to apply inline styles to a <code>span</code> element.
</p>
<p>
This is a <span data-custom="my-custom-data">customized</span> text using the <code>data-</code> attribute.
</p>
<p>
You can also use the <span contenteditable="true">contenteditable</span> attribute to allow the user to edit the content of an element directly in the browser.
</p>
</body>
</html>

In this example, we have an XHTML 1.0 Strict document that uses the span tag in a few different ways. Here’s a breakdown of each usage:

  1. In the first paragraph, we use the span tag with a class attribute of highlight to apply a yellow background color to the word “highlighted.” This is achieved with the CSS rule .highlight { background-color: yellow; }.
  2. In the second paragraph, we use the span tag with a style attribute to apply a blue color to the word “style.”
  3. In the third paragraph, we use the span tag with a data-custom attribute to store custom data for the element.
  4. In the fourth paragraph, we use the span tag with a contenteditable attribute to allow the user to edit the content of the element directly in the browser.

Note that in an XHTML document, all tags must be properly closed, which means that we need to close the meta tag with a slash before the closing > and close the br tag with a slash before the closing >. Also, in XHTML 1.0 Strict, the use of the style attribute is discouraged, and the data- attribute is not part of the standard.

 

XHTML 1.1 Document

here’s an example of how you can use the span tag in an XHTML 1.1 document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>XHTML 1.1 Document with Span Tag Example</title>
<style type="text/css">
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>XHTML 1.1 Document with Span Tag Example</h1>
<p>
This is a <span class="highlight">highlighted</span> text using the <code>span</code> tag.
</p>
<p>
You can also use the <span style="color: blue;">style</span> attribute to apply inline styles to a <code>span</code> element.
</p>
<p>
This is a <span data-custom="my-custom-data">customized</span> text using the <code>data-</code> attribute.
</p>
<p>
You can also use the <span contenteditable="true">contenteditable</span> attribute to allow the user to edit the content of an element directly in the browser.
</p>
</body>
</html>

In this example, we have an XHTML 1.1 document that uses the span tag in a few different ways. Here’s a breakdown of each usage:

  1. In the first paragraph, we use the span tag with a class attribute of highlight to apply a yellow background color to the word “highlighted.” This is achieved with the CSS rule .highlight { background-color: yellow; }.
  2. In the second paragraph, we use the span tag with a style attribute to apply a blue color to the word “style.”
  3. In the third paragraph, we use the span tag with a data-custom attribute to store custom data for the element.
  4. In the fourth paragraph, we use the span tag with a contenteditable attribute to allow the user to edit the content of the element directly in the browser.

Note that in an XHTML document, all tags must be properly closed, which means that we need to close the meta tag with a slash before the closing > and close the br tag with a slash before the closing >. Additionally, in XHTML 1.1, the application/xhtml+xml MIME type is used to serve the document, and the data- attribute is not part of the standard.

Tags

About the author

View All Posts

Home4Cloud