codescracker


html

HTML Text Formatting with Logical Style Tags



« Previous Tutorial Next Tutorial »


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 change the appearance of the text depending upon 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 list 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 Emphasized text by increasing boldness
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 list 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 unique id for a tag
lang Indicates a language code for the content in a tag
style Indicates an inline style for the tag
title Indicates the title for a tag

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 and 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, such as 05 for May
DD Indicates the date, such as 01 to 31
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

Now, let's discuss about some important tags.

HTML MARK tag

The HTML MARK tag is used to mark or highlight the text in an HTML document.

Note - By default, the MARK tag displays the text with yellow background color

HTML MARK Tag Attributes

The table given below list and describes attributes that can be used with the MARK tag to format the text in an HTML document:

Attribute Description
class Indicates a class name for the MARK tag
id Indicates a unique id for the MARK tag
style Indicates an inline style for the MARK tag
title Indicates a title for the MARK tag

Example

Here is an example of HTML MARK tag:

<html>
<head>
	<title>HTML Text Formatting with Logical Style Tags Example</title>
</head>
<body>

<p>This is <mark>marked or highlighted</mark> text.</p>

</body>
</html>

Here is the sample output produced by the above HTML MARK tag example code:

html text formatting with logical style tags

HTML STRONG tag

The HTML STRONG tag is used to emphasize the important text with bold. this tag increases the font weight of the text and makes the text appears as bold. So that to help us to recognize the important text in the HTML document

HTML STRONG Tag Attributes

The following table shows the attributes that can be used with the STRONG tag:

Attribute Description
class Indicates a class name for the STRONG tag
id Indicates a unique id for the STRONG tag
style Indicates an inline style for the STRONG tag
title Indicates the title for the STRONG tag

Example

Here is an example of HTML STRONG tag:

<html>
<head>
	<title>HTML Text Formatting with Logical Style Tags Example</title>
</head>
<body>

<p>This is <strong>bolded (important)</strong> text.</p>

</body>
</html>

Here is the sample output produced by the above HTML STRONG tag example code:

html strong tag

HTML CODE tag

The HTML CODE tag is used to represent the computer code in an HTML document. So if you want to display some article on the Web page, which contains some text and code of a program, then you can write the program code within the CODE tag so that the reader of the article can differentiate between the normal text and the code.

HTML CODE Tag Attributes

The following table shows the attributes of the CODE tag:

Attribute Description
class Indicates a class name for the CODE tag
id Indicates the unique id for the CODE tag
style Indicates an inline style to the CODE tag
title Indicates the title for the CODE tag

Example

Here is an example of HTML CODE tag:

<html>
<head>
	<title>HTML Text Formatting with Logical Style Tags Example</title>
</head>
<body>

<p>This is <code>code</code> text.</p>

</body>
</html>

Following is the output of the above HTML CODE tag example code:

html code tag to format text

HTML SMALL tag

The HTML SMALL tag is used to display the text as a side comment or in small print. The small prints include the disclaimers, legal restrictions, and copyrights.

HTML SMALL Tag Attributes

The following table shows the attributes of the SMALL tags:

Attribute Description
class Indicates the class name for the SMALL tag
id Indicates an unique id for the SMALL tag
style Indicates an inline style for the SMALL tag
title Indicates the title for the SMALL tag

Example

Here is an example of HTML SMALL tag used to format text in an HTML document:

<html>
<head>
	<title>HTML Text Formatting with Logical Style Tags Example</title>
</head>
<body>

<p>This is <small>small</small> text.</p>

</body>
</html>

Here is the sample output of the above HTML SMALL tag example code:

html text format small tag

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test