The phrase tag is used to mark up a phrase or part of a sentence for better semantics. Browsers do not display phrase tags differently by default, but they allow screen readers and other assistive technologies to better interpret the meaning of the enclosed content.
Phrase tags are also useful for search engine optimization, as search engines can identify key phrases and terms more accurately when they are marked up specifically.
List of HTML Phrase Tags
Here is a list of common HTML phrase tags:
- <em> – Emphasized text, usually displayed in italics
- <strong> – Important text, usually displayed in bold
- <code> – Code or computer output
- <samp> – Sample computer output
- <kbd> – User input from a keyboard
- <var> – Variable name or placeholder text
- <dfn> – Defining instance of a term
- <cite> – Title of a creative work
- <abbr> – Abbreviation or acronym
- <time> – Date and/or time
- <mark> – Highlighted or marked text
- <bdo> – Bi-directional text override
- <bdi> – Isolates text directionality
- <wbr> – Optional word break
- <rb> – Ruby base text
- <rt> – Ruby annotation text
- <rtc> – Ruby annotation text container
- <rp> – Provides parentheses around ruby text for non-supporting browsers
The phrase tags help add semantic meaning to text, improve accessibility, enable better text processing, and can aid with search engine optimization when used appropriately.
Emphasized Text
The <em> tag in HTML is used to emphasize text. It displays the enclosed text in italics by default to visually indicate the emphasis.
Here’s an example:
<p>This is a <em>very important</em> point to consider.</p>
Marked Text
The <mark> tag in HTML is used to highlight or mark text for reference or notation purposes. When used properly, it can draw attention to text without implying added semantic importance.
Here’s an example:
<p>This is an important point. Please <mark>remember</mark> to review it before the meeting.</p>
Strong Text
The <strong> tag in HTML is used to indicate text that is of important relevance or urgency. It displays the enclosed text in bold styling by default to make it stand out.
Here’s an example:
<p>It is <strong>essential</strong> to backup your data regularly.</p>
Text Abbreviation
The <abbr> tag in HTML stands for “abbreviation” and is used to represent an abbreviation or acronym in a web page. It can provide useful benefits for accessibility and semantics.
Here’s an example:
<p><abbr title="World Health Organization">WHO</abbr> is working on global health initiatives.</p>
Acronym Element
The <acronym> element in HTML is used to represent an acronym or abbreviation for a term. It has been deprecated in HTML5 in favor of the more generic <abbr> tag, but may still be supported in some browsers.
Here’s an example:
<p><acronym title="Hypertext Markup Language">HTML</acronym> is used for creating web pages.</p>
Text Direction
The <bdo> tag in HTML stands for “bi-directional override” and is used to override the current text direction within an element. This allows you to display text in different directions, like right-to-left for languages such as Arabic or Hebrew.
Here’s an example:
<p>This is a sentence with <bdo dir="rtl">some text in Arabic</bdo> embedded.</p>
Special Terms
The <dfn> tag in HTML stands for “defining instance” and is used to indicate the defining instance of a term on a webpage. This highlights where a term is being defined on first use.
Here’s an example:
<p>The <dfn title="Hypertext Markup Language">HTML</dfn> standard is widely used in web development.</p>
Quoting Text
This element is used for longer quotations that should be set apart from the main text. It often renders with an indentation or some other formatting to distinguish it as a block of quoted text.
Here’s an example:
<blockquote>
<p>This is a longer quote that spans multiple lines. It is set apart from the main text using the <code><blockquote></code> element.</p>
</blockquote>
Short Quotations
The <q> element is used for shorter inline quotations. It typically wraps around a short piece of text within a paragraph.
Here’s an example:
<p>She said, <q>This is a short quote.</q></p>
Text Citations
The <cite> element is used to reference the source of a quote. It is commonly used within or after a <blockquote> or <q> element to provide information about the origin of the quoted text.
Here’s an example:
<p>According to <cite>Author Name</cite>, in the book <cite>Book Title</cite>:</p>
<blockquote>
<p>This is a quoted text from the source mentioned above.</p>
</blockquote>
Computer Code
The <code> tag in HTML is used to display a snippet of computer code or program output text. It displays the text in a monospace font and does not interpret it as markup.
Here’s an example:
<p>In the following example, we use the <code>print</code> statement to output the message to the console:</p>
<pre>
<code>
function showMessage() {
print("Hello, world!");
}
</code>
</pre>
Keyboard Text
The <kbd> tag in HTML represents user input from a keyboard, keypad, or other input device. It is used to denote textual user input in documentation and tutorials.
Here’s an example:
<p>To save a document, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
Variable
The <var> element in HTML represents a variable name or placeholder text in programming or mathematical expressions. It is used to denote variable, parameter, or other placeholder names in documentation.
Here’s an example:
<p>Let <var>x</var> be the radius of a circle. The formula for the area of the circle is given by:</p>
<code>Area = π<var>x</var><sup>2</sup></code>
Program Output
The <samp> element in HTML represents sample or example output from a computer program or system. It is used to display example code results and program output text.
Here’s an example:
<p>The output of the program is shown below:</p>
<samp>
<pre>
Line 1: Hello, world!
Line 2: This is a sample output.
</pre>
</samp>
We’ll take a closer look at how to properly use the phrase tag, when it can be helpful, and some key benefits it provides for accessibility, SEO, and semantic clarity. The phrase tag may seem simple, but it’s a valuable HTML element that can improve both human and machine understanding of critical text on your webpages.