Skip to content
Related Articles

Related Articles

What are logical tags in HTML ?
  • Difficulty Level : Easy
  • Last Updated : 15 Mar, 2021

Logical tags are used to tell the browser what kind of text is written inside the tags. They are different from physical tags because physical tags are used to decide the appearance of the text and do not provide any information about the text.

Logical tags are used to indicate to the visually impaired person that there is something more important in text or to emphasize the text.

Some cases when we could use logical tags are:

  • When we want to write code on our website.
  • When we want to Emphasize some text.
  • When we want to display the abbreviation on the Web page.
  • When we want to display some famous quotation on our web page.
  • When we want to write some mathematical formula in terms of variables.

There are many kinds of logical text here is the list of some of them :

TagDescription
<abbr>Defines the abbreviation of text.
<acronym>Defines the acronym.
<address>contact information of a person or an organization.
<cite>Defines citation. It displays the text in italic format.
<code>Defines the piece of computer code.
<blockquote>Defines a long quotation.
<del>Defines the deleted text and is used to mark a portion of text which has been deleted from the document.
<dfn>Defines the definition element and is used to representing a defining instance in HTML.
<ins>Defines inserted text.
<kbd>Defines keyboard input text.
<pre>Defines the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers.
<q>Defines the short quotation.
<samp>Defines the sample output text from a computer program.
<strong>Defines strong text i.e. show the importance of the text.
<var>Defines the variable in a mathematical equation or in the computer program.

Now let’s implement some above-listed tags through examples



1. <bdo> Tag: The <bdo> tag stands for Bi-Directional Override. This tag is used to change the direction of the text. It takes a “dir” attribute which decides the direction of the text.

Syntax:

<bdo> Statements... </bdo>

HTML




<!DOCTYPE html>
<html>
  
<body>
    <p>This text will go right-to-left</p>
  
    <bdo dir="rtl">GeeksforGeeks</bdo>
  
    <p>This text will go left-to-right</p>
  
    <bdo dir="ltr">GeeksforGeeks</bdo>
</body>
  
</html>

Output:

This text will go right-to-left
skeeGfofskeeG
This text will go left-to-right
GeeksforGeeks

2. <del> Tag: The <del> tag draws a line cutting the text which shows the text is wrong or deleted.

Syntax:

<del>Statements... </del>

HTML




<!DOCTYPE html>
<html>
  
<body>
    <p>Welcome to year <del>2020</del> 2021</p>
</body>
  
</html>

Output:

3. <ins> Tag:  The <ins> tag is used to show that some text is inserted into the document. Browsers will usually show inserted tags underlined.



Syntax: 

<ins>Statements... </ins>

HTML




<!DOCTYPE html>
<html>
  
<body>
    <p>price of this shoe is 
        <del>1000</del><ins>850</ins>
    </p>
</body>
  
</html>

Output:

4. <strong> Tag: The <strong> tag is used to tell the browser that the text inside this tag is of great importance and significance. Browser displays this text in bold.

Syntax:

 <strong>Statements...  </strong>

HTML




<!DOCTYPE html>
<html>
  
<body>
    <p>This is
        <strong>bolded (important)</strong> text.
    </p>
</body>
  
</html>

Output:

5. <code> Tag:  Code tag is used to tell the user that the text written inside this tag is a code of some programming language. The content inside this tag is displayed in monospace font.

Syntax: 

<code>Statements... </code>

HTML




<!DOCTYPE html>
<html>
  
<body>
    <p>This is <code>your code</code></p>
</body>
  
</html>

Output:

6. <kbd> Tag: The <kbd> tag is used to denote that the text shown is input from the keyboard. The content inside is displayed in a monospace font.

Syntax: 

<KBD>Statements... </KBD>

HTML




<!DOCTYPE html>
<html>
  
<body>
    <p>
        Press <kbd>Ctrl</kbd> + 
        <kbd>C</kbd> To copy text
    </p>
</body>
  
</html>

Output:

  • 7. <pre> TagText in a pre tag is displayed in fixed width-font, and preserves all the spaces and break lines i.e. the text is shown exactly as it was written in HTML source code.

    Syntax: 

    <pre>Statements...  </pre>

    HTML




    <!DOCTYPE html>
    <html>
      
    <body>
        <pre> Welcome     to geeks   for
              geeks
           this   is
           pre     tag
      </pre>
    </body>
      
    </html>

    Output:

    Sample Code using Logical Tags: This example contains all logical tags.

    HTML




    <!DOCTYPE html>
    <html>
      
    <body>
        <h1>Logical Tags</h1>
      
        <!-- abbr tag -->
        Welcome to <abbr title="GeeksforGeeks">
            GFG
        </abbr>
        <br />
      
        <!-- acronym tag -->
        This is <acronym title="GeeksforGeeks">
            GFG
        </acronym>
        <br />
      
        <!-- address tag -->
        <address>
            GeeksforGeeks, 5th & 6th Floor,
            Royal Kapsons, A- 118, Sector- 136, 
            Noida, Uttar Pradesh (201305)
        </address>
        <br />
      
        <!-- cite tag -->
        <cite> GeeksforGeeks </cite> is 
            my favourite website.
        <br />
      
        <!-- code tag -->
        <code
            Sample code: system.out.println();
        </code>
      
        <!-- blockquote tag -->
        <blockquote cite=
            A Computer Science portal for geeks. 
            It contains well written, well 
            thought and well explained computer 
            science and programming articles, 
            and quizzes.
        </blockquote>
      
        <!-- del tag -->
        <del> This contains deleted content.</del>
      
        <!-- ins tag -->
        <ins> Newly inserted content.</ins>
      
        <!-- dfn tag -->
        <p>
            <dfn> GeeksforGeeks </dfn> is a 
            Computer Science portal for geeks. 
            It contains well written, well 
            thought and well explained computer 
            science and programming articles, 
            and quizzes.
        </p>
      
        <!-- kbd tag -->
        <kbd
            GeeksforGeeks - This is 
            a Keyboard input 
        </kbd>
      
        <!-- pre tag -->
        <pre>
        Dear User,
       
        Congratulations !!
       
        We are delighted to inform you that 
        you are going to be part of GfG journey.
       
        Thanks,
        GfG Team
       
    This is a predefine formatted text
        </pre>
    </body>
      
    </html>

    Output:

    My Personal Notes arrow_drop_up
Recommended Articles
Page :