Phrase tags in HTML

HTML Phrase tag

To specify the structural meaning of a block of text or semantics of text, special-purpose tags are used. These tags are called the HTML phrase tags We are going to discuss each of these phrase tags, one-by-one.

 

Text Abbreviation tag:

It is used to abbreviate the text written between the <abbr> and </abbr> tag.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello, I am <abbr title = "Hypertext Markup language">HTML</abbr>.</p>
</body>
</html>

Output:




Example


Hello, I am HTML.

Explanation: 

In the above example, the <abbr> tag is used to abbreviate the “HTML” word in the content.

Marked tag: 
It is used to mark the text written between <mark> and </mark> tag with yellow mark.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello, I am <mark>HTML</mark>.</p>
</body>
</html>

Output:




Example


Hello, I am HTML.

Explanation: 

In the above example, the <mark> tag is used to mark the “HTML” word in the content with yellow mark.

 

Strong text:

It is used to specify the important text written between the <strong> and </strong> tag, and display it in bold letters.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello, I am <strong>HTML</strong>.</p>
</body>
</html>

Output:




Example


Hello, I am HTML.

Explanation: 

In the above example, the <strong> tag is used to specify the “HTML” word as important in the content which is thus displayed in bold letters.

Emphasized text: 

It is used to emphasize the text written between the <em> and </em> tag and display it in italic form.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello, I am <em>HTML</em>.</p>
</body>
</html>

Output:




Example


Hello, I am HTML.

Explanation: 

In the above example, the <em> tag is used to emphasize the “HTML” word in the content, which is thus displayed in italic form.

Definition tag: 

It is used to specify the keyword of the content written between the <dfn> and </dfn> tags.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello, I am <dfn>HTML</dfn>.</p>
</body>
</html>

Output:




Example


Hello, I am HTML.

Explanation: 

In the above example, the <dfn> tag is used to define the “HTML” word as the keyword of the content which is thus displayed in italic form.

 

Quoting text: 

It is used to show that the content written between the <blockquote> and </blockquote> tag is quoted from another source. The cite attribute is used for the source URL, and text representation of source is written between the <cite> and </cite> tag.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<blockquote cite="#"><p>"Hello, I am HTML."</p></blockquote>
<cite>-Example</cite> 
</body>
</html>

Output:




Example


"Hello, I am HTML."

-Example

Explanation: 

In the above example, the <blockquote> tag is used to show that the text “Hello, I am HTML.” is quoted from another source whose text representation is written between the <cite> and </cite> tag.

Short Quotations: 

It is used to enclose the text in double-quotes written between the <q> and </q> tag and thus defines a short quotation.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Hello, I am <q>HTML</q>.</p>
</body>
</html>

Output:




Example


Hello, I am HTML.

Explanation: 

In the above example, the <q> tag is used to enclose the “HTML” word in double-quotes in the content.

Code tags: 

It is used to display a computer code in a monospaced font written between the <code> and </code> tag.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p><code>printf("Hello, I am HTML.")</code></p>
</body>
</html>

Output:




Example


printf("Hello, I am HTML.")

Explanation: 

In the above example, the <code> tag is used to display a computer code which is thus displaced in a monospaced font.

Keyboard Tag:

It is used to indicate that the content written between the <kbd> and </kbd> tag is a user input from the keyboard.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<p>Press <kbd>Ctrl </kbd>+<kbd> a</kbd> to select all the contents of a page.</p>
</body>
</html>

Output:




Example


Press Ctrl + a to select all the contents of a page.

Explanation: 

In the above example, the <kbd> tag is used to indicate that the “Ctrl” and “a” are a user input from the keyboard.

Address tag: 

It is used to define the contact information written between the <address> and </address> tag and displays it in italic font.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h3>Contact Us</h3>
<address> Contact us on: 0123456789<br> 
Or Mail us at: <a href="#"> 1234@exampledomain.com</a></address>  
</body>
</html>

Output:




Example


Contact Us

Contact us on: 0123456789
Or Mail us at: [email protected]

Explanation: 

In the above example, the <address> tag is used to specify the contact information which is thus displayed in italic font.

Please Share