HTML & CSS
Article

20 HTML Elements for Better Text Semantics

By Armando Roggio

Semantic HTML can help web designers and developers convey meaning not simply in the presented page, but also with the tags and elements used to code that page, potentially improving accessibility, search engine indexing, and even human understanding.

As a term, semantic or semantics relates to meaning in language. If something is more semantic, it is by definition more meaningful. Semantic HTML is simply markup that is more effective at communicating some intended meaning.

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.

Semantics become more important where the difference in meaning is subtle or where the use of a tag specifically implies a meaning.

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> Elements

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.

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

<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>

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.

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.

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

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> Elements

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>

In the above example, browsers, search bots, and humans looking at the markup will recognize that the “Internet Corporation for Assigned Names and Numbers” is the phrase being defined and that “ICANN” is an acronym for that phrase. Also, per the standard, the paragraph, list, or section containing a <dfn> tag must also include the associated definition.

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.

<p>In jQuery, <code>.attr()</code> retrieves the value of an attribute of the 
first element in the matching set of elements.</p>

The <code> element may also be used in conjunction with the <pre> element to create code blocks.

<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.

In this very elementary example, the numeric value of the word “eleven” is passed.

<data value="11">eleven</data>

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.

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

The <time> 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>

Aurelio has all the details on the <time> element in his recent SitePoint post.

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

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

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.

The Web Hypertext Application Technology Working Group (WHATWG) has several excellent examples of Ruby annotations, including the following.

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

To better understand the example, consider just the first Ruby annotation.

<ruby>君<rt>くん</ruby>

If properly rendered, the characters after the <rt> tag, くん, will appear as superscript above the character.

If one was concerned about compatibility with older browsers, the <rp> element could add fallback punctuation.

<ruby>君<rp>(</rp><rt>くん </rt><rp>)</rp></ruby>

In the above example, browsers that did not support Ruby annotations would render the pronunciation as a parenthetical, 君(くん ).

The <sup> and <sub> Elements

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.

Perhaps the most common examples of these tags in use are certain French abbreviations, which typically include superscript. Specifically, the French word, compagnie, which is “company” in English, is frequently abbreviated as Cie.

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

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>

In a blockquote, the <mark> element may be used to add emphasis not found in the original context.

<blockquote>I included the jQuery JavaScript library via Google’s content 
delivery network. <mark>jQuery is in no way required</mark> for the Web 
Audio API, but its powerful selectors will make it a lot easier to 
interact with the HTML pads. I am also linking to a local JavaScript file 
that will contain the code for working with the Web Audio API.</blockquote>

The <wbr> Element

Browsers – whether they are running on laptops or smartphones – have a set of rules used to decide when and where to add line breaks to the copy. These rules are particularly important in responsive designs, since the width of a given element on the page could vary greatly from context to context.

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.

In the U.S., Hawaii’s state fish, as an example, has a 21-letter name: humuhumunukunukuapua`a. Using the <wbr> tag, one could show a browser how to break the word at select syllables.

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

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.

Do you find these elements useful? Share your thoughts in the comments.

Editor’s update: we’ve put all the code examples into the CodePen demo below. These show the default styling with Normalize.css:

See the Pen mjqEB by SitePoint (@SitePoint) on CodePen.

  • Steve

    This article would have been much improved if screenshots of each element in use were shown. Otherwise, a terrific resource!

    • LouisLazaris

      Generally, many of these HTML tags don’t have anything fancy to show. But some do have some default styling, so I added all the code examples into a CodePen demo, which I’ve posted at the bottom of the article:

      http://codepen.io/SitePoint/pen/mjqEB

      Thanks for the suggestion.

  • പുട്ടുറുമീസ്

    Thanks alot for Sharing all these… :)

  • Andriy Trofimov

    Thanks man, very useful article.

  • bizshop

    Some seems to be just a bit more unnecessary complication unless there is benefit. Do the search engines actually give more weight to header than div, for example? Is there a practical reason why should not be used to superscript text?

    • James Edwards

      The primary benefit is robots and assistive technologies. Robots (like search engines) can extract more information from a semantically rich document. Assistive technologies (like screenreaders) rely on semantics to understand what content is.

      Using SUP for superscript is the same as using BLOCKQUOTE for indentation — incorrectly using the tag for its visual rendering, rather than its semantic meaning.

      • bizshop

        I’d argue the ‘incorrectness’ of sup for superscript. That is what sup is intended for. The tag itself is an abbreviation of superscript. What makes it ‘incorrect’ – and why should it matter? This is the first I’ve heard that the superscript tag should not be used for superscript ;-)

        I have not seen any evidence of robots having a better extraction from using any of the tags described, and if a screenreader is not programmed well enough to read without the tags mentioned, then it is not a very good reader at all.

  • James Edwards

    Some extra subtleties that are worth noting:

    – the DEL element need not be displayed at all (because it implies a deletion that is no longer relevant to the text, and therefore need not appear in the normal view)
    – conversely the S element must always be displayed (because it implies data that is still meaningful in relation to the data that replaces it)
    – for your KBD example, you didn’t need all those individual elements, you could have put the entire keystroke “Shift+Control+Command+3” in a single KBD element

    Regarding the DATA element, I’m sceptical of its value. The example you gave with book titles is only useful to you, since it doesn’t tell you what the “value” actually represents. A better choice would have been a CITE element with microdata, explicitly identifying it as a title of a book with an ISBN number.

  • Lohith S

    hey armando great job man.. liked the way u explain..

    armando i’m beginner in blogging… i hv(not as good as yours) tried to explain html tags with examples… need your useful suggestions. take look http://www.ithubzone.com

  • Carl S

    Just as an FYI, the example for the element uses a element that includes a person’s name. The cite element points to the WHATWG description of cite, that says, in part “A person’s name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people’s names.” The use of cite here in this example seems more in line with the W3C description of which is found at http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element and does specifically include the use to indicate the name of the author.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.