Day: September 27, 2020

Introduction

There are many elements in HTML for formatting text, which we didn’t get to in previously. The elements described in this unit are less known, but still useful to know about. Here you’ll learn about marking up abbreviations, citations, quotations, computer code, mathematical equations and contact information.

Abbreviations

The HTML Abbreviation element (<abbr>) represents an abbreviation or acronym. The optional title attribute can provide an expansion or human-readable description for the abbreviation. This text is often presented by browsers as a tooltip when the mouse cursor is hovered over the element. If present, title must contain the full description and nothing else. Let’s look at some examples where we may use abbreviations or acronyms:

And now let’s see the HTML code we should write to get that result:

<p>We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our web documents.</p>

<p>You can use <abbr title="Cascading Style Sheets">CSS</abbr> to style your <abbr title="HyperText Markup Language">HTML</abbr>.</p>

<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>

<p>Ashok's joke made me <abbr title="Laugh Out Loud">LOL</abbr> big time.</p>

The purpose of this element is purely for the convenience of the author and all browsers display it inline by default, though its default styling varies from one browser to another (this can be adjusted by adding some CSS code):

• Some browsers, like Internet Explorer, do not style it differently than a <span> element.
• Opera, Firefox, and some others add a dotted underline to the content of the element.
• A few browsers not only add a dotted underline, but also put it in small caps.

Proposed exercise: Abbreviations example

Create a web page with the code of the previous example, add a couple of paragraphs with some abbreviations, and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

Proposed exercise: Abbreviations for chatting

The world of email, texting and instant messaging has given rise to a whole series of acronyms or abbreviations that allow texters to complete their messages more quickly. In this exercise you must write a couple of unordered lists. The first one will contain the list of the abbreviations listed below (and some other you may know). The second list will contain at least twenty sentences showing how those abbreviations may be used for chatting.

Also use <h1> and <h2> headers to precede the lists and show some descriptive text.

For example, the first list may show the abbreviations like this:

• AFK – Away From Keyboard
• BBIAB – Be Back In A Bit
• BBL – Be Back Later
• BBS – Be Back Soon
• BRB – Be Right Back
• BFF – Best Friends Forever
• BTW – By The Way
• COB – Close Of Business
• DIY – Do It Yourself
• DM – Direct Message
• ETA – Estimated Time Of Arrival
• FISH – First In, Still Here
• IDK – I Don’t Know
• IMO – In My Opinion
• IRL – In Real Life
• LMK – Let Me Know
• LML – Laughing Mad Loud
• LOL – Laughing Out Loud
• NOYB – None of Your Business
• OFC – Of Course
• OMG – Oh My God
• PANS – Pretty Awesome New Stuff
• POS – Parents Over Shoulder
• ROFL – Rolling On the Floor Laughing
• SMH – Shaking My Head
• TTYL – Talk To You Later
• YOLO – You Only Live Once
• WTH – What The Heck

The second list you have to show must contain at least twenty sentences where those abbreviations are used. For example:

• This is my BFF, we have known each other since kindergarten.
• BTW, the boss needs to see you in her office in five minutes.
• She bought an old house that needs work because she loves DIY.
• If you need more information just DM me.
• What is the ETA on that report you are writing?
• LOL. That is the funniest message I have ever received.
• Did you see the game last night? I was shocked. I can’t believe the Lakers lost to the Phoenix Suns. SMH.
• …

You may follow this source code as an example telling you how to markup both lists:

<h1>Some abbreviations I use to chat</h1>
<h2>The abbreviations</h2>
<ul>
    <li>AFK - Away From Keyboard</li>
    <li>BBIAB - Be Back In A Bit</li>
    <li>BBL - Be Back Later</li>
    <li>BBS - Be Back Soon</li>
    <li>...</li>
