Difference between Physical and Logical Tags

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.

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:

 Superscript is usually used for showing elements above base-line
 The subscript is used for alternate baseline.
 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)
 A small tag defines the small text, and it is used while writing copyright.
 Bold increases the importance of the text because bold tag convert the text into bold size.
 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.