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.
Table of Contents
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:-
