Phrase elements

Phrase elements are sorts of inline tags which help add structure and meaning to the text.

Common phrase elements are  and . These give emphasis to words or strengthen them. Many HTML pages use  (italic) and  (bold) instead, but while these are perfectly valid tags they are simply presentational and do not add meaning. Our aim is to add only meaningful structural code, so when a word needs to be emphasised we use the emphasis phrase element. These tags are also better understood by browsers which don't present the text visually, such as screen readers.

Phrase elements in use

—Emphasis

When emphasising text, the  tag should be used in preference to  (italic) because it has more intrinsic meaning—it says "this text has emphasis", rather than "display this text as italic type".

—Strong emphasis

Where a stronger emphasis is required, the  tag should be used in preference to  (bold) because it has more intrinsic meaning—it says "this text has strong emphasis", rather than "display this text in bold type".

<abbr></abbr>—Abbreviation

Abbreviations should be marked-up using <abbr></abbr>. While it is not required to give the tag a title attribute, doing so will allow the abbreviation to be expanded. This is more useful for uncommon abbreviations, for instance, IPRSP would be encoded:

<abbr title="Interim Poverty Reduction Strategy Paper">IPRSP</abbr>

<acronym></acronym>—Acronym

This tag is the same as <abbr> except that acronyms are pronounced as words. If in doubt, use <abbr>. <acronym></acronym> is useful where the word is usually set in lowercase but needs to be identified as an acronym rather than a proper word, such as Unicef:

<acronym title="United Nations Children's Fund">Unicef</acronym>

<cite></cite>—Citation

A citation is a title of a newspaper or book, a reference to something else or the attribution of a quotation. While <cite></cite> is usually rendered in a visual browser as italic, it should still be used in preference to  (also usually rendered as italic) since it contains more meaning and is thus more useful:

<cite>The Economist</cite>

and we could also add an anchor:

... a recent article in <a href="http://www.economist.co.uk"><cite>The Economist</cite></a>.

to get:

... a recent article in The Economist.

Note that the <cite></cite> is nested inside the anchor. This could be coded the other way around, it doesn't matter much, and some circumstances might suit one order over another. The essential thing is that they be nested correctly.

<dfn></dfn>—Defined term

This tag sets the defining instance of a term. Visual browsers usually display this as italic text. It should be used where a new term is introduced, especially where the term is explained.

The word "citation" in the entry above has been marked up using <dfn></dfn>, which in these pages should be rendered visually as bold italic. It could even have a brief description in the title attribute if required.

<del></del>—Deleted text

<ins></ins>—Inserted text

These two phrase elements are poorly supported among browsers, but they can be powerful so an explanation of their use can be added if required.

There are other phrase and style elements but those listed above are the most useful in this context. The others are either more suited to displaying computer code or are deprecated in XHTML.