Lesson 25: Specialized Text

Overview

In this HTML lesson, we demonstrate how to encode various types of specialized text. We begin with the abbr and cite elements that are used for abbreviations and citations. Then we add aside and dfn elements. Next, we cover the more eccentric elements: details, summary, and dialog. Finally, we explain the computer-related elements: kbd, code, var, and sample.

Abbreviations and Citations

Our first example contains two new elements: abbr and cite. We set abbbreviations in abbr elements and citations in cite elements.

Example1.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>The First Council of Nicaea in <abbr title="Anno Domini">A.D.</abbr> 325 condemned
    the heresy of Arius and produced the <cite>Nicene Creed</cite> as a response.</p>
  </body>
</html>

Output

Output with Color

An Aside and a Definition

Here, we add an aside and a dfn element to our previous example. The aside is used to mark tangential information, and the dfn is put around a term that is being defined.

Example2.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>The First Council of Nicaea in <abbr title="Anno Domini">A.D.</abbr> 325 condemned
    the heresy of Arius and produced the <cite>Nicene Creed</cite> as a response.</p>
    <aside>
      A <dfn>General Council</dfn> is a council where the bishops of the whole world are summoned by
      the Pope.
    </aside>
  </body>
</html>

Output

Output with Color

Details, Summary, and Dialog

The elements in this example are a little unusual. The details and summary elements are used to together. The details element hides its content while showing only what is inside a summary element, until it is opened with a mouse click. The dialog element puts its contents inside a box, like a dialog window.

Example3.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <details>
      <summary>First Council of Nicaea</summary>
      <ul>
        <li>The First Council of Nicaea in <abbr title="Anno Domini">A.D.</abbr> 325 condemned the
        heresy of Arius.</li>
        <li>The <cite>Nicene Creed</cite> was a product of that council.</li>
      </ul>
    </details>
    <dialog open>Arius was a heretic who denied the divinity of Jesus.</dialog>
  </body>
</html>

Output

Output with Color

Computer Terms

Our last example, covers various computer terms: kbd, code, var, and samp. The kbd element stores keyboard input. The code holds computer programming code. The var is used for variable, either in a computer program of a scientific formula. The samp element is used for the output of a computer program.

Example4.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net HTML</title>
  </head>
  <body>
    <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>
    <p>The command <code>Console.WriteLine()</code> prints its content to the output window.</p>
    <p>When the value of <var>iSpeed</var> is 1, it prints <samp>Distance Traveled: 55</samp> in the
    window.</p>
<pre><code>
using System;

namespace XoaX {
    class Program {
        static void Main(string[] args) {
            // A simple while loop
            int <var>iSpeed</var> = 10;
            int <var>iDistance</var> = 0;
            while (<var>iSpeed</var> > 0) {
                <var>iDistance</var> += <var>iSpeed</var>;
                Console.WriteLine("Distance Traveled: " + <var>iDistance</var>);
                --<var>iSpeed</var>;
            }
        }
    }
}
</code><samp>
Distance Traveled: 10
Distance Traveled: 19
Distance Traveled: 27
Distance Traveled: 34
Distance Traveled: 40
Distance Traveled: 45
Distance Traveled: 49
Distance Traveled: 52
Distance Traveled: 54
Distance Traveled: 55
Press any key to continue . . .
</samp></pre>
  </body>
</html>