CODESCRACKER

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>codescracker.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">codescracker.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 codescracker.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.

codescracker.com

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

HTML Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!