What are physical tags in HTML? - GeeksforGeeks

22 Mar, 2021
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>
<i>
<u>
<big>
<small>
<sub>
<sup>
<strike>
<tt>
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Basics
HTML-Questions
HTML-Tags
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?