Skip to content
Related Articles

Related Articles

What are physical tags in HTML?
  • Difficulty Level : Easy
  • Last Updated : 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>

BoldBold increases the importance of the text because bold tag covert the text into bold size.

<i>

ItalicAn Italic tag is used to define a text with a special meaning. 

<u>

UnderlineIt 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-throughIt 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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :