Do you think IIT Guwahati certified course can help you in your career?
Introduction
The `<span>` tag is an inline container element in HTML used to group or wrap a portion of text or inline elements within a document. It doesn't inherently represent anything visually, but it allows you to apply styles, attributes, or manipulate the contained content using CSS or JavaScript. The `<span>` tag is commonly used for styling specific parts of text or as a hook for applying classes or IDs. In this article, we will discuss span tag in HTML in detail, its syntax, uses, and difference between div and span tag.
What is Span Tag in HTML?
The <span> tag in HTML is an inline container that is used to mark up a section of text or document. The <span> tag is a paired tag, which means it requires both an opening (<) and a closing (>) tag, and it is compulsory to close the tag. The span tag groups elements in an HTML document. The grouped elements can then be manipulated and applied CSS or JavaScript in order to make useful and engaging websites. Whenever we want to apply attributes and styles to any specific part of a text in an HTML document, the span tag is the best choice.
Moving forward, let’s see the syntax of the span tag in HTML.
Syntax of Span Tag in HTML
The syntax of the span tag in HTML is as follows:
The text is enclosed inside <span>(opening) and </span>(closing) tags. For example,
<span [attributes]>[content] </span>
The [attributes] is used to specify any additional information about the <span> element. For example, class or an ID. Moving forward, let’s discuss the steps to run HTML code.
What does 'span' do in HTML?
In HTML, the `<span>` tag is used as a generic inline container for grouping and applying styles or attributes to a portion of text or inline elements within a document. let's discuss some key points about what the `<span>` tag does:
1. Inline Grouping: The `<span>` tag is an inline-level element, meaning it does not create a new line or block-level formatting. It is used to group or wrap a portion of text or other inline elements within a paragraph or any other block-level element. This allows you to apply specific styles, attributes, or manipulate the contained content without affecting the overall structure of the document.
2. Applying Styles: One of the primary uses of the `<span>` tag is to apply CSS styles to specific parts of text or inline elements. By wrapping the desired content within a `<span>` tag, you can target it with CSS selectors and apply various styling properties such as color, font, size, background, padding, margin, and more. This allows you to visually differentiate or highlight certain parts of the text.
3. Assigning Classes and IDs: The `<span>` tag can be assigned classes and IDs using the `class` and `id` attributes, respectively. These attributes serve as hooks for applying CSS styles or targeting the element with JavaScript. By assigning a class or ID to a `<span>` tag, you can create reusable styles or easily select and manipulate the contained content using CSS or JavaScript.
4. Semantic Meaning: Unlike other semantic HTML elements like `<p>`, `<h1>`, or `<em>`, the `<span>` tag does not convey any inherent semantic meaning. It is a neutral container used for grouping and styling purposes. However, you can use the `<span>` tag in conjunction with appropriate classes or IDs to provide semantic context to the contained content.
5. Inline Nature: The `<span>` tag is an inline element, which means it flows along with the surrounding text and does not create a new line or block-level formatting. It can be used within paragraphs, headings, lists, or any other block-level elements without disrupting the overall flow of the content.
Example of Span Tag in HTML
The steps to run HTML code with span tag are as follows:
Open Notepad and write your HTML code. For example, let’s make a webpage to display “Hello Ninjas” inside the span tag with styles.
You can directly paste the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Span Tag in HTML</title>
</head>
<body>
<span style="color: orangered;">Hello Ninjas</span>
</body>
</html>
Save this file with a .html extension. Now, to view the output in your browser, copy the path of this file and paste it. Or double-click on the ‘.html’ file. You will see the below output.
Uses of Span Tag in HTML
Below are the use cases of Span Tag in HTML.
1. Used for Applying Styles
The span tag can be used for applying styles to any specific text in an HTML document. For example, we can change color, increase or decrease font size, etc.
2. Scripting
The span tag can be used to group elements together, and then we can apply any functionality using JavaScript or other scripting languages on it.
3. Semantic Markup
The span tag can be used in combination with other tags in order to give additional meaning to the content. For example, <p>Ninja Name: <span itemprop="name">Ninja1</span>.</p> Here, we have used attribute itemprop on the span tag in order to provide an additional meaning. Here it is indicating that it represents the Ninja name.
Below code and output shows the implementation of use cases of span tag in HTML.
Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<title>Span Tag in HTML</title>
</head>
<body>
<h1> Hello Ninjas </h1>
<p> Be more than a coder <span style="color: orangered;font-weight: bold;"> Be a Coding Ninja!!! </span> Let the jobs chase you.</p>
<p>World has enough <span id="my-section">coders</span>.</p>
<script>
var section = document.getElementById("my-section");
section.style.backgroundColor = "yellow";
</script>
</body>
</html>
Output
Explanation
In the above code, we have used the span tag to highlight the phrase “Be a Coding Ninja!!!”. We have also grouped elements and added scripting to it using span tag in HTML.
Difference Between Div Tag and Span Tag
Parameters
<div> Tag
<span> Tag
Purpose
Used for grouping block-level elements and sections of a page.
Used for grouping inline elements within a block.
Display Type
Block-level element. Takes up the full width available and starts on a new line.
Inline element. Only takes up as much width as necessary and does not start on a new line.
Usage
Ideal for structuring larger sections of a webpage, such as containers, sections, and articles.
Ideal for styling small chunks of text or inline elements, such as a portion of text within a paragraph.
Styling
Can have width, height, margins, and padding applied, affecting the layout of surrounding elements.
Typically used for styling text or small elements without affecting the flow of surrounding content.
Default Behavior
Forces a line break before and after its content.
Does not force a line break; content flows inline.
Semantic Meaning
No inherent semantic meaning; purely for layout and styling.
No inherent semantic meaning; purely for inline styling.
The <span> tag can be used inside a <p> tag in order to style a specific part of a paragraph. This is known as the span P tag in HTML.
What is div and span tag in HTML?
Both tags are used to mark up parts of a document. <div> tag is a block-level element means it starts a new line in the document. The <span> tag is an inline element means that it does not start a new line.
What does a span attribute do?
The span attribute is used to set the style of the span tag. The style attribute can be used to set the font, colour, and other properties of the span tag.
Can we use <div> under <span>?
No, you cannot use a <div> inside a <span>. The <span> tag is an inline element, while <div> is a block-level element. Block-level elements cannot be nested within inline elements according to HTML specifications.
What is rowspan in HTML?
rowspan in HTML defines how many rows a table cell (<td> or <th>) should span vertically. It allows a cell to extend across multiple rows, merging them vertically to create a larger cell.
What is the colspan in HTML?
colspan in HTML specifies the number of columns a table cell (<td> or <th>) should span horizontally. This attribute merges multiple columns into a single cell, enabling the cell to cover a wider area horizontally.
Conclusion
In this article, we have discussed about HTML span tag. The <span> tag is a versatile and essential HTML element for inline styling and grouping small sections of text or other inline elements. Its primary advantage lies in its ability to apply styles and scripts without disrupting the document flow.
568+ registered 
