33
50 HTML5 NOw
<hgroup>
<h1 style=”text-transform:uppercase”>The
<b style=”display:block”>Diamond Age</b>
</h1>
<h2>or, A Young Lady’s Illustrated Primer</h2>
</hgroup>
The remainder of restyling this
<hgroup>
example to recreate the original cover
is left as an exercise for the reader.
STylinG neW SeManTicS:
inTrOducinG bulleTprOOf HTMl5
As of this writing, all modern browsers, except Internet Explorer, support styl-
ing the new HTML5 semantic elements. Even modern smart-phone browsers,
most of which use Webkit (iPhone, iPad touch, Palm Pre, Android), and modern
BlackBerry browsers, all support the styling of new HTML5 semantic elements!
However, Internet Explorer versions 8 (IE8) and earlier — as well as much older
versions of Firefox, Safari, Opera, and older smart-phone browsers — all simply
ignore these new elements, or technically speaking, create empty DOM nodes
for them.
Why would they do such a thing?
Because that’s what HTML has specified since the first paragraph of the first
documentation of HTML (emphasis and stronger emphasis added).
The WWW system uses marked-up text to represent a hypertext
document for transmision [sic] over the network. The hypertext
mark-up language is an SGML format. WWW parsers should ignore
tags which they do not understand, and ignore attributes which they
do not understand of tags which they do understand.
— From “HyperText Mark-up Language,” by Tim Berners-Lee,
published on the W3C’s web site in 1992.
As of HTML5, unknown elements are no longer ignored and are parsed into the
hierarchy of a document, just as if they were divs or spans by other names.
38
10 NEw HTML5 sEMaNTiCs 51
That’s all fine when we live in a world where everyone’s browser handles ele-
ments both known and unknown. However, we want to use new HTML5 seman-
tics now and have them work in new browsers as well as old.
brinGinG back THe bulleTprOOfinG
In his book Bulletproof Web Design, Dan Cederholm introduced the concept of
writing HTML/XHTML and CSS that gracefully handles variations in content,
text sizes, window sizes, etc. Jeremy Keith expanded the notion of “bulletproof-
ing” to include JavaScript as well in his book Bulletproof Ajax.
As professional web workers, we must now also design (and thus bulletproof)
for the varying levels (and features) of HTML5 support in browsers, both today
and in the near future.
Since unknown or new tags are ignored in IE8 and other older browsers, styling
new elements in particular requires a bulletproofing technique that we will likely
need for several years, until IE8 fades from view. It starts with a time-honored
workaround technique: nesting an extra
<div>
element. This simple example
uses the new
<article>
element, but could apply equally to any new HTML5
element.
<article>
<div>
...
</div>
</article>
To which we now add a class name the same as the new element:
<article>
<div class=”article”>
...
</div>
</article>
And now, whenever you want to reference an
<article>
element in your style
sheet, instead of using “article,” use “.article” as follows:
.article { margin:3em 0; /* more article styling etc. */ }
44
52 HTML5 NOw
By styling the
<div>
that is immediately nested inside the
<article>,
you are
essentially styling the same element — and doing so in a way that is compatible
with existing browsers. HTML5 browsers will gain the semantic benefits of your
use of new elements such as
<article>
while your CSS will continue to work in
older browsers.
beWare Of JavaScripT SHiMS
As some folks have pointed out, it is possible to use a bit of JavaScript with
document.createElement
with the new elements to get them recognized, parsed,
and styled by IE8. This technique is too fragile to be reliable and must be avoided for
a few reasons. (And if you’ve never heard of this technique, you may skip this aside.)
Your CSS must not depend on your JavaScript. Your styling should never depend
on your scripting, your CSS should stand on its own, and in fact (this is part of the
original philosophy in the book Bulletproof Web Design), each piece should work as
well as it can without the other pieces.
You cannot assume the presence of JavaScript. Up to 10 percent of users
browse the web without JavaScript. Either their devices don’t support it or they
have it turned off for performance or security reasons. Again, another element of
bulletproof web design is that your site should work without JavaScript.
There are non-HTML5 browsers for which
document.createElement
does
not do the trick. IE8 (and earlier) is not the only non-HTML5 browser out there.
Numerous devices, such as older BlackBerries, have their own browsers, which
don’t yet support HTML5 but do offer very good HTML4 and CSS support. The
document.createElement
trick won’t work on them.
To really indicate that tight coupling between the
<article>
element and its
styling surrogate
<div>
, place their start/end tags immediately adjacent to each
other on the same line.
<article><div class=”article”>
...
</div></article>
VB.NET PDF - Annotate PDF with WPF PDF Viewer for VB.NET Users can set graph annotation properties, such as fill color, line color and transparency. Support to create a text box annotation to PDF file in .NET project.
acrobat fill in pdf forms; create a fillable pdf form from a pdf
41
10 NEw HTML5 sEMaNTiCs 53
Some new elements, such as
<hgroup>
, disallow
<div>
elements as immediate
children. For such cases — or, if you, prefer in general — you can place the extra
div outside the element instead. (The validator will quickly alert you of issues
such as this.)
<div class=”hgroup”><hgroup>
...
</hgroup></div>
Finally, if you have other classes you want to add to the new element, add them
to the extra
<div>
instead. For example, you’ll likely be using the hAtom micro-
format in addition to the
<article>
element. In that case, add the hAtom entry
class name
hentry
.
<article><div class=”article hentry”>
...
</div></article>
This is just the first of many bulletproof HTML5 techniques that are likely to
be developed as HTML5 is adopted and deployed on real-world web sites that
must continue working in browsers that lack support either for HTML5 or for
specific features.
fiGureS, MarkS, and daTeS
The last set of new HTML5 semantic elements are the
<figure>
,
<mark>
, and
<time>
elements.
picTureS are WOrTH a feW aSSOciaTed WOrdS
Another very common semantic that web authors have expressed for years is
the association between images and their captions. Some particularly beautiful
examples are on Edward Tufte’s home page:
38
54 HTML5 NOw
Part of Edward Tufte’s home page showing a series of figures with associated captions.
HTML5 introduces the
<figure>
and
<figcaption>
elements to explicitly
semantically connect images (or other types of figures) with their captions.
They’re fairly easy to use: simply wrap the caption for an image with the
<figcaption>
element and then put a
<figure>
element around both the
image and the
<figcaption>
.
<figure>
<img src=”figure1.png” alt=”abstract figure example”>
<figcaption>Figure 1</figcaption>
</figure>
One warning, though: The
<figure>
element has undergone quite a few
changes in the HTML5 specification. Recently, the decision made to wrap the
caption text in the
<figcaption>
element. Previously, attempts were made
to reuse the
<caption>
,
<legend>
, and even
<dt>
and
<dd>
elements — all of
which turned out to have too much legacy baggage in current browser imple-
mentations to be usable inside a new element.
28
10 NEw HTML5 sEMaNTiCs 55
The
<figure>
and
<figcaption>
elements may still be subject to change — at
least more so than the other new semantic elements. Thus, it may be worth
waiting until it is more clear that they have stabilized.
Marked TexT
HTML5 introduces the
<mark>
element to represent text that is highlighted for
some reason outside its current context or by someone other than the author. A
few cases where you might do this include:
■
Highlighting portions of a quote to draw attention to it but not imply
emphasis
■
Pointing out errors, perhaps in source code
■
Arriving at a page via a search engine then highlighting the terms that
brought the user to the page
The following example shows a page found through a web search, where
instances of the search terms are highlighted:
Brian Suda’s X2V project page with highlight on the search terms used to find the page.
The highlights at the top of the page might be marked up with the
<mark>
element:
41
56 HTML5 NOw
<p>Why are
<mark class=”t1”>hCard</mark>
<mark class=”t2”>hCalendar</mark>
<mark class=”t3”>X2V</mark>
<mark class=”t4”>microformats</mark>
highlighted?
</p>
Note the use of class names
t1 t2 t3 t4
to indicate the different search terms,
which can then be styled with different background color highlights to help
distinguish them on the page.
daTeS and TiMeS
Time and date information is published all over the web, perhaps most often in
event listings and date/timestamps of articles and blog posts.
You can use the new
<time>
element to mark up either 24-hour time, a date, or
date and time (with optional time zone).
<p>
When I said <time>13:37</time>,
I meant on <time>2010-03-03</time>,
as in <time>2010-03-03T13:37</time>,
in particular <time>2010-03-03T13:37-0800</time>.
</p>
The first two uses of the
<time>
element are quite readable and understandable
because more people worldwide understand 24-hour time and ISO dates than
any other single (and often culture-specific) date or time format. The latter two
examples use the ISO8601 datetime format (the last with time zone offset) and
are not very human friendly (except to programmers who deal with dates/times
on a daily basis).
To address this problem, the
<time>
element has a
datetime
attribute where
you can specify the machine readable ISO8601 date or datetime, while placing a
more human-friendly equivalent in the contents of the element.
53
10 NEw HTML5 sEMaNTiCs 57
We can update the previous example with
datetime
attribute for the latter two
instances:
<p>
When I said <time>13:37</time>,
I meant on <time>2010-03-03</time>,
as in <time datetime=”2010-03-03T13:37”>1:37pm on March 3rd,
2010</time>,
in particular <time datetime=”2010-03-03T13:37-0800”>1:37pm
PST</time>.
</p>
We’ve seen several examples where the
<time>
element works well to represent
date and time information. Several instances of dates and times, however, don’t
work with the
<time>
element.
The
<time>
element does not work for
■
imprecise times, such as “sometime this afternoon”
■
imprecise dates, such as “the most recent Ice Age”
■
dates before the introduction of the Gregorian calendar
■
dates in countries before they adopted the Gregorian calendar
Almost all of these examples are related to historical dates and times, which
often have additional semantics or information associated with them — such as
different possible dates, sources of evidence for the dates, etc. The
<time>
ele-
ment does not attempt to solve the larger problem of how to represent histori-
cal dates, and it frankly doesn’t make sense to use it for those cases.
Unfortunately, the
<time>
element currently has several seemingly artificial
limitations that could be fixed. The
<time>
element does not currently allow
usage in the following real-world web situations:
■
whole years, such as blog archives, years of birth
■
years and months, such as blog archives once again
■
month and day of a year, such as birthdays given without a year
■
week of a year, not commonly seen on the web
21
58 HTML5 NOw
The seemingly obvious and widespread use case of links to blog archives should
justify the first two cases mentioned, which have corresponding ISO8601 date
formats:
YYYY
and
YYYY-MM
.
Two blog archives with year and month archive links, and just month archive links with the
year implied.
Most social networks and online profiles permit the display of only the month
and day of a person’s birthday without the precise year. This, too, has a stan-
dard ISO8601 date representation:
--MM-DD
. I’ve documented the use cases
and numerous examples in the wild for all three of these additional uses on the
WHATWG wiki: http://wiki.whatwg.org/wiki/Time_element.
As HTML5 is still a working draft, this is one limitation/problem that we may be
able to fix. If you agree with the additional use cases outlined here, I encourage
you to visit the WHATWG wiki Time element page, create an account, and add
your use cases and opinions as well.
18
11 HTML5 NaTivE vECTOr graPHiCs 59
The WHATWG wiki page documenting additional use cases for the time element.
11
HTMl5 naTive vecTOr GrapHicS
The introduction of inline image support in the Mosaic web browser in the mid-
1990s breathed life into otherwise staid pages of hypertext. Yet other than a few
changes in bitmap formats, from GIF to JPEG and PNG, very few truly revolu-
tionary advances have occurred in web graphics. In recent years, SVG (W3C’s
Structured Vector Graphics format) has slowly been gaining adoption — for
example, for external images in Wikipedia pages.
HTML5 takes a major step forward with vector graphics support by incorporat-
ing two approaches:
■
Inline SVG: the ability to place SVG markup directly into your HTML
■
The
<canvas>
element: a graphics API for JavaScript
Documents you may be interested
Documents you may be interested
