Loading

Span

  • <span> tag is an inline tag that gives us the next format.
  • It adds markup to the text or portion of the document.
  • Whenever you utilize this label your text stays in a similar line as opposed to going to the subsequent line. The arranging of the remaining parts between this label simply applies to it.

Example: Without a span tag

<!DOCTYPE html>
<html>

<head>
    <title>Span</title>
</head>

<body>
    <h1>Example without span tag</h1>
    <p style="background-color: aquamarine">Hello and Welcome to Quipoin</p>
</body>

</html>

Output:


Example: With span tag

<!DOCTYPE html>
<html>

<head>
    <title>Span</title>
</head>

<body>
    <h1>Example with span tag</h1>
    <p>Hello and Welcome to <span style="background-color: aquamarine;">Quipoin</span></p>
</body>

</html>

Output:


Usage of Span

  • The <span> element is a small box that can be added to a part of a text in a document. 
  • It is easy to customize or manage through JavaScript using the class or id attribute. 
  • It is similar to the <div> element, but while the <div> is a bigger box that takes up the entire line, the <span> is smaller and only takes up the space it needs.