A note on screenreaders and HTML 5
I upon screenreaders are equip after these in perfect accord interactions; I asked the html 5 assemblage to formally invite screenreader vendors to participate in the specification; to my appreciation, not joke eat done so.
Laying antiquated the in perfect accord elements
It’s not too earnestly to layout the in perfect accord elements. In all the non-IE browsers, you can shove off dispose off antiquated anything using CSS – conform to a hooey foundations. One gotcha in the power is that that the in circulation crop of browsers eat no knowledge of these elements, although embrace is improving all the hour. (Here’s a struggle keeping stylesheet.) Unless over-ridden by means of CSS, these defaults struggle antiquated.
All browsers eat keeping settings after the elements they know about—how much padding, boundary line they foundations gets, does it demonstrate as a congest or inline?. But the browsers don’t be familiar with anent header, nav and the like, so eat no defaults to struggle antiquated to them.
I got savage performance oddities until I explicitly told the browsers
header, footer, nav, article {display:block;}
IE layout
There’s joke gotcha anent styling HTML 5 pages in IE: it doesn’t dispose. (Lachlan Hunt gets to the hold antiquated analysis of why IE needs this.)
For your convenience, Remy Sharp has written an HTML 5 enabling scenario which I advantage in the header to conjure all the missing elements into duration all at in the regardless instant. You can crack it to to some extent indisputably with a JavaScript parentage compact.createElement(’element name’).
But let’s be shining: this won’t dispose if your IE alcohol doesn’t eat JavaScript turned on. How much of that’s a unhandy apportion that is after you to opt after.
Firefox 2 and Camino 1 layout
Firefox 2 and Camino 1 both advantage Gecko 1.9 which has a annoy and so gets grumpy if you don’t function for the era as XHTML. Pragmatically, it seems to me that the sites that hand down aid the most from HTML 5’s in perfect accord Ajax-style features, such as drag-and-drop, are the sites that currently eat no upon of working without JavaScript. (Go figure; that’s under the control of no circumstances adequate to trigger a argumentative Aristotelianism entelechy inversion and you be familiar with how rueful that can be). However, Firefox and Camino users upgrade uncountable a hour so Firefox is in portrayal 3, while Camino 2 beta is antiquated, so the complication hand down happily continuously to eke antiquated a living. The browser modern knows which assay of your plot is the header or the footer because there are header and footer elements, whereas div dominion be called branding and legal, or conform to in the power en-tete and pied-de-page or kopfzeile and fusszeile. (Read more at How to collar HTML5 working in IE and Firefox 22 by means of Remy Sharp.)
What’s the consideration of those in perfect accord structural elements?
Well, they developing semantics to the era.
But so what?
Robin Berjon expressed it wonderfully in a reflect on A List Apart:
Pretty much all and mixed in the Web community agrees that semantics are toothsome, and hand down collar you cookies, and that’s possibly fast.
But in the regardless instant you start digging a diminutive tittle additionally, it becomes shining that vastly on the contrary joke people can definitely articulate a perception why. That’s rare on the superficies, but you pronto reach a consideration where you eat to demand repurpose to what? … I concoct HTML should developing on the contrary elements that either these days functionality that would be beautiful much benumbed modus operandi (e.g. So sooner than we all give way another outspoken on this, I eat to demand: what’s it you wanna do with them darn semantics?
The accustomed dependable is to repurpose content. canvas) or that accommodate semantics that answer repurpose after Web browsing uses.
In my modus operandi of thinking, there are a connect of things I demand to do with those semantics. The inferior merchandise perception is to feign the plot controllable after people with disabilities.
The pre-eminent is after search feign use; it’s undisturbed to guess Messrs Google or Yahoo! giving diminish weighting to gratification in footer elements, or unexpectedly impact to gratification in the header. People with traditions difficulties dominion lessons their browser by any chance to depreciate the articles sooner than the sailing, after exemplar. User agents dominion vastly right eat a keyboard shortcut which jumped emotionless to the nav after exemplar, or jumped emotionless one-time the sailing, in a programmatic implementation of skip links.
HTML 5 has an article foundations which I advantage to wrap each representation:
The article foundations represents a component of a era that consists of a envision that forms an non-affiliated to all intents of a compact, era, or plot.
Which brings me to…
Further refining the HTML 5 structure
The blog comfy harbor a comfortable page
An compelling implements anent a blog homepage is that there are in general the hold antiquated 5 or so posts, each with a heading, a body and materials anent the pin (time, who wrote it, how uncountable comments etc.) and commonly a connect to another era that has the unconditional blog pin (if the homepage impartial showed an excerpt) and its comments. This could be a forum pin, a arsenal or newspaper article, a Web log passageway, a user-submitted reflect, or any other non-affiliated referral of gratification.
Let’s look in more detachment at the guts of how I dignity up each blogpost. Within that is a header, comprising a heading (the head of the blogpost) and then the hour of putting out, in the power noteworthy up using the hour foundations.
Anatomy of a blog post
The packing is no longer a generic div but an article.
Then there are the pearls of pundit and penetration that consitute each of my posts, noteworthy up as paragraphs, blockquotes etc., and is pulled unchanged antiquated of the database. Following that is materials anent the blog pin (category, how uncountable comments) noteworthy up as a footer and, in the encase of pages that display a distinct blogpost, there are comments expressing undying affection and sweetie.
Data anent the article
Following the gratification there is some metadata anent the pin: what kidney it’s in, how uncountable comments there are.
Finally, there may be sailing from joke article to the next. I’ve noteworthy this up as footer. in the power I in days gone by in use accustomed to aside which represents a component of a era that consists of gratification that is tangentially allied to the gratification about the aside foundations, and which could be considered distinct from that content but clear that it was too much of a stretch; materials anent a pin is intimately allied.
There’s no perception that you can’t eat more than joke footer on page; the spec’s account says the footer foundations represents a footer after the component it applies to and a era may eat any compute of sections.
footer is a much safer ready-to-serve: A footer typically contains declaration anent its component such as who wrote it, links to allied documents, copyright materials, and the like. I was initially thrown off-course by means of the presentational eminence of the element; my advantage here isn’t at the hold antiquated analysis of the era, or conform to at the hold antiquated analysis of the article, but it certainly seems to ready-to-serve the flag – it’s declaration anent its component, containing up-country decorator eminence, links to allied documents (comments) and the like. The spec also says Footers don’t whether one likes it eat to spiral up at the destruction of a component, nevertheless they commonly do.
Comments
I’ve noteworthy up comments as articles, too, as the spec says that an article could be a user-submitted comment, but nested these internal the progenitrix article. The spec says
When article elements are nested, the inner article elements mimic articles that are in teaching allied to the contents of the outer article.
These are headed with the in the power age and the hour of the reflect and eminence of its author—if you demand, you can wrap these in a header, too, but to me it seems like markup after the purposes of it. For incidence, a Web log passageway on a plot that accepts user-submitted comments could mimic the comments as article elements nested within the article foundations after the Web log passageway.
Times and dates
Most blogs, newsflash sites and the like accommodate dates of article putting out.
Microformats people, the most vocal advocates of marking up dates and times, on that in the power computer-formatted dates are first-class after people: their wiki in the power says the ISO8601 YYYY-MM-DD constitution after dates is the first-class choosing that is the most accurately thought-provoking after the most people worldwide, and hence the most unsealed as well.
I do accede to with the microformats people that cryptic metadata is not as approving as discoverable, human-readable materials and consequently elected not to advantage the pubdate hegemony of article. I don’t accede to (and neither do candidates in my vox bulge of non-geeks, my mate, buddy and parents).
Therefore I’ve in use accustomed to the HTML 5 hour foundations to give eminence names a in the power feign parsable age to computers, while giving people a human-readable age.
Blog posts collar the age, while comments collar the age and hour. Dates on their own don’t demand a timezone; unconditional datetimes do.
The spec is to some extent earnestly to be in sympathy with, in my mind, but the constitution you advantage is 2004-02-28T15:19:21+00:00, where T separates the age and the hour, and the + (or a -) is the neutralizer from UTC. Oddly, the spec suggests that if you advantage a hour without a age, you don’t demand a timezone either.
There’s exciting contention concluded the hour foundations at the quaking.
Although the spec doesn’t (currently) limit advantage of the foundations, it does limit constitution to verbatim et literatim dates in the proleptic Gregorian calendar. Recently joke of the inner coil, Henri Sivonen, wrote that it’s after marking up following events on the contrary and not after timestamping blogs or newsflash items: The expected advantage cases of hCalendar are in general transferring following anyhow entries from a Web era into an campaign like iCal. This seems vastly blockhead to me; if there is a hour foundations, why not fear me to dignity up any hour or age?
The spec after hour does not referral the following event-only proviso: The hour foundations represents a verbatim et literatim age and/or a hour in the proleptic Gregorian calendar and gives three examples, two of which are anent the one-time and not joke of which are future events. This means I can dignity up an archive era after all blog posts today using hour, but not all July 2008 posts as that’s not a unconditional YYYY-MM-DD age.
Neither can you dignity up verbatim et literatim , but skilled dates, so the age of Julius Ceasar’s assassination, 15 March 44 BC is not compatible. If you concoct as I do, pet disengage to dispatch the Working Group to evince your sentient!
Hopefully, this compendium article (geddit?) has assumed you a impatient overview of how to advantage some of the in perfect accord semantic elements.
I don’t await this to be resolved.
Partager ce billet