20 HTML Elements for Better Text Semantics

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 C^ie.

<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

Source Link: http://www.sitepoint.com/20-html-elements-better-text-semantics/