reading-notes

HTML Advanced Text Formatting

Reading

HTML Advanced Text Formatting

Description Lists

Used to mark up a set of items and their associated descriptions
- Terms and definitions
- Questions and answers
Use <dl> to designate a description list
<dt> designates the description term
<dd> designates the description definition

<dl>
  <dt>soliloquy</dt>
  <dd>
    In drama, where a character speaks to themselves, representing their inner
    thoughts or feelings and in the process relaying them to the audience (but
    not to other characters.)
  </dd>
  <dt>monologue</dt>
  <dd>
    In drama, where a character speaks their thoughts out loud to share them
    with the audience and any other characters present.
  </dd>
  <dt>aside</dt>
  <dd>
    In drama, where a character shares a comment only with the audience for
    humorous or dramatic effect. This is usually a feeling, thought, or piece of
    additional background information.
  </dd>
</dl>

soliloquy

In drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)

monologue

In drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.

aside

In drama, where a character shares a comment only with the audience for humorous or dramatic effect. This is usually a feeling, thought, or piece of additional background information.
</dl>

Quotations

<blockquote>
Can include a cite attribute pointing to the source URL

<p>Here is a blockquote:</p>
<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

Here is a blockquote:

The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation.

Citations

<cite> element is used to designate a citation

Abbreviations

<abbr> element
When combined with the title attribute, the abbreviation will show the full text when the mouse hovers over the text of the abbreviation

<p>
  I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with
  the chainsaw.
</p>

I think Rev. Green did it in the kitchen with the chainsaw.

Contact Details

<address> can designate the contact info in a variety of ways

<address>
  <p>
    Chris Mills<br />
    Manchester<br />
    The Grim North<br />
    UK
  </p>

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: me@grim-north.co.uk</li>
  </ul>
</address>

Chris Mills
Manchester
The Grim North
UK

Tel: 01234 567 890

Email: me@grim-north.co.uk

Subscripts and Superscripts

<sub> element designates subscripts
<sup> element designates superscripts

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>
  Caffeine's chemical formula is
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

My birthday is on the 25^th of May 2001.

Caffeine's chemical formula is C₈H₁₀N₄O₂.

If x² is 9, x must equal 3 or -3.

Computer Code

<code>: For generic pieces of code
<pre>: For retaining whitespace within a code block
<var>: For marking up variable names
<kbd>: For keyboard inputs
<samp>: For output of a computer program

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>
  You shouldn't use presentational elements like <code>&lt;font&gt;</code> and
  <code>&lt;center&gt;</code>.
</p>

<p>
  In the above JavaScript example, <var>para</var> represents a paragraph
  element.
</p>

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

const para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}
You shouldn't use presentational elements like <font> and <center>.

In the above JavaScript example, para represents a paragraph element.

Select all the text with Ctrl/Cmd + A.
$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms

Date & Time

<time> element converts times and dates into a machine readable format

<time datetime="2016-01-20">20 January 2016</time>

20 January 2016