View Categories

HTML – Phrase Tags

Table of Contents

In HTML, phrase tags are designed to structure content with specific meanings, typically rendering text in a style that conveys context or importance. Although they may appear similar to other basic tags like <b>, <i>, <pre>, and <tt>, phrase tags play a unique role in content presentation. Below is a comprehensive overview of the most significant HTML phrase tags.

HTML Phrase Tags List #

  1. Emphasized Text – <em>
  2. Marked Text – <mark>
  3. Strong Text – <strong>
  4. Abbreviation Text – <abbr>
  5. Acronym Text – <acronym> (Deprecated in HTML5)
  6. Bi-Directional Override – <bdo>
  7. Special Terms – <dfn>
  8. Short Quotation – <q>
  9. Long Quotation – <blockquote>
  10. Citation Text – <cite>
  11. Computer Code – <code>
  12. Keyboard Input – <kbd>
  13. Programming Variables – <var>
  14. Program Output – <samp>
  15. Address Text – <address>

Let’s explore these phrase tags in more detail, with examples.

1. Emphasized Text #

The <em> tag emphasizes content by rendering it in italics. This is used to highlight important text.

<!DOCTYPE html>
<html>
<body>
   <p>This is an <em>emphasized</em> word.</p>
</body>
</html>

Output:
This is an emphasized word.

2. Marked Text #

The <mark> tag highlights text, typically with a yellow background, to mark it as important.

<!DOCTYPE html>
<html>
<body>
   <p>This word is <mark>marked</mark> as important.</p>
</body>
</html>

Output:
This word is marked as important.

3. Strong Text #

The <strong> tag renders text in bold to signify strong importance.

<!DOCTYPE html>
<html>
<body>
   <p>This word is <strong>strong</strong>.</p>
</body>
</html>

Output:
This word is strong.

4. Abbreviation Text #

The <abbr> tag is used to mark abbreviations. The title attribute should contain the full description.

<!DOCTYPE html>
<html>
<body>
   <p>My friend's nickname is <abbr title="Abhishek">Abhy</abbr>.</p>
</body>
</html>

Output:
My friend’s nickname is Abhy.

5. Acronym Text (Deprecated in HTML5) #

Although <acronym> is deprecated in HTML5, it was used to indicate acronyms. You should now use the <abbr> tag.

<!DOCTYPE html>
<html>
<body>
   <p>HTML stands for <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
</body>
</html>

Output:
HTML stands for HTML.

6. Bi-Directional Override #

The <bdo> tag is used to override the current text direction, often for languages written right to left.

<!DOCTYPE html>
<html>
<body>
   <p>This text is left to right.</p>
   <p><bdo dir="rtl">This text goes right to left.</bdo></p>
</body>
</html>

Output:
This text goes right to left.

7. Special Terms #

The <dfn> tag defines special terms. Typically, browsers render this text in italics.

<!DOCTYPE html>
<html>
<body>
   <p>The word <dfn>HTML</dfn> is a special term.</p>
</body>
</html>

Output:
The word HTML is a special term.

8. Short Quotation #

The <q> tag adds inline quotes around a section of text.

<!DOCTYPE html>
<html>
<body>
   <p>Amit said, <q>I will be there soon.</q></p>
</body>
</html>

Output:
Amit said, “I will be there soon.”

9. Long Quotation #

The <blockquote> tag is used for longer quotations, typically indented.

<!DOCTYPE html>
<html>
<body>
   <blockquote>HTML is the standard markup language for creating web pages.</blockquote>
</body>
</html>

Output:
HTML is the standard markup language for creating web pages.

10. Citation Text #

The <cite> tag denotes the title of a work, usually rendered in italics.

<!DOCTYPE html>
<html>
<body>
   <p>This document is based on <cite>W3C Guidelines</cite>.</p>
</body>
</html>

Output:
This document is based on W3C Guidelines.

11. Computer Code #

The <code> tag represents computer code, usually rendered in a monospaced font.

<!DOCTYPE html>
<html>
<body>
   <p>The command is <code>document.write()</code>.</p>
</body>
</html>

Output:
The command is document.write().

12. Keyboard Input #

The <kbd> tag represents user input via keyboard.

<!DOCTYPE html>
<html>
<body>
   <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
</body>
</html>

Output:
Press Ctrl + C to copy.

13. Programming Variables #

The <var> tag represents variables in programming.

<!DOCTYPE html>
<html>
<body>
   <p>The variable is <var>x</var>.</p>
</body>
</html>

Output:
The variable is x.

14. Program Output #

The <samp> tag is used to represent program output.

<!DOCTYPE html>
<html>
<body>
   <p>Output: <samp>Hello World</samp></p>
</body>
</html>

Output:
Output: Hello World

15. Address Text #

The <address> tag is used to define contact information, typically rendered in italics or monospace font.

<!DOCTYPE html>
<html>
<body>
   <address>123 Main St, Anytown, USA</address>
</body>
</html>

Output:
123 Main St, Anytown, USA

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment