HTML Phrase Tags

Many of the HTML tags are there to provide structure. The purpose is to create the columns and rows of content.

The HTML phrase tags provide enhancement to the content, affecting the rendering.

For a paragraph of text emphasis can be given to particular words, by the use of phrase tags.

Whilst most of the phrase tags present their wrapped content as bold or italics, as per the tags <b>, <i>, <pre>, and <tt>, their use is more than a duplication of other tags. They provide more detail and indication about their wrapped content. Take for example the address tag. This informs the search engine robot about the type of wrapped content.

In HTML, there are tags which are used to perform specific operation. It is somewhat similar to text formatting tags. There are some situation where you would like to highlight some word, add quotation, display code in different form etc. to highlight the text in web page.

A phrase tag is used to indicate that a block of text has structural meaning. For example, using the <abbr> tag indicates that the word or phrase contained within is an abbreviation or acronym.

Below is a table of the HTML phrase tags:

Tag NameHTML TagTag Description
Acronym<abbr>..</abbr>Used to show the acronym within the body of text, without disturbing the flow. A popup showing the full text will appear when hovering over the acronym . For example: <abbr title=”Do It Yourself”>DIY</abbr> home projects DIY home projects
Acronym<acronym>..</acronym>Deprecated, see <abbr>
Address Text<address>..</address>Indicates an address within the page. This is an indication to the search engine indexing robots more than to the website visitor.
Computer Code<code>..</code>The text is shown with an old style computer programming effect. It also adds a reassurance that the code is meant to be shown this way and not just genuine page structural code which has escaped to public view. It is generally rendered by browsers using the monospace font family.
Emphasis<em>..</em>Indicates emphasis, not simply the highlighting of a word or phrase within a sentence. Words which convey a strength of action such as must and will are candidates for wrapping within this tag.
Keyboard Text<kbd>..</kbd>Another of those tags which reflects computer/keyboard entry.
Mark<mark>..</mark>This is used to highlight sections of text. CSS styling will override the default yellow background. For example: Tomorrow’s <mark>finance</mark> meeting is at 3pm. Tomorrow’s finance meeting is at 3pm.
Programming Variables<var>..</var>This is used to highlight variable text in web page.
Sample<samp>..</samp>Another computer code tag. Used to define a section of sample code.
Quoting<blockquote>..</blockquote>This is used to show that the wrapped text has been derived from another website.
There’s a default associated rendering which is often overridden in the style of the website.
Short Quotations<q>..</q>This is used to add double quotes within a paragraph or sentence.
Strong<strong>..</strong>This is used to give importance to the text in web page.
Text Citations<cite>..</cite>Used to show that the reference is a citation. For example
<p>Examples taken from the VNTweb articles<cite>Which is Correct <strong> or <b>?</cite>
Text Direction<bdo>..</bdo>This is used to override text direction in web page.
For example: <bdo dir=”rtl”>Converting the flow to backwards</bdo>Converting the flow to backwards

Use of the different types of phrase tags allows for their styling to be tailored within the website’s CSS files adding the website’s own presentation for each and able to exploit the different types to best effect. For example some websites will pull the block quote out with either one or two large quotation marks.