- HTML Course
- HTML Tutorial
- HTML Document Structure
- HTML Root Tags
- HTML Flow Tags
- HTML Interactive Tags
- HTML Basic Tags
- HTML Paragraph
- HTML Line Break
- HTML Horizontal Line
- HTML Images
- HTML Data Types
- HTML Attributes
- HTML Character Entities
- HTML Styles
- HTML Formatting Text
- HTML Logical Style Text
- HTML Organizing Text
- HTML List
- HTML Tables
- HTML Forms
- HTML action Attribute
- HTML Multimedia
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:
|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|
|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:
|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:
|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.
<!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>
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 is H.
The chemical symbol of sodium is Na, not
H in HTML stands for "hyper," indicating that we can navigate anywhere on the internet by using hyperlinks.
In the above example, the HR tag is used to create a horizontal line.
« Previous Tutorial Next Tutorial »