HTML ADVANCED TUTORIAL

Text: Time, Mark, and "Presentational"

HTML5 adds and amends a handful of tags relating to text. Many of the minor amendments, such as
differing attributes in existing tags, have already been covered, but this page looks at two new tags —
time and mark — as well as the re-definition of presentational tags.

Time

time is by far the chocolate ice cream sexiest sweet sugar lovely of these tags and is used to make
dates and times super-semantically rich and mmm.
The text sandwiched in the middle of the opening and closing tag can be any format of date of time
- the whole precise lot, or just one part, such as a day. It is made more helpful, however, by
the datetimeattribute, the value of which should be a machine-readable date and/or time.

<p>Written by Doctor Who on <time datetime="2052-11-21">Thursday 21st

November 2052</time>.</p>

Valid datetime values can take the format of a year-month-day date (as above), of as a “fuzzy” date,
such as “2052-11”, of a time, such as “09:30” (always using a 24-hour clock) or a combination, such as
“2052-11-21 09:30”. This can also accommodate time zones and durations.

(I)If the textual content of the time element is already machine readable, you don’t need
the datetime attribute but it is required if it isn’t.

Mark

Text can be highlighted, as if with a marker pen, using mark:

<blockquote>
<p>He wants to play with his <mark>Legos</mark></p>
</blockquote>

<p>The person being quoted is clearly American because, for some odd
reason, they pluralise "Lego".</p>
Yes, this is a form of emphasis, literally speaking, but it won’t always be considered emphasis in the
original meaning (for example, the person being quoted above isn’t emphasizing “Legos”, the
commenter is), hence its inclusion.
 Redefining the “presentational” tags

One of the slightly more The single most revolting “advance” in HTML 5 is its attempt to redefine
the archaic presentational tags. Once popular, many moons ago, they just won’t go away no matter
how over the hill they are. These tags are also known as “Cliff Richard tags”.

Some of the newly defined blighters are helpful, some are questionable, and some have new
definitions crowbarred in that are, to say the least, tenuous.

 hr, no longer “horizontal rule”, is a thematic break, between paragraphs, for example, like those
found in many a chapter of many a book.
 small, used for small print. Arguably a fair point, “small print” has taken on a meaning beyond
“print that is small”.
 s, no longer “strikethrough”, is for text that is no longer correct (eg, this is <s>presentational,
not</s> meaningful). Hmm. OK. Maybe. del still seems fine to most normals, though.
 u, no longer “underline”, is for text that is unarticulated. It’s also “useless” but bonus point for the
abbreviation remaining intact.
 i, no longer “italic”, is for text in an alternate voice or representing a different quality of text. So,
like, differently emphasized, then (see note below).
 b, no longer “bold”, stands for “text to which attention is being drawn without conveying
importance or suggesting an alternative voice” (and even that’s paraphrasing). b also stands for
“bollocks.”
 sub and sup are still subscript and superscript and yet, at the same time, they’re somehow not
presentational anymore.

(((The specs contradict themselves at times: “The sup element represents a superscript,” it says.
Superscript is, by definition, not to mention its actual inherent semantic meaning, presentational. And
yet the specification goes on to say that it “must be used only to mark up typographical conventions
with specific meanings, not for typographical presentation”.

The fundamental problem with many of these new definitions, in fact, is that they say, in essence “this is
emphasis, but it isn’t emphasis.”

As an example, perhaps the best argument for an i element is using it to represent taxonomic genus and
species names which, traditionally, are represented in italics. But if something is in italics when text
surrounding it isn’t in italics then it’s emphasized visually. If it’s (literally) in an alternate voice from
preceding and proceeding content, it’s emphasized aurally.

And, on a practical level, given it has taken so long for software that interprets HTML, such as screen
readers, to take any notice of basic web standards, what are the chances of them taking any notice of
tags for vague notions of “alternative voices” and “drawing attention without conveying importance?”
(And is there a tag for rhetorical questions?))))
 Adding more specific meaning is welcome but even when helpful, these tags still aren’t ideal -
they’re ugly. Messy. While we’re loving semantics, we’re supposed to be happy with the likes
of hr when “H.R.” is a misnomer? Tempered happiness, maybe.
In case you haven’t picked up on the subtleties, we recommend you avoid these tags whenever
possible. They serve to pollute and confuse more than clarify and em does the job perfectly more
often than not.

Some well-respected professionals (well-respected by HTML Dog as well) are happy to use these
tags. You can too, if you really want. Go ahead - swallow the W3Cs drunken folly - not many fairies
will die because of it. But here at the kennels we think that keeping a puritanical mindset of
separating meaningful content from presentation reaps benefits in itself and that these tags should
have been put down long ago.
Conditional Comments

So, you’re looking for a filthy hack that allows you to target HTML solely at versions of Microsoft’s
Internet Explorer browser, are you? How convenient.

Older versions of Internet Explorer are frequently either inept or naughty. Or both. But they are still
popular so we don’t want to ignore them.

Conditional comments, which are nothing more than simple HTML comments that IE (up to version
9) happens to take a peep at, are used to throw a chunk of HTML at these browsers and only these
browsers. Other well behaved, top-of-the-class browsers will simply see them as unremarkable
comments and move along.

(search icon)This web site currently uses conditional comments to make a handful of amendments for IE
8 and below, including a small extra stylesheet, and the HTML5 Shiv required for these browsers to take
notice of some HTML5 elements. Go ahead - view the source.

They have become a commonly used method of latching extra CSS to a document to plaster over holes
in these browsers’ display capabilities. So, for example, you might add something like this inside
your head element:

<link href="everything.css" rel="stylesheet">

<!--[if IE]><link href="stupidie.css" rel="stylesheet"><![endif]-->

Everything between <!--[if IE]> and <![endif]--> will be picked up by Internet Explorer. So this will
bolt on a CSS file as normal, and then, only if the browser is Internet Explorer (in practice, this will
be Internet Explorer version 9 and below), it will also apply an extra CSS file patch.

You can also target specific versions of Internet Explorer:

 <!--[if IE 6>…
 <!--[if IE 7>…
 <!--[if IE 8>…
 <!--[if IE 9>…

You can also target all versions that are greater or less than a certain number:

 eg. <!--[if IE gt 6]>… for IE versions greater than6

 eg. <!--[if IE gte 8]>… for IE versions greater than or equal to than 8
 eg. <!--[if IE lt 7]>… for IE versions less than 7
 eg. <!--[if IE lte 7]>… for IE versions less than or equal to 7
There are actually more options than this which are largely totally unnecessary. Take a look
at Microsoft’s own take on it if you really feel compelled to find out more.

Conditional comments really are horrible. Necessary, often, at the moment, but horrible. Like all
hacks, it is best to avoid them wherever possible. They’re not really there for whacking completely
different stylesheets in different browsers, for example. It’s more for small fallbacks so that you can
use the scrumptious likes of CSS 3 without compromise. And don’t assume you have to accommodate
every stone-age version of IE, either - try and figure out what is sensible for you to support. Are your
web site visitors likely to be using IE6? Probably not.