HTML Phrase Elements

This chapter will go through the all the important HTML phrase elements

Tags	Description
<em>	Emphasized Text
<mark>	Marked Text
<strong>	Important Text
<abbr>	Text Abbreviation
<bdo>	Text Direction
<dfn>	Definition Terms
<blockquote>	Quoting Text
<q>	Short Quotations
<cite>	Text Citations
<code>	Computer Code
<kbd>	Keyboard Text
<var>	Programming Variables
<samp>	Program Output
<address>	Address Text

Emphasized Text

The HTML  element use to make text emphases.

Example

<p>Normal text <em>emphasized text</em></p>

Try this code ❯

Marked Text

The HTML  element use to make text marked.

Example

<p>This is <mark>marked text</mark> was it yellow?</p>

Try this code ❯

Note: The mark element denotes the relevance of a span of text. By default, most browsers render it in black text on a yellow background, but you can change that with CSS.

To indicate importance, use ; for emphasis, use .

Tip: Don't use  for syntax highlighting purposes; instead, use the  element with appropriate CSS applied to it.

Important Text

The HTML  element use to make text important.

Example

<p>This is <strong>important</strong> text</p>

Try this code ❯

Notes:

This element generally renders as bold text.
By default, most browsers render the strong element with bold text, but you can change that in CSS.
If you are looking to emphasize a word or phrase, the element would be a better choice.

If you want to bold text, but the text is not important, you should use the CSS rule font-weight: bold; on the appropriate element enclosing the text.

Text Abbreviation

The HTML <abbr> element use to for abbreviation.

Example

The first version of <abbr title="Hypertext Markup Language">HTML</abbr> was written by Tim Berners-Lee in 1993.

Try this code ❯

Notes:

The title attribute should be set to the expansion of the abbreviation.

When the title attribute is set on this element, browsers may render a dotted underline.

Text Direction

The HTML <bdo> element use to make text bidirectional override.

Example

This text will go from left to right. <bdo dir="rtl">This text will go from right to left.</bdo>

Try this code ❯

Definition Text

The HTML <dfn> element use to make text contains the defining instance of a term.

Example

<dfn>HTML</dfn> is Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.

Try this code ❯

Note: It usually is rendered as italic text.

Quoting Text

The HTML <blockquote> element use to make text is an extended quotation.

Example

<blockquote cite="https://en.wikipedia.org/wiki/Climate_change">Climate change includes both global warming driven by human-induced emissions of greenhouse gases and the resulting large-scale shifts in weather patterns.</blockquote>

Try this code ❯

Short Quotations

The HTML <q> element use to make text short quotation.

Example

The World Health Organization (WHO) is a <q>specialized agency of the United Nations responsible for international public health.</q>

Try this code ❯

This element is intended for short quotations that don’t require paragraphs or larger structures, as compared to text that would be contained within <blockquote>.

Note: Most browsers will wrap inline quotations in quote marks. These can be controlled by style rules.

Advertisement

Text Citations

The HTML <cite> element use to make text as citations.

Example

This example is taken from <cite> Wikipedia</cite>.

Try this code ❯

Computer Code

The HTML <code> element use to make text is source code in a programming language.

Example

<code>center</code> tag is deprecated by HTML5 version.

Try this code ❯

Note: This element is best used for short code fragments because it does not preserve white space.

Keyboard Text

The HTML <kbd> element use to display keyboard text.

Example

To copy the selected item press <kbd>Ctrl</kbd> + <kbd>C</kbd>.

Try this code ❯

Programming Variables

The HTML <var> element use to display programming variables text.

Example

A simple equation: <var>z</var> = <var>x</var> + <var>y</var>

Try this code ❯

Program Output

The HTML <samp> element use to display sample text.

Example

This is <samp>sample</samp> text

Try this code ❯

Note: The samp element is a phrasing-level element. It must not contain block-level elements, but it can contain other phrasing-level elements.

Address Text

The HTML <samp> element use to display address.

Example

<address> You can contact at <a href="http://www.example.com/contact"> www.example.com</a>. If you see any bugs, please <a href="mailto:contact@example.com"> contact us</a>. 123 floor New York USA </address>

Try this code ❯

Note: Use this element for providing authorship or ownership of information.

A complete list of all attributes for each HTML element: See HTML Attribute Reference.