06

HTML – Phrase Tags

Chapter 6 • Beginner

25 min

Phrase tags are used to give more specific meaning to small pieces of text. Many of them are semantic, which means they describe the role of the text, not only how it looks.

These tags help:

  • Search engines understand your content better
  • Screen readers give better information to users
  • Your code become more readable for other developers

Common phrase tags

  1. <em> – Emphasis
  • Used to emphasize a word or phrase.
  • Usually shown in italics.
  1. <strong> – Strong importance
  • Shows strong importance.
  • Usually shown in bold.
  1. <mark> – Highlighted text
  • Highlights text as if using a marker.
  • Good for marking important or searched words.
  1. <abbr> – Abbreviation
  • Used for short forms like "HTML".
  • You can provide full form in the title attribute.
  • Example: <abbr title="HyperText Markup Language">HTML</abbr>
  1. <cite> – Citation
  • Used for the title of a work (book, article, movie, etc.).
  1. <code> – Code
  • Used for short code snippets.
  • Usually displayed in a monospace font.
  1. <kbd> – Keyboard input
  • Used to show keys the user should press.
  • Example: Press <kbd>Ctrl</kbd> + <kbd>C</kbd>.
  1. <var> – Variable
  • Represents a variable in programming or math.
  1. <samp> – Sample output
  • Represents program output or system messages.
  1. <blockquote> – Long quotation
  • Used for longer quoted text that usually appears as a separate block.
  • Often indented by browsers.
  1. <q> – Short quotation
  • Used for small quotes inside a sentence.
  • Browsers often add quotation marks automatically.
  1. <bdo> – Bi-directional override
  • Used to change the direction of text (for right-to-left languages).
  1. <address> – Contact information
  • Used for contact details of the author or owner of a document.

Note: <acronym> is obsolete in HTML5. Use <abbr> instead.

Suggested image prompt

"Example article screenshot with highlighted pieces labeled as <em>, <strong>, <abbr>, <code>, <blockquote>, and <address>, showing where each phrase tag might be used."

Interview-style questions from this topic

  1. What is the purpose of the <abbr> tag? Give an example.
  2. How is <blockquote> different from <q>?
  3. When would you use <code>, <kbd>, <var>, and <samp>?
  4. What does <address> usually contain?
  5. Why is <acronym> considered obsolete, and what should you use instead?

Hands-on Examples

Phrase Tags Example

<!DOCTYPE html>
<html>
<head>
  <title>Phrase Tags Example</title>
</head>
<body>
  <p>The following word uses an <em>emphasized</em> typeface.</p>
  <p>The following word has been <mark>marked</mark> with yellow.</p>
  <p>The following word uses a <strong>strong</strong> typeface.</p>
  <p>My best friend's name is <abbr title="Abhishek">Abhy</abbr>.</p>
  <p>This text will go left to right.</p>
  <p><bdo dir="rtl">This text will go right to left.</bdo></p>
  <p>The following word is a <dfn>special</dfn> term.</p>
  <blockquote>
    XHTML 1.0 is the W3C's first Recommendation for XHTML.
  </blockquote>
  <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
  <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
  <p>Regular text. <code>console.log('Hello');</code> Regular text.</p>
  <p>Regular text. <kbd>Ctrl</kbd> + <kbd>C</kbd> copies text.</p>
  <p><code>document.write("<var>userName</var>")</code></p>
  <p>Result produced by the program is <samp>Hello World!</samp></p>
  <address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>

This example demonstrates many phrase tags in real sentences. Each tag adds a specific meaning: <em> for emphasis, <mark> for highlighting, <abbr> for abbreviations with full forms, <blockquote> and <q> for quotations, <code>/<kbd>/<var>/<samp> for code-related text, and <address> for contact information.

Previous
HTML – Formatting
Next
HTML – Meta Tags

Related Tutorials