</ul>
<h2>Some examples</h2>
<ul>
    <li>This is my <abbr title="Best Friends Forever">BFF</abbr>, we have known each other since kindergarten.</li>
    <li><abbr title="By The Way">BTW</abbr>, the boss needs to see you in her office in five minutes.</li>
    <li>She bought an old house that needs work because she loves <abbr title="Do It Yourself">DIY<abbr>.</li>
    <li>If you need more information just <abbr title="Direct Message">DM</abbr> me.</li>
    <li>What is the <abbr title="Estimated Time of Arrival">ETA</abbr> on that report you are writing?</li>
    <li><abbr title="Laughing Out Loud">LOL</abbr>. That is the funniest message I have ever received.</li>
    <li>Did you see the game last night? I was shocked. I can’t believe the Lakers lost to the Phoenix Suns. <abbr title="Shaking My Head">SMH</abbr>.</li>
    <li>...</li>
</ul>

Citations

The <q> element

The HTML <q> element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. You may also use the attribute cite to provide a URL that designates the source document or message for the information quoted, although this URL is not shown by the browser by default.

Let’s see a couple of examples by having a look at the result and the corresponding source code:

<p>
    When Dave asks HAL to open the pod bay door, HAL answers: <q cite="https://www.imdb.com/title/tt0062622/quotes/qt0396921">I'm sorry, Dave. I'm afraid I can't do that</q>.
</p>

<p>
    According to Mozilla's website,
    <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 was released in 2004 and became a big success</q>.
</p>

Important: The <q> element is intended for short quotations that don’t require paragraph breaks. For long quotations use the <blockquote> element.

Proposed exercise: Inline quotations

Create a web page with the code of the previous example, add one more paragraph with any quotation you like and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

You can get a quote for example from your preferred film, as in “https://www.starwars.com/news/15-star-wars-quotes-to-use-in-everyday-life“.

The <blockquote> element

The HTML <blockquote> element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation. A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element. For example:

<blockquote cite="https://www.brainyquote.com/quotes/steve_jobs_416859">
    Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven't found it yet, keep looking. Don't settle. As with all matters of the heart, you'll know when you find it.
    <cite><a href="https://www.brainyquote.com/quotes/steve_jobs_416859">Steve Jobs</a></cite>
</blockquote>

Proposed exercise: Famous quotes

Create a web page pointing to at least twenty of the most famous quotes. You may find some of them at “https://www.brainyquote.com“, “https://www.azquotes.com/“, or you can use any quotes you know, or from any other site.

You can use <blockquote> to wrap the full quote, and <cite> inside each quote to wrap the author’s name, as in the previous and following examples:

The <q> + <blockquote> + <cite> elements

The HTML Citation element (<cite>) is used to describe a reference to a cited creative work, and should include the title of that work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata. Let’s see an example where this element can be useful:

And now let’s have a look at the source code we should write to get that result:

<h1>Motivation page</h1>
<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius' quotes site</cite></a> says:</p>

<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">
   <p>It does not matter how slowly you go as long as you do not stop.</p>
</blockquote>

<p>I also love the concept of positive thinking, and the need to <q cite="https://www.azquotes.com/quotes/topics/positive.html">keep your thoughts positive</q> (as mentioned in <a href="https://www.azquotes.com/quotes/topics/positive.html"><cite>Positive quotes</cite></a>.)</p>

Proposed exercise: Full quotations example

Create a web page with the code of the previous example, and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

Representing computer code

There are a number of elements available for marking up computer code using HTML:

• <code>: For marking up generic pieces of computer code.
• <pre>: For retaining whitespace (generally code blocks). If you use indentation or excess whitespace inside your text, browsers will ignore it and you will not see it on your rendered page. As explained in a previous unit, if you wrap the text in <pre></pre> tags however, your whitespace will be rendered identically to how you see it in your text editor.
• <var>: For specifically marking up variable names.
• <kbd>: For marking up keyboard (and other types of) input entered into the computer.
• <samp>: For marking up the output of a computer program.

