What are physical tags in HTML?
Last Updated :
09 Nov, 2022
Physical Tags are used to indicate that how specific characters are to be formatted or indicated using HTML tags. Any physical style tag may contain any item allowed in text, including conventional text, images, line breaks, etc. Although each physical tag has a defined style, you can override that style by defining your own look for each tag. All physical tags require ending tags.
Syntax:
<tag_name> formatting character or para </tag_name>
Features of Physical Tags:
- They are extremely straightforward.
- They are used to highlighting important sentences.
- Physical Text Styles indicate the specific type of appearance for a section e.g., bold, italics, etc.
- Physical Styles are rendered in the same manner by all browsers.
Example of Physical Tags:
|
Tags
|
Meaning
|
Purpose
|
|
<b>
|
Bold |
Bold increases the importance of the text because bold tag convert the text into bold size. |
|
<i>
|
Italic |
An Italic tag is used to define a text with a special meaning. |
|
<u>
|
Underline |
It is used to underline the text. |
|
<big>
|
Big |
Big tag increase the font size by 1 (Note: You can not use the big tag in HTML 5) |
|
<small>
|
Small |
A small tag defines the small text, and it is used while writing copyright. |
|
<sub>
|
Subscript |
The subscript is used for alternate baseline. |
|
<sup>
|
Superscript |
Superscript is usually used for showing elements above base-line |
|
<strike>
|
Strike-through |
It is an editing markup that tells the reader to ignore the text passage. |
|
<tt>
|
Teletype text |
Teletype text gives the default font-family which is monospace. |
Examples of Physical Tags:
1.<b>: HTML <b> tag acts as a presentation tag used to markup written text as a bold format. If we want to display plain text in bold format you can use text between <b>sentence</b> tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Lorem ipsum dolor sit <b>amet consectetur</b>
adipisicing elit. Voluptates, tempora.
</p>
</body>
</html>
|
Output:
Lorem ipsum dolor sit amet consectetur
adipisicing elit.
2.<i>: HTML <i> tag acts as a presentation tag used to markup written text as an italic format. If we want to display plain text in italics format you can use text between <i></i> tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Lorem ipsum dolor sit <i>amet consectetur</i>
adipisicing elit. Voluptates, tempora.
</p>
</body>
</html>
|
Output:
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptates, tempora.
3.<u>: HTML <u> tag acts as a presentation tag used to markup written text as an underline format. If we want to display plain text in underline format you can use text between <u></u> tag.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Lorem ipsum dolor sit <u>amet consectetur</u>
adipisicing elit. Voluptates, tempora.
</p>
</body>
</html>
|
Output:
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Voluptates, tempora.
4.<big>: The <big> tag is used to make the text one size bigger i.e small to medium, medium to large, and large to x-large but the <big> tag will not make the font size larger than the browser’s maximum font-size.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
Lorem ipsum dolor sit <big>amet consectetur</big>
adipisicing elit. Voluptates, tempora.
</p>
</body>
</html>
|
Output:
5.<small>: The <small> tag is used to make the text one size smaller i.e x-large to large …. small but <small> tag will not make the font-size smaller than the browser’s minimum font-size.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Lorem ipsum dolor sit <small>amet consectetur</small>
adipisicing elit. Voluptates, tempora.
</p>
</body>
</html>
|
Output:
6.<sub>: Sub tag defines subscript. Subscript appears half below a normal line with small font size. These tags are mostly used while writing chemical formulas.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Lorem ipsum dolor <sub>sit amet </sub>
consectetur adipisicing elit. Voluptates, tempora.
</p>
<p>
Acetylene C<sub>2</sub> H<sub>2</sub>
</p>
</body>
</html>
|
Output:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, tempora.
Acetylene C2H2
7.<sup>: Sup tag defines superscript. Subscript appears half above the normal line with small font size. These tags are mostly used while writing mathematical derivations.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Lorem ipsum dolor sit <sup>amet consectetur</sup>
adipisicing elit. Voluptates, tempora.
</p>
<p>
(a+b)<sup>2</sup> = a<sup>2</sup>+b<sup>2</sup>+2ab
</p>
</body>
</html>
|
Output:
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Voluptates, tempora.
(a+b)2 = a2+b2+2ab
8.<strike>: Strike tag defines Strike through sentences. The strike tag makes the horizontal line over the text which represents that this given text is not for reading ignore it.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Lorem ipsum dolor sit <strike>amet consectetur</strike>
adipisicing elit. Voluptates, tempora.
</p>
</body>
</html>
|
Output:
Lorem ipsum dolor sit amet consectetur
adipisicing elit. Voluptates, tempora.
9.<tt>: tt tag defines teletype text. This tag changes the given sentence into its default font-family i.e mono space.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>
Lorem ipsum dolor sit <tt>amet consectetur</tt>
adipisicing elit. Voluptates, tempora.
</p>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...