Difference between Physical and Logical Tags - GeeksforGeeks

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.
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:HTMLHTML<!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.Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.My Personal Notes
arrow_drop_upSave
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:
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.
It carries certain obligations.
It is extremely straightforward.
It is used to mention visually impaired texts.
It is used to indicate the specific characters which need formation.
Here, the pages are more accessible.
Page accessibility is comparatively low.
It supports the latest technology.
This concept is dependent upon weak tools.
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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Blogathon-2021
HTML-Questions
HTML-Tags
Picked
Blogathon
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
How to Install Tkinter in Windows?
SQL Query to Convert Datetime to Date
How to pass data into table from a form using React Components
SQL Query to Create Table With a Primary Key
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?