html Archive

Introducing HTML’s new template element

You may have heard of Web Components, a suite of emerging standards that make it possible to build secure reusable widgets using web platform technologies. One of the first specs to make its way into implementation is HTML Templates, embodied by the template element, which as I write this is implemented in Chrome Canary and Firefox Nightly.

Read the full article


On Adobe Muse

Today Adobe released a preview of their new WYSIWYG website creator, Muse. Shortly after, I had a good old moan about it on Twitter. Not, as you may think, because I feel threatened by website creation being made easy – it’s been easy for ages, but ‘easy’ doesn’t always mean ‘good’ – but because it gets a few fundamental things badly wrong.

My code purist side rejected it because the markup it outputs is horrendous; if you don’t believe me, take a look at the code for one of their example sites, ‘Lucid Synergy‘. My educator side rejected it because it teaches you nothing about how a web page is made; I learned to code by using Microsoft FrontPage many (many) years ago, and understood HTML by editing the source of the document and tweaking it until I got it the way I wanted – but Muse has no code view, so this is made very difficult.

But the real problem with Adobe Muse is deeper than that: it’s that all semantic sense is completely removed from the page. There are no headings, no lists, all text is in p elements, inline styles are applied with span rather than em/i/b, etc; this gives no structure, no meaning, no aboutness to your page, which at the very least means penalties for SEO.

And worse still is that there’s no document flow; all the elements you add to the page are positioned relatively to their parent and follow no particular order, which is pretty bad for search engine spiders (and hence your SEO), but absolutely terrible for visitors using assistive technology.

It’s the product of a company that cares only about appearance, and nothing for content. As @paulrobertlloyd said on Twitter:

It’s not that the code Adobe Muse generates is ugly, it’s that it’s meaningless.

The issue with the lack of semantic elements is not insurmountable, it just needs some work by Adobe before the final release. The lack of document flow and content order is more serious, however, and will need a complete rethink; I hope that this happens.


Styling HTML5 Form Validation Errors

Back in March I wrote about HTML5 Form validation and the problem with the appearance of error messages. I proposed a syntax for styling the error messages, and shortly after I published the post, I submitted the proposal to the W3C via the www-style mailing list.

I’ll discuss quickly the result of that submission, but first I should mention that I’ve since found out that the Google Chrome developers have already implemented their own syntax, and it’s not too far removed from what I proposed. Before I get to that, however, allow me to gripe.

Read the full article


HTML5 for Web Developers

The WHATWG have released the HTML5 Edition for Web Developers, which removes all of the overly-technical details aimed at browser makers and leaves the important stuff you need to learn – and with a nice readable stylesheet applied.


Data Attributes in HTML and jQuery

Sometimes the existing HTML attributes aren’t sufficient for describing an element’s content. We can use class, ref, rel, title and more, but even so there are occasions where that’s not enough. HTML5 addresses this problem with the introduction of Data Attributes, which allow you to add simple metadata to individual elements, largely for the purpose of providing information to make JavaScript functions easier.

Read the full article


HTML5 block-level link bug in IE7+

HTML5 allows the use of block elements inside the a tag, which was not permitted in HTML4. This means that you can wrap a link around whole sections of markup, making all of the child elements 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 browser supports it – although you must be wary of one rather glaring bug in Internet Explorer.

Read the full article


Older

Aside

I’ve updated my Speaking page to include more conferences, more videos, and a little on my speaking requirements and preferences. I’m planning to cut down on the number of talks I give in 2014 (twelve is too many), but am always open to interesting offers and opportunities, so please get in touch if you’re organising an event.

[#] 1 Comment . More Asides.