Posts Tagged ‘figure’

Avoiding common HTML5 mistakes

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.

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!

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.