Phrase tags in HTML are not very different from any other tags used for styling text. However, they do serve a purpose and are used for some very specific situations. For instance, the <em> tag is used to emphasize text in HTML but the output is not different from the <i> tag which is used to italicize text.
However, search engines and assistive technology like screen readers know the difference between an <em> and <i> tag despite both rendering the text in the same way. Screen readers would put more stress on the word which is enclosed in an <em> tag. For, instance in the following sentences, the words within the <em></em> tags would be read with a slight pause and verbal stress.
I really want to go to the <em>concert</em> this weekend.We cannot <em>continue</em> living like this.Moreover, you can also use CSS to override the default styling used for these tags. <code>, <kbd> <blockquote> phrase tags can be styled using CSS to give them a unique look.
Similarly, there are many such phrase tags in HTML that have a similar purpose. Here, we have compiled a list of all the useful phrase tags and a brief explanation of their function and usage.
Tag to Highlight Text <mark>
This tag would highlight text contained within it like a highlighter pen. It’s used to highlight text contained in another tag like the paragraph <p> tag. The default color for the highlighted text is Yellow. The text would appear with a yellow background when rendered.
Julius Caesar said the famous words <mark>“Et tu Brute?”</mark>. This would be rendered as follows.
Julius Caesar said the famous words “Et tu Brute?”.The same text highlight can also be generated using the <span> tag. Look at the following code which uses inline style to achieve the same effect using <span> tag.
<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>However, the <mark> tag would do so without the need for inline styling or CSS.
The <strong> Tag
The <strong> tag and the <b> tag would give you the same output but there is a fundamental difference. The <b> or the bold tag would simply make the text bold. However, the text inside <strong> tags are considered important by screen readers and search engines.
This can be used to tell Search engines that the text in bold is not just styling but should be considered important text.
This is the Heading we suggest for the article <strong>“The Strong Man”</strong>Output:
This is the Heading we suggest for the article “The Strong Man”Bi Directional Override <bdo> Tag
This tag would override the default text direction which is left to right. The text contained inside this tag would reverse its direction, that is it would be read from right to left. The text direction can be specified using the attributes of this tag.
It accepts three attributes, that are, rtl, ltr and auto. In the following example the text would be read from right to left.
<bdo dir="rtl">
This text will go right-to-left.
</bdo>This is the output generated by the above code.
This text will go right-to-left.The Program Output Tag <samp>
This tag is used to display text generated by a program like MS-DOS, or the Command Prompt or Terminal output. The text contained between the tag is automatically rendered in monospace font.
<samp> The Command was not recognized as an internal or external command. </samp>Output:
The Command was not recognized as an internal or external command.The Code Tag <code>
This is one of the most widely used phrase tags in HTML. The text contained inside the tag is rendered in the default monospace system font. Even search engines and screen readers recognise the text within the <code> tag as some programming language.
The Code tag can be styled using external CSS files. You can also use javascript to recognise the programming language and style it accordingly.
<code>
function changeColor(newColor) {
const elem = document.getElementById("para");
elem.style.color = newColor;
}
</code>The Quotation Tag <blockquote>
The <blockquote> tag in HTML is used to define a section that is quoted from another source. It is typically displayed as an indented block of text, often with a different font style or size to distinguish it from the surrounding text. Here are some key points about the <blockquote> tag:
It has the cite attribute which specifies the URL of the source of the quote. This attribute is optional but useful for providing the origin of the quote.
<blockquote cite="https://www.example.com/article">
This is a blockquote from another source.
</blockquote>Output:
This is a blockquote from another source.
The Keyboard Input Tag <kbd>
The <kbd> tag in HTML is used to represent user input, typically keyboard input. The text inside this tag is usually rendered in a monospace font, which helps to distinguish it from the surrounding text.
You can use it in tutorials or technical documentation to highlight keypress. While the default rendering might be sufficient, you can use CSS to style the <kbd> elements as needed.
kbd {
font-family: 'Courier New', Courier, monospace;
background-color: #f4f4f4;
border: 1px solid #ccc;
padding: 2px 4px;
border-radius: 3px;
}