Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Difference between Physical and Logical Tags

  • Last Updated : 22 Sep, 2021

In this article, we will learn about physical tags & logical tags in HTML & their implementation. We will also explore the difference between them. Let’s begin the discussion with a physical tag.

Physical tags: 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. Physical tags can only be used for styling purposes for specific elements. 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.  Please refer to the What are physical tags in HTML? article for further details.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax : 

<tagname>Content</tagname>

Features:



  • 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.

 

Here are some useful Physical tag lists:

  • <sup>  Superscript is usually used for showing elements above base-line 
  • <sub> The subscript is used for alternate baseline.
  • <i> An Italic tag is used to define a text with a special meaning. 
  • <big> Big tag increase the font size by 1 (Note: You can not use the big tag in HTML 5)
  • <small> A small tag defines the small text, and it is used while writing copyright.
  • <b> Bold increases the importance of the text because bold tag covert the text into bold size.
  • <u> It is used to underline the text.
  • <tt> Teletype text gives the default font-family which is monospace.
  • <strike> It is an editing markup that tells the reader to ignore the text passage.

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Physical Tags</title>
    <style>
        .container {
            font-family: sans-serif;
            white-space: pre-line;
        }
  
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        Welcome to the official channel of GeeksforGeeks!
        <b>
            Learn Data Structures Online At Your 
            Own Pace With The Best Of Faculty
            In The Industry.
        </b>
  
        <big>
            A Computer Science portal for geeks. 
            It contains well written, well thought 
            and well explained computer science 
            and programming articles.
        </big>
  
        <i>
            The Best Data Structures Course 
            Available Online From Skilled And
            Experienced Faculty.
        </i>
  
        <small>
            Python is a widely used, high-level 
            programming language.
        </small>
  
        5<sup>2</sup> SO<sub>2</sub>
  
        <tt>
            We provide a variety of services for 
            you to learn, thrive and also have
            fun!
        </tt>
  
        <u>
            Free Tutorials, Millions of Articles, 
            Live, Online and Classroom Courses, 
            Frequent Coding Competitions, Webinars
            by Industry Experts, Internship 
            opportunities and Job Opportunities. 
            Knowledge is power!
        </u>
    </div>
</body>
  
</html>

Output:

Logical Tags: Logical tags are used to tell the browser what kind of text is written inside the tags. Logical tags are also known as Structural tags because they specify the structure of the document. Logical tags are used to indicate to the visually impaired person that there is something more important in the text or to emphasize the text ie, logical tags can be used for styling purposes as well as to give special importance to text content. Please refer to the What are logical tags in HTML? article for further details.

Syntax : 



<tagname>Content</tagname>        

Some cases where logical tags are useful:

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

Here are some useful Logical tags list:

  • <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.

    Example:

    HTML




    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Logical Tag</title>
      
        <style>
            .container {
                font-family: sans-serif;
                white-space: pre-line;
            }
      
            h1 {
                color: green;
            }
        </style>
    </head>
      
    <body>
        <div class="container">
            <h1>GeeksForGeeks</h1>
      
            Welcome to <abbr title="tags"> Logical tags</abbr>
      
            This is <acronym title="GeeksforGeeks">GFG</acronym>
      
            <address>
                5th Floor, A-118, Sector-136, Noida, 
                Uttar Pradesh - 201305
            </address>
      
            <cite> C++ </cite> is my favourite Language.
      
            <code> Sample code: system.out.println(); </code>
      
            <blockquote cite="https://www.geeksforgeeks.org/">
                A Computer Science portal for geeks. 
                It contains well written, well thought 
                and well explained computer science and 
                programming articles, and quizzes.
            </blockquote>
      
            <del> This contains deleted content.</del>
      
            <ins> Newly inserted content.</ins>
      
            <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>This is a Keyboard input </kbd>
      
            <pre>
                Hello GFG,
                Greetings to all Community members !!
                Here I'm presenting my first blog of GFG Blogathon-2021.
                This is a predefine formatted text 
            </pre>
        </div>
    </body>
      
    </html>

    Output:

    Differences between Logical & Physical Tags:

    S.No.

    Logical tags                       

    Physical tags      

    1.

    Logical tags describe the behaviour, nature of content for the text enclosed inside the tag. They represent the function of text on the page.



    Physical tags are used to decide the appearance of the text and do not provide any information about the text.

    2.

    It carries certain obligations.

    It is extremely straightforward.

    3.

    It is used to mention visually impaired texts.

    It is used to indicate the specific characters which need formation.

    4.

    Here, the pages are more accessible.

    Page accessibility is comparatively low.

    5.

    It supports the latest technology.

    This concept is dependent upon weak tools.

    6.

    Logical tags are used to provide information by giving the special importance to the text. For instance, <em> tag is used to emphasize the text by representing it in italic format.

    Physical tags are used to style the content only. For instance, <i> is used to display the text in italic format.




    My Personal Notes arrow_drop_up
Recommended Articles
Page :