Tags to highlight a textual content in HTML

HTML has a series of tags to distinguish what is essential in a text.

These tags are not considered obsolete because they has a semantic role, unlike the style tags it is recommended to replace with CSS code.
They are recognized by all browsers, even old.

Acronyms and definitions

The purpose of the <abbr> tag is just to insert a title attribute, whose content is displayed when the mouse is moved over the text.

When we want to give the definition of a word or acronym such as GUI.

When we want to give the definition of a word or acronym such as  <abbr title="Graphic User Interface">GUI</abbr>

This has the same effect as the tag , but can be customized by CSS without affecting all span elements whose role is more general. One may for example show dotted underline as does Firefox by default.

abbr {
  border-bottom:1px dotted blue;
}

Using a marker

It is an alternative to bold or underlined modes...

The browser can mark itself parts of the text!

The browser can <mark>mark</mark> itself parts of the text!

or

The b tag is purely a presentation element, b stands for bold. Strong on the contrary is a semantic indicator, it is used to show that a word is important in the text. The visual effect is the same by default, but you can change the style of strong (or b) in CSS.
The contents marked by strong will always be considered essential by parsers such as search engines.

Content may appear in strong or in bold.

Content may appear in <strong>strong</strong> or in <b>bold</b>

or

Same as for strong and b. Browsers display em in italics by default, but the user may choose how he wants to display emphasis.

Content can be put in emphasis or in italic.

Content can be put in <em>emphasis</em> or in <i>italic</i>

Showing corrections

Sometimes it is important to leave a trace of the corrections made in text. A simple way is the use of the del tag for the corrected part and ins for the correction.

Last updated in ~~2015~~ 2016

Last updated in <del>2015</del> <ins>2016</ins>

Displaying an example

The samp tag (sample) is used to present the results displayed by a program and if a visual effect is given by default, it is up to the webmaster to define its own presentation.

The program displays Hello!.

The program displays <samp>Hello!</samp>

The code of a program

To display the listing of the code itself...

print "Hello!".

<code>print "Hello!"</code>

All these tags are especially interesting to define a specific presentation in CSS to a content type, but it is not impossible that page processing tools (including search bots) will benefit of them.

See also ...

Comments in HTML.