Between curating sites for the HTML5 gallery and answering readers’ questions here at HTML5 Doctor, I see a host of HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them.
Avoiding common HTML5 mistakes
Your Questions #17
The clinic is packed this week with your HTML5 ailments! Today, we’ll discuss an HTML5 syntax dilemma, using sections within sections, link semantics, describing the contents of a figure, and marking up web app toolbars.
Your Questions #15
The clinic is busy as ever with more HTML5 ills. This week, we’ll cover marking up Wikipedia infoboxes, anchors in <hgroup>
, <figure>
for avatars, header(s), and how to use <code>
and <pre>
.
Your Questions Answered 9
The Doctor is in with another round of patient questions about HTML5. This week, we’ll cover offline viewing on requests, the drag-and-drop API, using href
on any element, the <figure>
element, and headings.
The figure & figcaption elements
In traditional printed material like books and magazines, an image, chart, or code example would be accompanied by a caption. Before now, we didn’t have a way of semantically marking up this sort of content directly in our HTML, instead resorting to CSS class names. HTML5 hopes to solve that problem by introducing the <figure>
and <figcaption>
elements. Let’s explore!
Hello, summary and figcaption elements
The details and figure elements are saved from the crazed pecadillos of legend, dd/ dt and caption by these two freshly-minted elements, sent from Hickson over the weekend.
dd-details wrong again
This article has been superseded. It’s here for historical reasons only. <details> now uses a <summary> element; <figure> uses <figcaption>. You may recall that I blogged about legend not being so legend as the heading element for details or figure. After enough noise was made the spec was changed so that the heading and contents […]
September HTML5 spec changes
September being one month before the HTML5 spec goes to last call in October, there’s been a few significant changes to the HTML5 spec that we wanted to briefly share with our patients.
Legend not such a legend anymore
Lately I decided I was going to recreate the interactive features of the details element using JavaScript (apparently the same day as fellow Brightonian Jeremy Keith). However I ran in to some very serious issues with the tag, so serious, in it’s current state, it’s unusable.