The <code> element

The HTML <code> element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code. By default, the content text is displayed using the default monospace font. For example:

<p>
    The <code>push()</code> method adds one or more elements to the end of an array and returns the new length of the array.
</p>

<p>
    The function <code>selectAll()</code> highlights all the text in the input field so the user can, for example, copy or delete the text.
</p>

Proposed exercise: Inline code

Create a web page with the code of the previous example, and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

The <pre> + <code> elements

The <code> element by itself only represents a single phrase of code or line of code. To represent multiple lines of code, we can wrap the <code> element within a <pre> element. For example:

if (a > b) {              // Example of code in
  console.log('Hello!');  // the JavaScript language
}

<pre><code>
if (a > b) {              // Example of code in
  console.log('Hello!');  // the JavaScript language
}
</code></pre>

Proposed exercise: Block code

Create a web page with the code of the previous example, add a new block with any piece of code of any language, and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

The <var> element

The HTML Variable element (<var>) represents the name of a variable in a mathematical expression or a programming context. It’s typically presented using an italic version of the current typeface, although that behavior is browser-dependent. For example:

<p>
    A simple equation: <var>x</var> = <var>y</var> + 2
</p>

<p>
    The volume of a box is <var>l</var> × <var>w</var> × <var>h</var>, where <var>l</var> represents the length, <var>w</var> the width and <var>h</var> the height of the box.
</p>

<p>
    The variables <var>minSpeed</var> and <var>maxSpeed</var> control the minimum and maximum speed of the apparatus in revolutions per minute (RPM).
</p>

Proposed exercise: Equations and variables

Create a web page with the code of the previous example, add a new paragraph with any equation you like and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

The <kbd> element

The HTML Keyboard Input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device. By convention, the browser renders the contents of a <kbd> element using its default monospace font. For example:

<p>
    Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.
</p>

<p>
    Use the command <kbd>help mycommand</kbd> to view documentation for the command "mycommand".
</p>

<p>
    You can create a new document using the keyboard shortcut <kbd>Ctrl</kbd> + <kbd>N</kbd>.
</p>

Proposed exercise: Keyboard shortcuts

Create a web page with the code of the previous example, add a couple of paragraphs with any shortcuts you know, and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

The <samp> element

The HTML Sample Element (<samp>) is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser’s default monospaced font (such as Courir or Lucida Console). For example:

<p>I was trying to boot my computer, but I got this hilarious message:</p>
<p><samp>Keyboard not found <br>Press F1 to continue</samp></p>

...

<p>When the process is complete, the utility will output the text <samp>Scan complete. Found <em>N</em> results.</samp> You can then proceed to the next step.</p>

Proposed exercise: Sample output

Create a web page with the code of the previous example, and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

A full example

Let’s have a look at the following example which uses all these elements (find below the corresponding source code):

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

para.onclick = function() {
  alert('Owww, stop poking me!');
}

$ 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

<pre><code>var 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>

Proposed exercise: Code, shortcuts and output

Create a web page with the code of the previous example, and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

Proposed exercise: Linux commands

Create a web page to display a table with some of the most important linux commands, and their usage descripcion, more or less like the table below.

You have to use the <code> tag for the commands in the left column, and the <kbd> tag for the examples of user’s input. Also notice that the table has headers and caption.

Marking up contact details

HTML has an element for marking up contact details: <address>. It can be used in a variety of contexts, such as providing a business contact information in the page header or footer, or indicating the author of an article or post. This simply wraps around your contact details, for example:

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

The <address> element’s contents could also include more complex markup, and other forms of contact information. In fact, the data provided can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth. Just keep in mind that you should include at least the name of the person, people, or organization to which the contact information refers, for example:

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

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: [email protected]</li>
  </ul>
</address>

Note that something like this would also be ok, if the linked page contained the contact information:

<address>
    You can contact author at <a href="http://www.somedomain.com/contact">www.somedomain.com</a>.<br />
    If you see any bugs, please <a href="mailto:[email protected]">contact webmaster</a>.<br />
    You may also want to visit us:<br />
    Mozilla Foundation<br />
    331 E Evelyn Ave<br />
    Mountain View, CA 94041<br />
    USA
</address>

Proposed exercise: Contact information

Create a web page with the code of the previous examples and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

Figures

The HTML <figure> (Figure With Optional Caption) element represents self-contained content, potentially with an optional caption, which is specified using the (<figcaption>) element. The figure, its caption, and its contents are referenced as a single unit.

Figures with images

<!-- Just an image -->
<figure>
    <img src="https://developer.mozilla.org/static/img/favicon144.png"
         alt="The beautiful MDN logo.">
</figure>

<!-- Image with a caption -->
<figure>
    <img src="https://developer.mozilla.org/static/img/favicon144.png"
         alt="The beautiful MDN logo.">
    <figcaption>MDN Logo</figcaption>
</figure>

<!-- Another image with caption -->
<figure>
    <img src="https://picsum.photos/id/237/300/200"
         alt="Dog asking for some food">
    <figcaption>Dog asking for some food</figcaption>
</figure>

Proposed exercise: Images with captions

Create a web page with the code of the previous example, add a couple of figures with pictures, and choose a suitable caption for each one. Finally check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

You can use any pictures you like, for example from “https://picsum.photos/images“, as in other exercises from a previous unit.

Figures with poems

<figure>
    <p>
        Bid me discourse, I will enchant thine ear,<br />
        Or like a fairy trip upon the green,<br />
        Or, like a nymph, with long dishevell'd hair,<br />
        Dance on the sands, and yet no footing seen:<br />
        Love is a spirit all compact of fire,<br />
        Not gross to sink, but light, and will aspire.
    </p>
    <figcaption>
        <cite>Venus and Adonis</cite>, by William Shakespeare
    </figcaption>
</figure>

Proposed exercise: Poems

Create a web page with the code of the previous example, add a new figure with another poem you like, and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

Figures with code

function NavigatorExample() {
    var txt;
    txt = "Browser CodeName: " + navigator.appCodeName + "; ";
    txt+= "Browser Name: " + navigator.appName + "; ";
    txt+= "Browser Version: " + navigator.appVersion  + "; ";
    txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
    txt+= "Platform: " + navigator.platform  + "; ";
    txt+= "User-agent header: " + navigator.userAgent  + "; ";
    console.log("NavigatorExample", txt);
}

<figure>
<figcaption>Get browser details using <code>navigator</code>:</figcaption>
<pre><code>function NavigatorExample() {
    var txt;
    txt = "Browser CodeName: " + navigator.appCodeName + "; ";
    txt+= "Browser Name: " + navigator.appName + "; ";
    txt+= "Browser Version: " + navigator.appVersion  + "; ";
    txt+= "Cookies Enabled: " + navigator.cookieEnabled  + "; ";
    txt+= "Platform: " + navigator.platform  + "; ";
    txt+= "User-agent header: " + navigator.userAgent  + "; ";
    console.log("NavigatorExample", txt);
}</code></pre>
</figure>

Proposed exercise: Block code

Create a web page with the code of the previous example, and check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

Figures with quotations

<figure>
    <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
    <blockquote>
        If debugging is the process of removing software bugs,
        then programming must be the process of putting them in.
    </blockquote>
</figure>

Proposed exercise: Famous quotes

Create a web page with the code of the previous example, and add some famous quotes using the same format, to show at least ten quotes. Finally check the results in your browser. Do not forget to include the rest of the basic HTML tags, and validate your code.

You can use the same quotes you used in a previous exercise, or you can get some new ones from “https://www.brainyquote.com/“, “https://www.azquotes.com/“, or any other site you may know.

Quiz

Test your skills with this quiz about advanced text formatting and some other concepts related to this unit.