Oli
.jpI’ve written an article on extending HTML5 with microformats for HTML5Doctor.com:
HTML5 contains a bunch of new semantic goodness, but sometimes we need more semantics than what’s available. This is the first article in a series looking at various ways to extend HTML5 — first up, microformats.
As with the CSS selectors article, I wanted a summary of animatable CSS properties, so I’ve made a copy of the W3C one and reordered/tweaked it a little.
A table of browser scores for the version 2, score-out-of-300 The HTML5 Test, updated occasionally.
I wanted a summary of all the CSS selectors, so I’ve made a copy of the W3C one and reordered/tweaked it a little.
My third article for HTML5Doctor.com:
The
<ruby>,<rt>and<rp>elements allow us to add ‘ruby’ phonetic annotations in languages like Japanese and Chinese. Despite the terrors of internationalisation and patchy browser support — with a little fiddling and a lot of caution — this sexy threesome with adorable accents are ready to use now.
→ Read “The <ruby> element and her hawt friends, <rt> and <rp>” on HTML5Doctor.com…
My second article for HTML5Doctor.com:
Two more HTML4 presentational elements that have undergone transmogrification to have semantics in HTML5 are
<small>and<hr>.
My first article for HTML5Doctor.com:
While many HTML4 elements have been brought into HTML5 essentially unchanged, several historically presentational ones have been given semantic meanings. Let’s look at <i> and <b> and compare them to the semantic stalwarts <em> and <strong>.
→ Read “The <i>, <b>, <em>, & <strong> elements” on HTML5Doctor.com…
Firefox breaks HTML5-style block-level links (a link wrapping block not inline elements) when they contain HTML5 semantic elements. The link and first contained element are closed, and multiple new links are inserted. Wrapping the link content in a <div> can help, but the resultant behavior may still appear due to another bug (the infamous packet boundary bug).
A summary of some common misconceptions about HTML5, with answers and links to more information. An informal FAQ, if you will.
A look at the differences between a basic HTML 4 and XHTML 1 page and the same page using HTML5’s structural elements, plus the CSS/JS required for support in browsers, adding HTML5’s semantics via <div class=""> to get around ‘the IE problem’, and a summary of why you should be thinking about HTML5 now.
Investigating <nav>, <aside>, <figure> and <footer>, with a look at sectioning content, heading content and HTML5’s ‘outlines for free’.
Looking at the <header>, <hgroup>, <h1>-<h6> elements, with examples of <hgroup> use and a discussion of HTML5-style heading element levels (basically <h1> almost everywhere).
The first in a look at HTML5’s new structural elements; this article looks at the difference between <div>, <section> and <article>.
Updated! An in-depth look at why the W3C Validator lists This bug has been fixed! charset warnings & errors when using the HTML5 doctype, and what you should do about it.<meta charset="utf-8"> is good to go.
A concise list of class and id names based on HTML5 element names and general semantic structure. Also suitable for IE-friendly <div class="">-style HTML5.