html 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


On Adobe Muse

Today Adobe released a pre¬≠view of their new WYSIWYG web¬≠site cre¬≠ator, Muse. Short¬≠ly after, I had a good old moan about it on Twit¬≠ter. Not, as you may think, because I feel threat¬≠ened by web¬≠site cre¬≠ation being made easy ‚ÄĒ it‚Äôs been easy for ages, but ‚Äėeasy‚Äô does¬≠n‚Äôt always mean ‚Äėgood‚Äô ‚ÄĒ but because it gets a few fun¬≠da¬≠men¬≠tal things bad¬≠ly wrong.

My code purist side reject¬≠ed it because the markup it out¬≠puts is hor¬≠ren¬≠dous; if you don‚Äôt believe me, take a look at the code for one of their exam¬≠ple sites, ‚ÄėLucid Syn¬≠er¬≠gy‚Äô. My edu¬≠ca¬≠tor side reject¬≠ed it because it teach¬≠es you noth¬≠ing about how a web page is made; I learned to code by using Microsoft Front¬≠Page many (many) years ago, and under¬≠stood HTML by edit¬≠ing the source of the doc¬≠u¬≠ment and tweak¬≠ing it until I got it the way I want¬≠ed ‚ÄĒ but Muse has no code view, so this is made very difficult.

But the real prob¬≠lem with Adobe Muse is deep¬≠er than that: it‚Äôs that all seman¬≠tic sense is com¬≠plete¬≠ly removed from the page. There are no head¬≠ings, no lists, all text is in p ele¬≠ments, inline styles are applied with span rather than em/i/b, etc; this gives no struc¬≠ture, no mean¬≠ing, no about¬≠ness to your page, which at the very least means penal¬≠ties for SEO.

And worse still is that there’s no doc­u­ment flow; all the ele­ments you add to the page are posi­tioned rel­a­tive­ly to their par­ent and fol­low no par­tic­u­lar order, which is pret­ty bad for search engine spi­ders (and hence your SEO), but absolute­ly ter­ri­ble for vis­i­tors using assis­tive technology.

It’s the prod­uct of a com­pa­ny that cares only about appear­ance, and noth­ing for con­tent. As @paulrobertlloyd said on Twit­ter:

It’s not that the code Adobe Muse gen­er­ates is ugly, it’s that it’s meaningless.

The issue with the lack of seman­tic ele­ments is not insur­mount­able, it just needs some work by Adobe before the final release. The lack of doc­u­ment flow and con­tent order is more seri­ous, how­ev­er, and will need a com­plete rethink; I hope that this happens.


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 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


HTML5 block-level link bug in IE7+

HTML5 allows the use of block ele¬≠ments inside the a tag, which was not per¬≠mit¬≠ted in HTML4. This means that you can wrap a link around whole sec¬≠tions of markup, mak¬≠ing all of the child ele¬≠ments of the a become the link. You use it like so:

<a href="http://example.com">
  <div>
    <h3>I'm an example</h3>
  </div>
</a>

You can begin to use this straight away, as every brows¬≠er sup¬≠ports it ‚ÄĒ although you must be wary of one rather glar¬≠ing bug in Inter¬≠net Explorer.

Read the full article


Older

Aside

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.