The HTML phrase tags are special purpose tags that define the structural meaning of a block of text or the semantics of text. Following is the list of phrase tags, some of which we have already discussed in HTML formatting.
- Abbreviation tag: <abbr>
- Marked tag: <mark>
- Strong tag: <strong>
- Emphasized tag: <em>
- Definition tag: <dfn>
- Quoting tag: <blockquote>
- Short quote tag: <q>
- Code tag: <code>
- Keyboard tag: <kbd>
- Address tag: <address>
1. Text Abbreviation Tag
This tag is employed to shorten text. To abbreviate text, enclose the text between the <abbr> and </abbr> tags.
Example
&<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Abbreviation Example</title>
</head>
<body>
<p>
An <abbr title="Hypertext Markup Language">HTML</abbr> language is used to create web pages.
</p>
</body>
</html>
Output:
2. Marked Tag
The text enclosed within <mark> and </mark> elements will be displayed as a highlighted yellow area in the web browser. This specific tag is employed to emphasize specific textual content.
Example
<p>This tag will <mark>highlight</mark> the text.</p>
Output:
This tag willhighlightthe text.
3. Strong Tag
This specific tag is employed to showcase crucial information within the content. Any content enclosed by <strong> and </strong> will be emphasized as significant text.
Example
<p>In HTML it is recommended to use <strong>lower-case</strong>, while writing a code. </p>
Output:
In HTML it is recommended to uselowercase, while writing a code.
4. Emphasized Tag
This specific tag serves to highlight the text and present it in an italicized format. Any content enclosed within the <em> and </em> tags will be rendered in italics.
Example
<p>HTML is an <em>easy </em>to learn language.</p>
Output:
HTML is aneasyto learn language.
5. Definition Tag
When utilizing the <dfn> and </dfn> tags, you can specify the keyword associated with the content. The following example illustrates how to define an element.
Example
<p><dfn>HTML </dfn> is a markup language. </p>
Output:
HTMLis a markup language.
<!--Displayed in italics by default-->
6. Quoting Tag
The HTML <blockquote> element shows that the enclosed content is quoted from another source. The Source URL can be given using the cite attribute, and text representation of the source can be displayed using <cite> ..... </cite>element .
Example
<blockquote cite="https://www.keepinspiring.me/famous-quotes/"><p>The first step toward success is taken when you refuse to be a captive of the environment in which you first find yourself.</p></blockquote>
<cite>-Mark Caine</cite>
Output:
7. Short Quotations
An HTML <q> ....... </q> element defines a short quotation. If you will put any content between <q> ....... </q>, then it will enclose the text in double quotes.
Example
<p>Steve Jobs said: <q>If You Are Working On Something That You Really Care About, You Don't Have To Be Pushed. The Vision Pulls You.</q>?</p>
Output:
Steve Jobs said:If You Are Working On Something That You Really Care About, You Don't Have To Be Pushed. The Vision Pulls You.?
8. Code Tags
The HTML <code> </code> tag is employed to showcase snippets of code. It presents the content in a fixed-width font for better readability.
Example
<p>First Java program</p>
<p><code>class Simple{ public static void main(String args[]){
System.out.println("Hello Java"); }} </code>
</p>
9. Keyboard Tag
In HTML, the keyboard element <kbd> signifies that a portion of content represents user input from the keyboard.
Example
<p>Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + t<kbd></kbd> to restore page on chrome.</p>
Output:
Please pressCtrl+Shift+ t to restore page on chrome.
10. Address Tag
An HTML <address> tag defines the contact information of the author of the content. The content is written between <address> and </address> tags, and then it will be displayed in italic font.
Example
<address> You can ask your queries by contact us on <a href="">example123@newdomain.com</a>
<br> You can also visit at: <br>58 S. Garfield Street. Villa Rica, GA 30187.
</address>
Output:
You can ask your queries by contacting us at prachet@example.com
You can also visit us at:
58 S. Garfield Street, Villa Rica, GA 30187.
Conclusion
HTML phrase elements play a crucial role in adding semantic richness and accuracy to online content. Unlike the styling tags that focus on appearance, these elements offer browsers and assistive tools like screen readers clear insight into the text's purpose and context. This not only improves accessibility for users with disabilities but also helps search engines understand content structure and significance, ultimately enhancing search engine optimization (SEO) effectiveness.
Such tags allow adding extra semantics to the document, highlighting significance, marking definitions, or indicating abbreviations. Others are useful in the proper formatting of quoted or referenced work. In the meantime, the <code>, <kbd> and <address> tags address technical and contact data in a formal and organized way.