HTML - Phrase Tags

HTML - Phrase Tags

In HTML, phrase tags are used to markup text content that appears within a paragraph or other block-level element. They are used to add meaning and structure to the text, rather than to control its appearance. Following is the list of phrase tags, some of which we have already discussed in HTML formatting.

  1. Abbreviation tag : <abbr>
  2. Acronym tag: <acronym> (not supported in HTML5)
  3. Marked tag: <mark>
  4. Emphasized tag : <em>
  5. Strong tag: <strong>
  6. Definition tag: <dfn>
  7. Quoting tag: <blockquote>
  8. Code tag: <code>
  9. Short quote tag : <q>
  10. Keyboard tag: <kbd>
  11. Address tag: <address>

1. Abbreviation tag

In HTML, the <abbr> tag is used to markup abbreviations or acronyms in text. The tag stands for “abbreviation”.

The <abbr> tag has two required attributes:

  1. title: This attribute is used to provide the full meaning of the abbreviation or acronym. When the user hovers over the abbreviation, the full meaning will be displayed in a tooltip.
  2. abbr: This attribute is used to provide the abbreviation or acronym itself.

Here’s an example of how to use the <abbr> tag:

<p>The <abbr title="World Health Organization">WHO</abbr> is a specialized agency of the United Nations.</p>

Output:

The WHO is a specialized agency of the United Nations.

In this example, the <abbr> tag is used to markup the abbreviation “WHO”. The title attribute provides the full meaning of the abbreviation, “World Health Organization”. When the user hovers over the abbreviation, the full meaning will be displayed in a tooltip.

2. Marked tag

In HTML, the <mark> tag is used to markup text that should be highlighted. The tag indicates that the enclosed text should be highlighted visually, typically by using a yellow background color. Example

<h2>Example of mark Tag</h2>
<p>My favorite color is <mark>blue</mark>.</p>

Output: mark-tag

In this example, the word “blue” is enclosed in the <mark> tag, indicating that it should be highlighted visually. By default, the highlighted text will be displayed with a yellow background color.

3. Strong tag

In HTML, the <strong> tag is used to markup text that should be given strong importance. Typically, text within <strong> tags is displayed in bold. Example

<p><strong>Warning:</strong> Do not operate this machinery without proper training.</p>

Live preview:

Warning: Do not operate this machinery without proper training.

4. Emphasized tag

In HTML, the <em> tag is used to markup text that should be emphasized. Typically, text within <em> tags is displayed in italics. Example

<p>She <em>really</em> wants to go to the concert.</p>

Live preview:

She really wants to go to the concert.

5. Definition tag

In HTML, the <dfn> tag is used to markup a term that is being defined within a document. The tag stands for “definition”. Example

<p><dfn>Astronomy</dfn> is the study of celestial objects such as stars, planets, and galaxies.</p>

Live preview:

Astronomy is the study of celestial objects such as stars, planets, and galaxies.

6. Quoting tag

In HTML, there are two tags that can be used to markup quotes: the <blockquote> tag and the <q> tag.

The <blockquote> tag is used to markup a longer quote that is presented as a separate block of text. Here’s an example of how to use the <blockquote> tag:

<blockquote>
  <p>Education is the most powerful weapon which you can use to change the world.</p>
  <cite>Nelson Mandela</cite>
</blockquote>

Live preview:

Education is the most powerful weapon which you can use to change the world.

Nelson Mandela

7. Code tag

In HTML, the <code> tag is used to markup a section of code within a document. By default, the text within the <code> tag is displayed in a monospace font and any HTML entities or tags within the code are displayed as text. Example

<p>The following code will calculate the area of a circle:</p>
<code>
function calculateArea(radius) {
  const area = Math.PI * radius * radius;
  return area;
}
</code>

Live preview:

The following code will calculate the area of a circle:

function calculateArea(radius) { const area = Math.PI * radius * radius; return area; }

8. Short quote tag

In HTML, the <q> tag is used to markup a short inline quotation. The <q> tag should be used when you want to indicate a short, inline quotation within a paragraph. Example

<p>According to the ancient proverb, <q>Actions speak louder than words.</q></p>

Live preview:

According to the ancient proverb, Actions speak louder than words.

9. Keyboard tag

In HTML, the <kbd> tag is used to markup text that represents user input, typically from a keyboard or other input device. By default, the text within the <kbd> tag is displayed in a monospace font and surrounded by a box or other styling that suggests it represents a physical key on a keyboard. Example

<p>To save a file in most applications, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>

Live preview:

To save a file in most applications, press Ctrl + S.

10. Address tag

In HTML, the <address> tag is used to markup contact information or other information about the author or owner of a document. By default, the text within the <address> tag is displayed in italic font. Example

<address>
  <p>Akash</p>
  <p>12/A</p>
  <p>Mohakhali, Bang 35</p>
  <p>Email: maniruzzamanakash@gmil.com</p>
  <p>Phone: 01951........</p>
</address>

Live preview: address-tag

The <address> tag can be used to markup any contact information or other information about the author or owner of a document. It can be used on its own or within other elements, such as the <footer> tag.

Previous
HTML Formatting
Next
HTML Anchor tag