20 HTML Elements for Better Text Semantics

Semantic HTML Conveys More Meaning

Consider as an example the difference between a <div> element and a <header> element. The former describes a generic group of block content in an HTML document, while the latter more specifically denotes a block of introductory content, possibly including navigational elements.

<div id="top">Welcome</div>
<header>Welcome</header>

In a browser, a style sheet makes it possible to present the <div> and the <header> elements identically. But the moment that a search engine bot or a screen reader parses the code, the semantics become significant, since these tools may treat the two tags differently, including assigning a different weight or value to the content of one over the other.

The <s> Element

The <s> element represents content that is no longer relevant, accurate, or applicable. It might show a price change on an ecommerce site, a sold out item on a menu, or a no longer relevant ad.

<h1>Widget for Sale</h1>
<p><s>Reg. Price $19.99</s> Now $9.99</p>
 
<s>Grilled Cheese Sandwich</s> Sold Out
 
<s>Three Bedroom Apartment $1,000 Monthly</s>

The <s> element should not be used to indicate edits to a document, like deleted text. The <s> puts a horizontal line (a strikethrough) over its content by default.

<ins> and <del> Element

The <ins> and <del> elements work together to describe insertions and deletions to an HTML document. Each element supports two attributes. The cite attribute stores a URL pointing to an explanation of the change. The datetime attribute indicates when the change was made.

<h1>Meeting Agenda</h1> 
<ul>
    <li>Discuss Sales Plan</li>
    <li><del timestamp="2014-10-12T18/02-17/00">Review Q3 Marketing</del></li>
    <li><ins cite="//sitepoint.com/change.html">Review Q3 Marketing</ins></li>
</ul>
<p>The meeting will be on <del>Thursday</del> <ins>Friday</ins> afternoon.</p>

By default, the contents of <del> will appear with a strikethrough, while the contents of <ins> are rendered with an underline.

The <cite> Element

Not to be confused with various elements’ cite attributes as with <ins> and <del> above, the <cite> element is a tag in its own right, representing a reference to some creative work like an article, book, comic, picture, poem, song, video, or similar.

<p>I really like Armando’s article,
<cite>An Introduction to HTML Imports</cite>.</p>

The <cite> element’s content should be the title of the work referenced, the name of the author or artist, or a URI for the referenced work.

The <q> Element

Designating short, inline, quoted material, the <q> element includes both the necessary punctuation — quotation marks — and a cite attribute for including a URL. It is important to remember that the <q> tag is for inline quotations, while a <blockquote> element is more appropriate for large, stand alone quotes.

<p>I had not been aware, but according to <cite>Richard Kerr</cite>,
<q cite="//www.sciencemag.org/content/340/6136/1031">Most robotic
missions to Mars have failed</q>.</p>

The <abbr> and <dfn> Element

HTML’s abbreviation and definition elements often are used together to introduce an abbreviation or acronym, particularly when that abbreviation or acronym is included in a relatively complex, long, or technical document.

<p>The <dfn><abbr title="Internet Corporation for Assigned Names and Numbers">ICANN</abbr></dfn>
is an international, not-for-profit organization responsible for managing web addresses.</p>

The <code> Element

The <code> element is used to indicate sections of computer code that should not be executed, but rather should be rendered as readable code.

<pre><code>
function loadAudio( object, url) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
 
    request.onload = function() {
        context.decodeAudioData(request.response, function(buffer) {
            object.buffer = buffer;
        });
    }
    request.send();
}
</code></pre>

The <samp> Element

Used to identify sample output from a computer system, application, or similar, the contents of a <samp> tag should be a quote from some computer interaction.

<p>If the upload fails, the system will notify the users that
<samp>the file was not uploaded</samp>.</p>

The <kbd> Element

If a designer or developer wanted to communicate what a user should or did type during a keyboard interaction, the <kbd> element would clearly (semantically) identify that content. As an example, the <kbd> element could be used to describe a particular combination of key presses. When <kbd> tags are nested, they represent single keys or units.

<p>To capture an image of the screen on a Macbook, simultaneously press
<kbd>Shift</kbd>+<kbd>Control</kbd>+<kbd>Command</kbd>+<kbd>3</kbd>.</p>

The <kbd> element may also be used for input from keyboard alternatives, like voice input on a mobile device.

The <var> Element

The <var> element represents a variable in the context of either mathematics or computer programming.

<p><var>x</var> = 13</p>
 
<p>A second variable, <var>pad</var>, is assigned to the pad element object.
jQuery allows for this sort of concatenated selector.</p>

The <data> Element

This HTML element, along with the value attribute, associates some content with a machine-readable translation of that content’s meaning. In effect, the <data> element is intended to be used in conjunction with a script.

<ul>
    <li><data value="978-0987467423">Jump Start Rails</data></li>
    <li><data value="978-0992279455 ">AngularJS: Novice to Ninja </data></li>
</ul>

This tag may also be used for relatively more complex associations. In the example below, an International Standard Book Number is associated with each book’s title.

The <data> Element

Similar to the <data> element, the <time> element can be used to pass machine-readable date and time information along with its content.

<p>She was born on her grandpa's birthday,
<time datetime="2014-10-22 19:00">October 22, 2014</time>.</p>

The <sup> and <sub> Element

Representing superscript and subscript, respectively, the <sup> and <sub> elements denote “typographical conventions” and should not be used simply for superscripting and subscripting copy, which could otherwise be done with just CSS and a generic <span> tag.

<p>
      <span lang="fr"><abbr>C<sup>ie</sup></abbr></span>
</p>
<p>
      <span lang="fr"><abbr>D<sub>ie</sub></abbr></span>
</p>

The <mark> Element

If HTML had a large, yellow highlighter, it would be the <mark> element. This tag highlights content because of its special relevance in some context. For example, if one wanted to show a specific keyword in some section of copy that matched a search query, the <mark> element would be the proper tag. In the example below, a search was made for the word “audio.”

<p>Web <mark>Audio</mark> uses an <mark>Audio</mark>Context interface to
represent <mark>Audio</mark>Nodes. Within the <mark>Audio</mark>Context
an <mark>audio</mark> file, as an example, is connected to a processing node,
which in turn, is connected to a destination like the speakers on your laptop.
Each node in the <mark>Audio</mark>Context is modular so that a web developer
can plug (or unplug) nodes like a toddler snapping Lego blocks in place to
build relatively more complicated structures.</p>

The <wbr> Element

The <wbr> tag describes a word break or line break opportunity that the browser would not otherwise recognize. This ability can be very helpful for particularly long words, URLs, or sections of code. These particularly long elements, which are typically not broken, can impact page layout.

<p>humu<wbr>humu<wbr>nuku<wbr>nuku<wbr>a<wbr>pua`a</p>

The <ruby>, <rt> and <rp> Element

Ruby annotations are succinct runs of text typically used as a pronunciation guide for character-based languages like Japanese, Korean, or Chinese.

<ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>
は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。

The <ruby> element is HTML’s way of adding Ruby annotations. Frequently these pronunciation aids are rendered as superscript above the associated character.

The <ruby> element is often used with the <rt> element, which describes the pronunciation of an individual character in a Ruby annotation, and the <rp> element, which creates fallback punctuation for browsers that do not support Ruby annotations.

Conclusion

HTML offers many great semantic tags, giving website builders the ability to communicate meaning directly with elements.

Not all of these elements have accessibility or other benefits, but if nothing else, they can make code easier to read from a developer perspective.

Reference

Armando Roggio.

www.sitepoint.com//20-html-elements-better-text-semantics/

Published October 29, 2014

End