- Semantic HTML Conveys More Meaning
- The <s> Element
- <ins> and <del> Elements
- The <cite> Element
- The <q> Element
- The <abbr> and <dfn> Elements
- The <code> Element
- The <samp> Element
- The <kbd> Element
- The <var> Element
- The <data> Element
- The <time> Element
- The <ruby>, <rt>, and <rp> Elements
- The <sup> and <sub> Elements
- The <mark> Element
- The <wbr> Element
- Conclusion
- Frequently Asked Questions on 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 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.
Frequently Asked Questions on HTML Elements for Better Text Semantics
What are the most essential HTML elements for text semantics?
HTML elements for text semantics are crucial for enhancing the readability and accessibility of your web content. Some of the most essential ones include the
tag for paragraphs,
to
tags for headings, for emphasis, for important text, for smaller text, and for highlighted text. Other important tags include for abbreviations, for citations, for short quotations, and for longer quotes.
for longer quotes.
How do HTML semantic elements improve SEO?
HTML semantic elements provide a clear structure to your web content, making it easier for search engines to understand the context and relevance of your content. This can significantly improve your website’s SEO. For instance, using the appropriate heading tags (
to
) helps search engines understand the hierarchy of your content. Similarly, using the tag can highlight important keywords, while the tag can provide important information about your webpage to search engines.
What is the difference between
and in HTML?The and tags in HTML both make the text bold, but they have different semantic meanings. The tag indicates that its content has strong importance and is typically displayed in bold. On the other hand, the tag is used to stylistically offset content without conveying any special importance, and is also displayed in bold. It’s recommended to use when you want to emphasize the importance of the text.
How do I use the tag in HTML?
The tag in HTML is used to indicate an abbreviation or acronym. The full form of the abbreviation or acronym can be provided using the title attribute. For example, HTML. When you hover over the abbreviation, the full form will be displayed.
What is the purpose of the tag in HTML?
The tag in HTML is used to define the title of a creative work (e.g., a book, a song, a movie, a painting, a sculpture, etc.). Browsers usually italicize the text within a tag, which indicates that the text is a citation.
How do I use the and tags in HTML?
tags in HTML?
The and
tags in HTML are used for quotations. Thetag is used for short inline quotations, while thetag is used for longer quotations that take up an entire paragraph. For example,Quotation hereandLonger quotation here.
What is the difference between and in HTML?
The and tags in HTML both render text in italics, but they have different semantic meanings. The tag emphasizes the text, while the tag is used for text that is set off from the normal text, such as foreign words, technical terms, or fictional character thoughts. It’s recommended to use when you want to emphasize the text.
How do I use the tag in HTML?
The tag in HTML is used to highlight parts of your text. It’s often used to draw the reader’s attention to specific content within a paragraph or article. For example, Highlighted text.
What is the purpose of the tag in HTML?
The tag in HTML is used to display smaller, secondary text, such as copyright or legal information. It makes the text size smaller than the surrounding text. For example, Copyright information.
How do I use the tag in HTML?
The tag in HTML provides metadata about the HTML document, such as its author, description, keywords, and more. This information is not displayed on the page but can be used by search engines. For example, .
Armando Roggio is an experienced director of marketing, ecommerce expert, growth hacker, web developer and writer. When he is not analyzing data or writing (code or prose), Armando is also a high school wrestling coach.