Semantic Text
Introduction
In the Basic formatting article, it was said that the <i>, <b>, and <s> elements represent italic text, bold text, and strikethrough text, respectively. This was true, but not anymore. Newer standards of HTML have redefined the meaning of these elements. The meaning of these elements are now oriented towards their content rather than their appearance. The main idea when using HTML is to focus on the content of the website while worrying about the appearance later when you start using CSS.
The <i> element
The
<i>element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, transliteration, a thought, or a ship name in Western texts.
<i> is a very general element that can be used for terms, names, titles of works, titles of nobility, foreign words, foreign phrases, thoughts, or emphasis. Here are some examples of it's use:
For use with the name of something:
The name of the ship was <i>Destiny</i>.For use with a term:
<i>bandwidth</i> refers to the maximum amount of data that can be transmitted on a given path per unit of time.For use with a thought:
She thought to herself <i>Where did the jar of cookies go?</i>For use with a foreign word or phrase:
The tempo of the raffle entries coming in was <i>prestissimo</i>.For use with the title of a book, song, or movie:
I love <i>Men in Black</i>!The <em> element
The
<em>element represents stress emphasis of its contents.
<em> is more specific than it's more general <i> relative, it is strictly for stress emphasis of a word or phrase and nothing more, thus it is more preferred than <i> if stress emphasis is all you need. Example:
Just <em>do</em> it!The <cite> element
The
<cite>element represents a reference to a creative work. It must include the title of the work or the name of the author (person, people or organization) or an URL reference, or a reference in abbreviated form as per the conventions used for the addition of citation metadata.
<cite> is also preferred over <i> specifically for titles of creative works. Despite the quote above from W3C, using this tag for or with an author's name is disputed by the other HTML standard maintained by WHATWG.
Example use for a title of a creative work:
Gerard Butler played the main character of <cite>Gladiator</cite>.The <dfn> element
The
<dfn>element represents the defining instance of a term. The term-description group,<p>,<li>, or<section>element that is the nearest ancestor of the<dfn>element must also contain the definition(s) for the term given by the<dfn>element.
This element is preferred over <i> for use with a term that is being defined.
<dfn>HyperText Markup Language</dfn> is a computer language for describing the structure of web pages.When used in the above way, the content of the element must contain the exact word or phase being defined and nothing else. Alternatively, an acronym can be used as the content, in which case the value of the element's title attribute must be the exact word or phrase that's being defined:
<dfn title="HyperText Markup Language">HTML</dfn> is a computer language for describing the structure of web pages.When used in this way, many web browsers will display the title of the definition's acronym in a tooltip when the element is hovered over. It is important that the definition of the term be found immediately outside the element, within the enclosing paragraph or list item.
The <abbr> element
The
<abbr>element represents an abbreviation or acronym, optionally with its expansion. Thetitleattribute may be used to provide an expansion of the abbreviation. The attribute, if specified, must contain an expansion of the abbreviation, and nothing else.
This element represents an abbreviation whose expansion is not necessarily being defined as one is doing while using the <dfn> element. Example:
<abbr title="Cascading Style Sheets">CSS</abbr> was first introduced in 1996.The <b> element
The
<b>element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.
This element shouldn't be used for stress emphasis (use <em> for that), importance (use <strong> for that), heading text (use the <h1> - <h6> elements for that), or alternate voice/mood (use <i> for that). It should just be used to make text more visible, while not affecting the tone or tempo of the text when read out loud.
Example for use in an opening sentence of an article:
<b>It was a quarter past midnight</b> when a fiery object streaked across the sky.Example for bringing attention to offered products or services:
Buy our new <b>Peppermint Latte</b> and get a <b>Chocolate Chip Cookie</b> free!Example for bringing attention to an action in interactive software:
Press <b>E</b> to pick up.The <strong> element
The
<strong>element represents strong importance, seriousness, or urgency for its contents.
This element is recommended over <b> for scenarios illustrated by the following examples.
For seriousness:
<strong>Lock the door</strong> before leaving.For importance apart from other details:
<h1>Chapter 3: <strong>The Internet</strong> and it's other early predecessors</h1>For use as a warning label:
<strong>Warning:</strong> Don't try this at home.The <mark> element
The
<mark>element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. When used in a quotation or block of text referred to from the prose, it indicates a highlight that was not originally present but which has been added to bring the reader's attention to a part of the text that might not have been considered important by the original author when the block was originally written, but which is now under proviously unexpected scrutiny. When used in the main prose of a document, it indicates a part of the document that has been highlighted due to its likely relevance to the user's current activity.
Example when highlighting a part of a code fragment:
The highlighted portion shows the mistake in the code: <code>if (n == 2)<mark>;</mark> f(n);</code>Example when highlighting something relevant from an originally unmarked text:
<p>Madison briefly stated the two solutions in Federalist No. 10:</p>
<blockquote>
<p>There are two methods of curing the mischiefs of faction: the one, by <mark>removing its causes</mark>; the other, by <mark>controlling its effects</mark>.</p>
</blockquote>
The <s> element
The
<s>element represents contents that are no longer accurate or no longer relevant.The
<s>element is not appropriate when indicating document edits; to mark a span of text as having been removed from a document, use the<del>element.
Rather than removing content that is out of date, the <s> element allows one to keep it visible while contrasting it with it's updated replacement. This can be useful for pointing out an update in the price or inventory status of something.
Example 1: Show change in price.
<p><b>Tacos</b>: <s>$1.50 each</s> Now on sale for 99¢ each!</p>Example 2: Show change in inventory status.
<h1><s>Get your tickets now!</s> Tickets sold out!</h1>Example 3: Show change in a policy or rule.
<strong><s>No refills</s> 1 refill allowed.<strong>The <del> element
The
<del>element represents a removal from the document.
<del>elements should not cross implied paragraph boundaries.
W3C gives a clue to the difference between <s> and <del>, it appears that <s> is for removing content which is under the complete authority of the owner, not requiring either a citation or reason for the removal or update. Whereas <del> is to record the removal of content from an official or public document where multiple editors or peer are watching the document. <del> can also be used to cross off completed tasks or to indicate changes between different versions of a document. Basically, <s> indicates past information that is now outdated while <del> indicates a type of document edit where a previous version of this document used to include this portion of text but not anymore.
Example 1: Cross off completed tasks.
<h1>To Do</h1>
<ul>
<li><del>Feed chickens</del></li>
<li><del>Return milk bottles</del></li>
<li><del>Gather wood</del></li>
<li>Heat water</li>
<li>Skin potatoes</li>
</ul>
Example 2: Show document edits
<h1>Document Revision History</h1>
<table>
<tr>
<th>Date</th>
<th>Editor</th>
<th>Edit</th>
</tr>
<tr>
<td>2014-08-22T12:30:43GMT</td>
<td>Ralph Furley</td>
<td>Line 12: <del>Add 2 cups of sugar</del><ins>Add 1 cup of brown sugar and 1 cup of white sugar</ins></td>
</tr>
<tr>
<td>2014-07-14T01:44:03GMT</td>
<td>Dave Krappenschitz</td>
<td>Line 82: <ins>Wait 10 minutes before serving</ins></td>
</tr>
<tr>
<td>2014-07-13T00:31:22GMT</td>
<td>Fidel Royolanda</td>
<td>Line 3: <del>1 teaspoon Cumin</del></td>
</tr>
</table>
The <ins> element
The
<ins>element represents an addition to the document.The
<ins>element should not cross implied paragraph boundaries.