html5 Archives - Broken Links Archive

Introducing HTML’s new template element

You may have heard of Web Com­po­nents, a suite of emerg­ing stan­dards that make it pos­si­ble to build secure reusable wid­gets using web plat­form tech­nolo­gies. One of the first specs to make its way into imple­men­ta­tion is HTML Tem­plates, embod­ied by the template ele­ment, which as I write this is imple­ment­ed in Chrome Canary and Fire­fox Nightly.

Read the full article

Primum non nocere

The Latin phrase used in the title of this post, pri¬≠mum non nocere, trans¬≠lates as:

First do no harm. 

It‚Äôs often said that this is part of the Hip¬≠po¬≠crat¬≠ic Oath, from the code of ethics fol¬≠lowed by med¬≠ical pro¬≠fes¬≠sion¬≠als. While that‚Äôs not cor¬≠rect, it‚Äôs a rule that‚Äôs gen¬≠er¬≠al¬≠ly con¬≠sid¬≠ered impor¬≠tant to fol¬≠low: do good, or at least do no harm.

Although what we do is not as crit­i­cal to soci­ety as the role of a doc­tor, I think we need to start con­sid­er­ing an oath like this for work­ing on the web. Let me explain why.

This week I‚Äôve seen two ‚ÄėHTML5‚Äô web¬≠sites which fea¬≠ture rich inter¬≠ac¬≠tions and ani¬≠ma¬≠tions; like Flash used to be, but now using open web tech¬≠nolo¬≠gies. This is a very good thing. How¬≠ev¬≠er, vis¬≠it them with JavaScript dis¬≠abled and you get a very dif¬≠fer¬≠ent expe¬≠ri¬≠ence: that is, noth¬≠ing, or next-to-noth¬≠ing. Lit¬≠er¬≠al¬≠ly. On one site I saw a logo and a mes¬≠sage telling me I need¬≠ed JavaScript; on the oth¬≠er, a blank screen.

If all of your con¬≠tent is in HTML, and styled with CSS, but you‚Äôre requir¬≠ing peo¬≠ple to use JavaScript before they can see it: you‚Äôre doing it wrong.

In order to ensure that we make web¬≠sites avail¬≠able to every¬≠one, regard¬≠less of brows¬≠er type or capa¬≠bil¬≠i¬≠ty, I would sug¬≠gest we come up with our own oath ‚ÄĒ per¬≠haps some¬≠thing like this:

First make your con¬≠tent accessible. 

This isn‚Äôt new, of course; this is basic stuff. But so keen are many of us to rush to take advan¬≠tage of all the shiny new¬≠ness of devices and fea¬≠tures, we‚Äôre for¬≠get¬≠ting to do the fun¬≠da¬≠men¬≠tals. We‚Äôre doing harm.

Styling HTML5 Form Validation Errors

Back in March I wrote about HTML5 Form val­i­da­tion and the prob­lem with the appear­ance of error mes­sages. I pro­posed a syn­tax for styling the error mes­sages, and short­ly after I pub­lished the post, I sub­mit­ted the pro­pos­al to the W3C via the www-style mail­ing list.

I‚Äôll dis¬≠cuss quick¬≠ly the result of that sub¬≠mis¬≠sion, but first I should men¬≠tion that I‚Äôve since found out that the Google Chrome devel¬≠op¬≠ers have already imple¬≠ment¬≠ed their own syn¬≠tax, and it‚Äôs not too far removed from what I pro¬≠posed. Before I get to that, how¬≠ev¬≠er, allow me to gripe.

Read the full article

HTML5 Form Validation

A lot of the atten­tion paid to HTML5 Forms has been cen­tred around the new input types. email, url, date, and the rest are all very con­ve­nient, but for me the real­ly use­ful fea­ture is the built-in val­i­da­tion. In case you’re not aware of it, the brows­er will now han­dle all of the val­i­da­tion that we used to use JavaScript for.

This is great for the future, but although you can start using these func¬≠tions now (in many browsers), they aren‚Äôt with¬≠out their draw¬≠backs ‚ÄĒ well, one big draw¬≠back real¬≠ly. I‚Äôm going to explain briefly the prob¬≠lem, and then pro¬≠pose a solution.

Read the full article

HTML5 for Web Developers

The WHATWG have released the HTML5 Edi¬≠tion for Web Devel¬≠op¬≠ers, which removes all of the over¬≠ly-tech¬≠ni¬≠cal details aimed at brows¬≠er mak¬≠ers and leaves the impor¬≠tant stuff you need to learn ‚ÄĒ and with a nice read¬≠able stylesheet applied.

Data Attributes in HTML and jQuery

Some­times the exist­ing HTML attrib­ut­es aren’t suf­fi­cient for describ­ing an ele­men­t’s con­tent. We can use class, ref, rel, title and more, but even so there are occa­sions where that’s not enough. HTML5 address­es this prob­lem with the intro­duc­tion of Data Attrib­ut­es, which allow you to add sim­ple meta­da­ta to indi­vid­ual ele­ments, large­ly for the pur­pose of pro­vid­ing infor­ma­tion to make JavaScript func­tions easier.

Read the full article



I‚Äôve updat¬≠ed my Speak¬≠ing page to include more con¬≠fer¬≠ences, more videos, and a lit¬≠tle on my speak¬≠ing require¬≠ments and pref¬≠er¬≠ences. I‚Äôm plan¬≠ning to cut down on the num¬≠ber of talks I give in 2014 (twelve is too many), but am always open to inter¬≠est¬≠ing offers and oppor¬≠tu¬≠ni¬≠ties, so please get in touch if you‚Äôre organ¬≠is¬≠ing an event.

[#] 1 Comment . More Asides.