HTML Text Formatting with Logical Style Tags

In HTML, the logical style tags specify that the enclosed text has a specific meaning, context, or usage. For example, the ABBR tag conveys to the Web browser that the text enclosed inside this tag is an abbreviation. The browser changes the appearance of the text depending on the meaning of the tags.

The advantage of using the logical style tags rather than the physical style tags is that the meaning related to the tag is more precisely conveyed to the users.

HTML Logical Style Tags List

The table given below lists and describes all logical style tags used to format the text in an HTML document:

Tag	Description
ABBR	displays the abbreviation on the web page
CODE	refers to the program code
SAMP	displays the sample program output on the web page
KBD	refers to the keyboard keys
EM	Emphasized text
STRONG	defines text with strong importance
DFN	displays new terms on the web page
Q	displays the short quotations on the web page
BLOCKQUOTE	displays the long quotations on the web page
INS	displays the inserted text
DEL	displays the deleted text
VAR	represent a variable
BDO	changes the direction of text

HTML Logical Style Tags Attributes

The following table lists and describes all attributes used with the logical style tags to format the text in an HTML document:

Attribute	Description
class	indicates a class name for a tag
dir	indicates the directionality of text, such as left-to-right or right-to-left
id	indicates a tag's unique ID
lang	indicates a language code for the content in a tag
style	indicates an inline style for the tag
title	indicates the tag's title

In addition to the above attributes, there are some other attributes, such as cite and datetime, which can only be used with the INS and DEL tags. The INS and DEL tags are used to display the insertion of content by underlining it and the deletion of content by striking through it in an HTML document. The cite attribute is used to indicate the reason for insertion and deletion. The value of the cite attribute is a Universal Resource Locator (URL), which points to some other document that describes the inserted or deleted text.

The datetime attributed is used to indicate the time of insertion or deletion. This attribute takes a single value, which is an encoded date and time stamp. The format of the datetime attribute value must be YYYY-MM-DDThh:mm:ssTZD.

Components of the datetime value attribute

The following table shows the components of the datetime value attribute:

Components	Description
YYYY	indicates the year, such as 1996 or 2010
MM	indicates the month, for example, 05 for May
DD	The date, such as 01 to 31, is indicated
T	specifies that the next section displays the time
hh	indicates the hour in a 24-hour format
mm	indicates the minutes in an hour
ss	indicates the seconds, 00 to 59
TZD	indicates the Time-Zone Designator (TZD)

HTML Logical Tags Example

It is now time to format the text as an example using all of the logical tags that were discussed previously. You will have complete command over the tags provided in this article once you have a thorough understanding of the example that is provided below.

HTML Code

<!DOCTYPE html>
<html>
   <body>
      
      <abbr title="Hypertext Markup Language">HTML</abbr>
      <hr>
      <code>print("hello world in python")</code>
      <hr>
      <samp>System.out.println("hello world in java")</samp>
      <hr>
      <p>Press the <kbd>ENTER</kbd> key.</p>
      <hr>
      <p>Do you like <em>fresherearth.com</em>?</p>
      <hr>
      <p>In a leap year, how many days are there in <strong>February</strong>?</p>
      <hr>
      <p><dfn>Python</dfn> is a well-known language for automating tasks.</p>
      <hr>
      <p>Python is also a well-known language for <q>conducting data analysis</q>.</p>
      <hr>
      <blockquote>
         SQL is a powerful database language.
         You can use SQL to create, insert, modify, or delete data from the database.
      </blockquote>
      <hr>
      <p>The chemical symbol for <ins>hydrogen</ins> is H.</p>
      <hr>
      <p>The chemical symbol of sodium is Na, not <del>So</del>.</p>
      <hr>
      <p><var>H</var> in HTML stands for "hyper," indicating that we can 
         navigate anywhere on the internet by using hyperlinks.
      </p>
      <hr>
      <bdo dir="rtl">fresherearth.com</bdo>

   </body>
</html>

Output

HTML

print("hello world in python")

System.out.println("hello world in java")

Press the ENTER key.

Do you like fresherearth.com?

In a leap year, how many days are there in February?

Python is a well-known language for automating tasks.

Python is also a well-known language for conducting data analysis.

SQL is a powerful database language. You can use SQL to create, insert, modify, or delete data from the database.

The chemical symbol for hydrogen is H.

The chemical symbol of sodium is Na, not So.

H in HTML stands for "hyper," indicating that we can navigate anywhere on the internet by using hyperlinks.

fresherearth.com

In the above example, the HR tag is used to create a horizontal line.

HTML Online Test

« Previous Tutorial Next Tutorial »