Spread the love

HTML <span> Tag

The HTML span tag is very important, The HTML <span> Tag is used as a normal container for inline elements. It is used for the purposes of styling grouped inline elements (using the class and id attribute or inline style).

The <span> Tag has no default meaning or rendering.

The <span> Tag can be useful for:

  • To change the language of a part of the text.
  • To change the color, font, background of a piece of text using CSS.
  • To apply scripts to a particular part of the text. <span> Tag comes in handy.

Note:- HTML <span> Tag is very similar to <div> Tag, but <div> Tag is used for block-level elements and <span> Tag is used for inline elements.

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML span Tag
    </title>
</head>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
} 
 
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML span tag Example</h1>    
  <p>I have choosen only 
    <span style="color: red;">red</span>, 
    <span style="color: blue;">blue</span>, and
    <span style="color: green;">green</span> colors for my painting.
  </p>   
</body>
</html>

Output:-

I have choosen only red, blue, and green colors for my painting.

HTML Strike Tag

HTML <strike> Tag

The HTML <strike> Tag is used to strike a line through text, placing the line above the text within it.

Note:- Do not use the <strike> Tag as it is now obsolete and not supported by HTML5, you can use <del> Tag, <s> Tag or CSS to achieve the same result.

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML strike Tag
    </title>
</head>
<style type="text/css">
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
} 
 
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML strike tag Example</h1>    
  <p><strike>This is not a valid paragraph</strike></p>  
  <p>This is a valid paragraph</p>   
</body>
</html>

Output:-

This is not a valid paragraph

This is a valid paragraph

HTML Sub Tag

HTML <sub> Tag

HTML <sub> Tag are called subscript tags and are used to define subscript text. The text within the <sub> Tag renders with a lower baseline and with a smaller font than the surrounding text font.

The <sub> Tag is useful for representing mathematical formulas and chemical formulas such as H2O.

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML sub Tag
    </title>
</head>
 
<body>
<h1 style="margin-bottom: 50px; ">This is HTML sub tag Example</h1>    
<p>The chemical formula for Sulphuric acid is: H<sub>2</sub>SO<sub>4</sub></p>  
</body>
</html>

Output:-

The chemical formula for Sulphuric acid is: H2SO4

HTML Summary Tag

HTML <summary> Tag

The HTML <summary> Tag is used with the <description> Tag. It is used as a summary, caption, or legend for the content of the <description> Tag element.

It is used within the <details> Tag. It should have a closing tag.

The <summary> Tag is new and introduced in HTML 5.

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML summary Tag
    </title>
</head>
 
<body>
<h1 style="margin-bottom: 50px; ">This is HTML summary tag Example</h1>    
 <details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

</body>
</html>

Output:-

Epcot Center

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

HTML Sup Tag

HTML <sup> Tag

HTML <sup> Tag is called a superscript tag which is used to define superscript text. Text within the <sup> Tag appears along the upper baseline and is rendered with a smaller font size than the surrounding text.

The <sup> Tag is useful for defining mathematical formulas and footnotes.

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML sup Tag
    </title>
</head>
 
<body>
<h1 style="margin-bottom: 50px; ">This is HTML sup tag Example</h1>    
   <h2>Following is the famous Pythagorean Theorem:   </h2>
  <p style="font-size: 20px; color: blue;"><var>a</var><sup>2</sup>+<var>b</var><sup>2</sup>=<var>c</var><sup>2</sup>  
  </p>  

</body>
</html>

Output:-

a2+b2=c2

HTML Svg Tag

HTML <svg> Tag

HTML SVG is an acronym that stands for Scalable Vector Graphics.

HTML SVG is a modular language used to describe graphics in XML. It describes two-dimensional vector and mixed vector/raster graphics in XML. This is a W3C recommendation. SVG images and their behavior are defined in XML text files. So as XML files, you can create and edit an SVG image with a text editor, but generally, a drawing program such as Ink Space is preferred for creating it.

SVG is mostly used for vector-type diagrams such as pie charts, 2-dimensional graphs in X, Y coordinate systems, etc.

The <svg> Tag element specifies the root of an SVG segment. You can animate every element and every attribute in SVG files.

Example:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        HTML svg Tag
    </title>
</head>
 
<body>
<h1 style="margin-bottom: 50px; ">This is HTML svg tag Example</h1>    
   <svg width="100" height="100">  
 <circle cx="50" cy="50" r="40" stroke="blue" stroke-width="4" fill="grey" />  
</svg>  
</body>
</html>

Output:-


Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *