Semantics » Clan Wallace

Memorable Quote

As Sir Winston Churchill stated:

Now this is not the end. It is not even the beginning of the end. But it is, perhaps, the end of the beginning.

(Inspiring) Speech in November 1942

Drop Caps

<!-- Markup (Purely presentational) -->
<span class="cap">I<span>'m afraid

/* CSS */
.cap {
  color: #d50; 
  float: left; 
  font: normal 360% WoodWudRegular, Georgia, "Times New Roman", Times, serif;
  margin: 4px 3px -36px 0;
}

I'm afraid

Importance

Alerts, Warnings, Reminders and Important content.

<!-- Markup -->
along the path of <strong>progressive enhancement</strong>

/* CSS */
b, strong { 
  color: #809966;
  font-weight: bold; 
}

along the path of progressive enhancement

Registration is required for this event.

Keywords

Yes, b now has semantics. More semantic than span to stylistically offset product names and keywords.

<!-- Markup -->
with a little help from tools like <b>jQuery</b>

/* CSS (see Importance) */
b {
  text-shadow: 1px 1px 1px #333;
  color: #aacc99;
}

with a little help from tools like jQuery

Emphasize

Stressed content.

<!-- Markup -->
we <em>can</em> make it.

/* CSS */
i, em { 
  color: #809966;
}
em {
  font-weight: bolder;
}

we can make it.

Alternate Voice

Yes, i has also returned. More semantic than span for an “alternate voice”, such as foreign words, technical terms and typographically italicized text.

<!-- Markup -->
<p>Megan thought to herself, <i>when will IE6 die?</i>.</p>

/* CSS (see Emphasize) */

I know you are thinking, what's this all about?

Megan thought to herself, when will IE6 die?

Superscript

Express exponential expressions 2¹⁰, symbols 14^oC, n^th day and footnotes (See Foot Notes following).

<!-- Markup -->
this will certainly 1<sup>st</sup>, require

/* CSS */
sub, sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { 
  top: -0.5em; 
}

this will certainly 1^st, require

Footnotes

Footnotes ^[2] are used most commonly to provide references in articles or to clarify on a rarely used word or phrase.

<!-- Markup -->
... is definitely no lover's tryst<sup><a href="#footnotes" title="Foot Note 1"> [1] </a></sup> my friend.
...
<!-- Place at foot of page -->
<h6 id="footnotes">Footnotes</h6>
<ol>
  <li><q>lover's tryst</q> - Secret meeting between lovers.</li>
</ol>

/* CSS */
sup a { 
  border: none!important;
  color: #630100;
}

... is definitely no lover's tryst ^[1] my friend.

Subscript

Allows the creation of chemical compounds; (glucose C₆H₁₂O₆ has 6 atoms of carbon, 12 of hydrogen, and 6 of oxygen), scientific (R_out – stands for output resistance in an electronic circuit) or mathmatical notations (log_ax is logarithm to the base a of x).

<!-- Markup -->
require more O<sub>2</sub>

/* CSS (See Superscript) */
sub { 
  bottom: -0.25em; 
}

require more O₂

Abbreviation

Think, the spoken word, as by a screen reader. Does the abbreviation need to be spelt out, letter by letter or should it be spoken as a word? Does the abbreviation need to be expanded and spoken as a word? What about the definition of an abbreviation?

1. Abbreviations, such as SEO or CSS, do not need to be marked up.
   • Screen readers and visual readers can say the abbreviation letter by letter.
   • Less markup, lighter pages, spoken correctly, everybody wins.
   • Do not define abbreviations with markup such as <abbr title="Cascading Style Sheets">CSS</abbr>, when CSS will suffice.
   • If people do not know the abbreviation, they can look it up. It is not the authors job to define abbreviations.
   • If you are introducing abbreviations for the first time and they are important for the understanding of the content, then use the <dfn> element. Examples will follow shortly.
2. Initialisms, such as 10m or etc., should be expanded to its spoken word using the title attribute of an <abbr> element.
   • Screen readers can use the title to speak the word or phrase correctly in the flow of content.
   • Visual readers can utilise a tooltip, supplied by the device or the author, to help them expand the initialism if they need to.
   • Commonly used and understood initialisms, such as "e.g.", do not need to be marked up but that would be down to the author and their target audience to decide whether or not to use <abbr title="for example">e.g.</abbr>.
   • Do not expand these initialisms to their meaning, such as <abbr title="and the rest">etc.</abbr>.
3. Acronyms, such as NATO or Ajax, should ideally use the <acronym> element but HTML5 has dropped this tag. In its place, an untitled <abbr> element will suffice.
   • Screen readers can say the acronym as a word.
   • Authors can stylistically present acronyms to give the visual reader an indication that they should read the acronym as a word and not spell it out letter by letter.
   • Do not define acronyms with markup such as <abbr title="Asynchronous JavaScript and XML">Ajax</abbr>, when <abbr>Ajax</abbr> will suffice.
   • If people do not know the acronym, they can look it up. It is not the authors job to define acronyms.
   • If you are introducing acronyms for the first time and they are important for the understanding of the content, then use the <dfn> element. Examples will follow shortly.

<!-- Markup -->
We will learn many technologies; HTML5, CSS3, <abbr>Ajax</abbr>, XML, <abbr title="et cetera">etc.</abbr>
Price <abbr title="does not equal">!=</abbr> <abbr title="total cost of ownership">TCO</abbr>

/* CSS */
abbr, dfn {
  color: #930;
}
abbr[title], dfn[title] {
  border-bottom: 1px dashed lime;
  cursor: help;
} 

@media print {
  abbr[title]:after { content: " (" attr(title) ")"; }
}

Note: I'm very disappointed the acronym element has been dropped because it indicated whether an abbreviation needs to be spelt out or spoken as a word.

We will learn many technologies; HTML5, CSS3, Ajax, XML, etc.

Definition

The point in the document at which a given term is first explained. A good practise for a site that requires many definitions would be to have a Glossary page that users could quickly reference. This is much less obtrusive than supplying the definitions directly in the marked up content. For detailed definitions, a link to Wikipedia would be very useful.

<!-- Markup -->
plenty of <dfn title="Water">H<sub>2</sub>O</dfn> for refreshment

/* CSS */
abbr, dfn {
  color: #930;
}
abbr[title], dfn[title] {
  border-bottom: 1px dashed lime;
  cursor: help;
} 

/* Addresses styling not present in S5, Chrome  */
dfn { 
  font-style: italic; 
}

/* jQuery */
/* Convert definitions into links to wikipedia 
   Format: <dfn title="(1) definition || (2) term: definition">term</dfn> */
$('dfn[title]', '#content').each(function(){	
  var title=this.title;
  if (title.indexOf(':')) {
    var a=title.split(':');
    title=a[0];
  }
  $(this).wrap('<a style="text-decoration:none;" href="//en.wikipedia.org/wiki/' + encodeURI(title) + '" target="_blank">')
});

/* Vanilla JavaScript Alternative */
  var content = document.getElementById('content');
  [].forEach.call( content.querySelectorAll('dfn[title]'),
    function fn(elem) {
      var title = elem.title;
      if (title.indexOf(':')) {
        var a=title.split(':');
        title=a[0];
      }
      var html = WW.createNode('a', {
          style: "text-decoration:none;", 
          href: "//en.wikipedia.org/wiki/" + encodeURI(title),
          target: "_blank"
        });
      html.appendChild( elem.parentNode.replaceChild( html, elem ) );
    });

What is the definition of these terms?

• Chemical symbols: H₂O or C₆H₁₂O₆
• Abbreviations: CSS or SMS
• Acronyms: Ajax or AIDS
• General terms: accesskey or holocaust
• Initialisms: etc. or jpeg
• Of course, this list should really be a dl: A Definition List.
• Slang: WTF or BBFN.
• Note: The definitions are visually distinct by being italicalised.

Quote

Short quotation

<!-- Markup -->
Did you know, <q>The quick brown fox jumps over the lazy dog</q> contains every letter of the alphabet?

/* CSS */
q, .quote, blockquote p {
  color:#9f5831;
  font-style:italic;
}

Did you know The quick brown fox jumps over the lazy dog contains every letter of the alphabet?

Citation

1. Use cite around only:
   • the title of a book (including poems) or comic.
   • the title of an online blog / article or document (e.g. “Mozilla Manifesto”).
   • the title of a piece of art (including digital), film titles, song / album titles.
2. Do not use cite around:
   • the name of software.
   • website names.
   • names of programming languages.
   • computer games.
3. Remember, above all, that cite is for giving credit.

<!-- Markup -->
And <cite>Jill</cite> said <q>No, I think it's a date</q>
J. R. R. Tolkien, author of the now familiar <i>Lord of the Rings</i> trilogy <cite>The Fellowship of the Ring</cite>, 
<cite>The Two Towers</cite>, and <cite>The Return of the King</cite>.

And Jill said No, I think it's a date.

J. R. R. Tolkien, author of the now familiar Lord of the Rings trilogy The Fellowship of the Ring, The Two Towers, and The Return of the King.

Block Quotation

A long quotation that is often cited and referenced.

<!-- Markup -->
<p>As <cite><a rel="external" href="URL of author">Author</a> stated:</cite></p>
<blockquote>
  <p><q>The Quotation.</q></p>
  <p><cite><a href="URL of quote">source</a></cite></p>
</blockquote>

/* CSS (also see Qoute)*/
blockquote {
  margin:0 2em 1em;
}
  blockquote p {
    display:inline;
  }

As Sir Winston Churchill stated:

Now this is not the end. It is not even the beginning of the end. But it is, perhaps, the end of the beginning.

Speech in November 1942

Fancy Block Quote

Just more stylish quotes if needed.

<!-- Markup -->
<blockquote>
  <p><span class="lquote">&#8220;</span>The Quotation.<span class="rquote">&#8221;</span></p>
  <p><cite><a href="URL of quote" rel="external">source</a></cite></p>
</blockquote>

/* CSS */
.lquote, .rquote {
 font-family: times new roman, georgia, serif;
 font-size: 1.3em;
 font-weight: bold;
 line-height: 0;
 position: relative;
}

“Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.”

w3.org

Fancy Quotes

This may look like over-kill but removing CSS degrades very semantically across all browsers.

<!-- Markup -->
How about a <span class="lquote qsmall">&#8220;</span>fancy in-line quote<span class="rquote qsmall">&#8221;</span><q>this is definately ...</q>

/* CSS - see 'Fancy Block Quote' */
.qsmall {
  font-size: 1em;
  top: -0.2em;
}

How about a “fancy in-line quote”.

Fancy Ampersand

Great for headings but also looks good in-line.

<!-- Markup -->
bangers <i title="and" class="amp">&amp;</i> mash

/* CSS */
.amp {
  font-family: Cochin,Baskerville,Palatino,"Book Antiqua",serif;
  font-style: italic;
}

Torvill & Dean

Rather than this & character, it can be made to look much more stylish with some “bangers & mash”.

Maths

We may have to get mathematical at times.

Fractions

<!-- Markup -->
a mere <span class="fnum">1</span>/<span class="fden">15</span> of the way

/* CSS */
.fnum, .fden {
  font: .55em "lucida grande",tahoma,verdana,arial,sans-serif;
}
.fnum {
  vertical-align: super;
}
.fden {
  vertical-align: sub;
} 

a mere 1/15 of the way

MathML

For supporting browsers, MathML will be the way forward. For example, this is the formula for the roots of the quadratic polynomial $a{x}^2+bx+c$ .

$$x=\frac{-b\pm {\left(b^2-4ac\right)}^{1/2}}{2a}$$

Here's a snippet of the MathML code:

<!-- Markup -->
<math xmlns="http://www.w3.org/1998/Math/MathML" mode="inline"><mrow><mtext> </mtext><mi>a</mi><mo> </mo><msup><mrow><mi>x</mi></mrow><mrow><mn>2</mn></mrow></msu> ..... 

CSS Formulas

CSS could be fine tuned to get some pleasing results and good cross-browser compatibilty.

<!-- Markup -->
<i>y</i> =
<span class="radical">&#8730;</span>
<span class="radicand"><i>x</i><sup>2</sup> + 6</span>

/* CSS */
.radical {
  font-size: 1.7em;
}
.radicand { 
  padding: 0.5ex;
  border-top: thin black solid;
  margin-left: -4px;
}

y = √x² + 6

Mark

Used to mark or highlight some text that is out of context, perhaps to bring the users attention to something in a quote that may not be obvious. I use it to draw my and my readers attention to something that needs further research or to be updated with additional content in the near future.

Even when CSS is disabled, visual users we still see the highlighted content.

<!-- Markup -->
<mark>More research is needed for <b>MathML</b></mark>

/* CSS */
/* Addresses styling not present in IE6/7/8/9 */
mark {
  color: #000;
  font-style: italic; 
}

... But it is, perhaps, the end of the beginning. (Inspiring) Speech in November 1942

Lists

We often need to organise items into a list. Let's take a look at our options and how to make them look good.

<!-- Emmet Simple List --> ul.list>li{item}*4

<!-- Emmet Two-Column List -->
section.ideal-cols>h4{header}+ul.list>li{item}*6

Ordered Lists

1. The Table of Contents is an example of a two-column sorted list.
2. I build the list dynamically using JavaScript.
3. The file is parsed for heading tags and creates a link to each one.
4. Finally, I collapse the TOC and leave it up to the user to show or hide the list.
5. If JavaScript is not available then no button will show. This is known as progressive enhancement.

<!-- Emmet --> ol.steps>li{item$}*4

Description (or Definition) Lists

There are a number of variations for description lists but the good news is that one set of CSS rules can style them all.

/* CSS */
dl {
  border: 3px double #ccc;
  padding: 0.5em;
}
dt {
    font-weight: bold;
  	color: green;
}
dt::after {
  content: ": ";
}
dl, dd {
    font-size: .9rem;
}
dd {
    margin: 0 0 1em 6em;
    display: list-item;
    list-style-image: url(i/listmark.gif);
}

Single Term and Description

Google Chrome

Google Chrome is compatible with all platforms, including Windows, Mac, Android and iOS. It allows changes you saved in the browser to be accessed from other devices.

<!-- Emmet --> dl>dt{term}+dd{definition}

Multiple Terms and a Single Description

Firefox

Mozilla Firefox

Fx

A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

<!-- Emmet --> dl>dt{term}*3+dd{definition}

Single Term and Multiple Descriptions

Firefox

A free, open source, cross-platform, graphical web browser developed by the Mozilla Corporation and hundreds of volunteers.

The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).

<!-- Emmet --> dl>dt{term}+dd{definition}*3

Multiple Terms and Descriptions

Glossary

Dictionary

Vocabulary

An alphabetical list of terms in a particular domain of knowledge with the definitions for those terms...

Core glossary

A simple glossary or defining dictionary which enables definition of other concepts, especially for newcomers to a language or field of study.

A small working vocabulary and definitions for important or frequently encountered concepts, usually including idioms or metaphors useful in a culture.

Automatic extraction of glossaries

Computational approaches to the automated extraction of glossaries from corpora or the Web have been developed in the recent years.

Searching glossaries on the web

The search engine Google provided a service to only search web pages belonging to a glossary therefore providing access to a kind of compound glossary of glossary entries found on the web.

<!-- Emmet --> dl>dt{term}*3+dd{definition}+dt{term}+dd{definition}*2+(dt{term}+dd{definition})*2

Metadata

Name

Godzilla

Born

1952

Birthplace

Japan

Color

Green

<!-- Emmet --> h5+dl>(dt{term}+dd{definition})*4

Wrapping name-value groups in <div> elements

Can be used to add additional styling to each group.

Name

Godzilla

Born

1952

Birthplace

Japan

Color

Thistle

<!-- Emmet -->
dl[style="background:#ff2"]>(div[style="background:#ffc"]>dt{term}+dd{definition})*4

Footnotes

1. quote

note

2. quote

note

3. quote

note

<!-- Emmet (Note the use of '$'
 to number each footnote) --> 
h6{Footnotes}+dl>((dt>q{$. quote})+dd{note})*3

FontAwesome Lists

You can prefix list items with icons from the FontAwesome library. Ideal for menu links.

•   Home
•   Books
•   Tags
•   Logout

<!-- Emmet --> ul>(li>i.fa.fa-home+{&nbsp; item})*4
<!-- External Links with FontAwesome Icons 
(Change values as required) -->
ul>(li>i.fa.fa-home+a[title="description"][target="_blank"]{  item})*4