JSFiddle - React, Tailwind, and code Playground

by krofdrakula

HTML

<section id="The-Building-Blocks">
    <header><h1>The Building Blocks</h1></header>
    <p>
        <abbr>HTML</abbr> is the web's primary technology for information exchange. It's goal
        is to convey information in a meaningful and structured way. By employing a principle known
        as <em>the semantic web</em> we can structure the content using appropriate tags to mark up
        the content so as to convey the maximum amount of context for anyone consuming the content.
    </p>
    <p>
        Ideally, we never include any presentational information in an <abbr>HTML</abbr> document.
        This enables us to strictly separate the presentational layer from content, which is the
        most effective way of creating portable documents consumable on any Internet-connected device,
        be it desktop or mobile browsers, web crawlers or content aggregators. It is also the best
        way to have a good content-to-markup ratio, essential for performance, scaling and
        <abbr>SEO</abbr>.
    </p>
    <p>
        <abbr>CSS</abbr>
    </p>
</section>

<dl role="glossary">
    <dt>CSS</dt>
    <dd>Cascading Style Sheet</dd>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>SEO</dt>
    <dd>Search Engine Optimization</dd>
</dl>

CSS

abbr[title] { border-bottom: 1px dashed #ccc; cursor: help }
dl[role=glossary] { visibility: hidden; display: none; }

JavaScript

// add titles to <abbr> elements using the glossary
$('dl[role=glossary]').each(function() {
  var dt = $(this).children('dt'),
      abbrs = $('abbr:not([title])'); // <abbr> without title
  
  dt.each(function() {
    var term = $(this), description = term.next('dd').text();
    abbrs.each(function() {
      if($(this).text() == term.text()) {
        $(this).attr('title', description);
      }
    });
  });
});