Difference between Physical and Logical Tags
Last Updated :
03 Nov, 2022
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 convert 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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...