HTML - Tag

Quiz

Introduction to Tag

The HTML  tag is an inline container for phrasing the text. It can be easily style using CSS and manipulated with JavaScript through class or id attributes.

The tag shpu;d be used only when no other semantic element is suitable. Unlike the <div> tag, which is a block-level element, the tag is an inline-level element. It is used for arguing and applying styles to inline elements.

Syntax

Following is the syntax of tag −

<span>.....</span>

Attributes

The HTML tag supports both Global and Event attributes.

Example: Creating Elements

In the following program, we creating multiple spans using the HTML tag to mark up parts of the text or content in an HTML document. This code creates a webpage with a heading and a paragraph, styling part of the text using the tag.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML span tag</title>
</head>

<body>
   <h3>Tutorialspoint</h3>
   <!-- Creating span Element -->
   <p>Easy Simply Learning on <span>Tutorialspoint.</span></p>
</body>

</html>

Example: Styling Element

Here is another example of the HTML tag. We create multiple input fields for user input and use the tag to mark up parts of the text or content for each input field. This HTML code creates a webpage with a heading and a paragraph, styling the text within the tag in green and 24px font size.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML span tag</title>
    <style>
        span {
            color: green;
            font-size: 24px;
        }
    </style>
</head>

<body>
    <h3>Tutorialspoint</h3>
    <!-- Creating span Element -->
    <p>Easy Simply Learning on <span>Tutorialspoint.</span></p>
</body>

</html>

Example: Parsing Elements

Let's consider the following example, where we run a script to parse content within the tag. This HTML code creates a webpage with a paragraph and a button. Clicking the button displays an alert with the span's text.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML span Tag</title>
   <style>
      #txt {
         font-size: 30px;
      }
   </style>
</head>

<body>
   <!-- Create span Element-->
   <p>Simply Easy Learning<span id='txt'>Tutorialspoint</span></p>
   <button onclick="Show()">Show</button>
   <script>
      function Show() {
         let demo = document.getElementById('txt');
         alert(demo.innerHTML);
      }
   </script>
</body>

</html>