<h1>Text Semantics Demonstrations</h2>

<p>See article: <a href="http://www.sitepoint.com/20-html-elements-better-text-semantics/" target="_blank">20 HTML Elements for Better Text Semantics</a> by Armando Roggio.</p>

<h2>The <code>&lt;s&gt;</code> Element</h2>
  
  <p><s>Reg. Price $19.99</s> Now $9.99</p>
 
  <p><s>Grilled Cheese Sandwich</s> Sold Out</p>
 
  <p><s>Three Bedroom Apartment $1,000 Monthly</s></p>
  
  <h2 id="ins-and-del-elements">The <code>&lt;ins&gt;</code> and <code>&lt;del&gt;</code> Elements</h2>
  
  <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>
  
  <h2 id="the-cite-element">The <code>&lt;cite&gt;</code> Element</h2>
  
  <p>I really like Armando’s article, 
<cite>An Introduction to HTML Imports</cite>.</p>
  
  <h2 id="the-q-element">The <code>&lt;q&gt;</code> Element</h2>
  
  <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>
  
  <h2 id="the-abbr-and-dfn-elements">The <code>&lt;abbr&gt;</code> and <code>&lt;dfn&gt;</code> Elements</h2>
  
  <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>
  
  <h2 id="the-code-element">The <code>&lt;code&gt;</code> Element</h2>
  
  <p>In jQuery, <code>.attr()</code> retrieves the value of an attribute of the 
first element in the matching set of elements.</p>
  
  <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>
  
  <h2 id="the-samp-element">The <code>&lt;samp&gt;</code> Element</h2>
  
  <p>If the upload fails, the system will notify the users that 
<samp>the file was not uploaded</samp>.</p>
  
  <h2 id="the-kbd-element">The <code>&lt;kbd&gt;</code> Element</h2>
  
  <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>
  
  <h2 id="the-var-element">The <code>&lt;var&gt;</code> Element</h2>
  
  <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>
  
  <h2 id="the-data-element">The <code>&lt;data&gt;</code> Element</h2>
  
  <data value="11">eleven</data>
  
  <ul>
    <li><data value="978-0987467423">Jump Start Rails</data></li>
    <li><data value="978-0992279455 ">AngularJS: Novice to Ninja </data></li>
</ul>
  
  <h2 id="the-time-element">The <code>&lt;time&gt;</code> Element</h2>
  
  <p>She was born on her grandpa's birthday, 
<time datetime="2014-10-22 19:00">October 22, 2014</time>.</p>
  
  <h2 id="the-ruby-rt-and-rp-elements">The <code>&lt;ruby&gt;</code>, <code>&lt;rt&gt;</code>, and <code>&lt;rp&gt;</code> Elements</h2>
  
  <p><ruby>君<rt>くん</ruby><ruby>子<rt>し</ruby>
    は<ruby>和<rt>わ</ruby>して<ruby>同<rt>どう</ruby>ぜず。</p>
  
  <p><ruby>君<rt>くん</ruby></p>
  
  <p><ruby>君<rp>(</rp><rt>くん </rt><rp>)</rp></ruby></p>
  
  <h2 id="the-sup-and-sub-elements">The <code>&lt;sup&gt;</code> and <code>&lt;sub&gt;</code> Elements</h2>
  
  <span lang="fr"><abbr>C<sup>ie</sup></abbr></span>
  
  <h2 id="the-mark-element">The <code>&lt;mark&gt;</code> Element</h2>
  
  <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>
  
  <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>
  
  <h2 id="the-wbr-element">The <code>&lt;wbr&gt;</code> Element</h2>
  
  <p>humu<wbr>humu<wbr>nuku<wbr>nuku<wbr>a<wbr>pua`a</p>