HTML5 - Should i only use when needed?

What is best pratice ?

Should i use as many tags as possible to “label” my content - aside, article if i dont need it to style the page.

I was thinking i dont need the <figure> tag to style the image or anything, and it just take up space. Or is it a good way to tell google about my content ?

Like using :

<figure>
  <img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope">
</figure>

You don’t have to use any of the newer HTML5 tags, but when it makes sense using them to mark up your document is a good idea.

Your example of the figure tag isn’t strictly for styling per say (though you can of course apply CSS to the element), but sematics, to present an image with a caption that’s understandable by machines and accessibility related devices.

Also you don’t necessarily need an ALT attribute value when using FIGURE, FIGCAPTION makes more sense (cue a debate!)…

<figure>
  <img src="/orang-utan.jpg" alt="">
<figcaption>Baby Orang Utan hanging from a rope</figcaption>
</figure>

You don’t have to use any of the newer HTML5 tags, but when it makes sense using them to mark up your document is a good idea

Yes, but does it make sense to use <figure> here ?

Are we not trying to make the code as simpel as possible, no ?
This: <img src=“/orang-utan.jpg” alt=“Baby Orang Utan hanging from a rope”>
is more simpel then this :
<figure>
<img src=“/orang-utan.jpg” alt=“Baby Orang Utan hanging from a rope”>
</figure>

It depends on the context of the image.

The W3C spec for the FIGURE element says…

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

…in other words the image could be placed anywhere in the document without losing context.

On the other hand if the image was “inline” with the text flow then you could use IMG or FIGURE, in which case both are valid methods…

<h1>About Orang Utans</h1>

<p>They are mammals, blah blah</p>

<img src="/orang-utan.jpg" alt="Baby Orang Utan hanging from a rope">

<p>The often frequent forest and love to eat blah blah...</p>
<h1>About Orang Utans</h1>

<p>They are mammals, blah blah</p>

<figure>
<img src="/orang-utan.jpg" alt="">
<figcaption>Baby Orang Utan hanging from a rope</figcaption>
</figure>

<p>The often frequent forest and love to eat blah blah...</p>

Yes using an IMG tag is “simpler”, but it’s always worth considering your visitors who may have disablilities, or appreciate the extra detail :slight_smile:

I completely agree that using <figure> to pair an image with a visible caption is great, and that any HTML5 elements that allow the UA to programatically interpret content are a good thing … but one question is, is there any assistive technology out there that is actually making use of this facility yet?

I don’t know but I’d guess they will do eventually…

HTML 5 is expected to become a standard either later this year or early next year. Once that happens then browsers can start looking at supporting it properly. At the moment they don’t know which tags and properties will be removed - eg as hgroup already has. They will not want to get caught out like Microsoft did with IE5 and CSS2 where IE5 implemented the box model at the time it was released and then the standard was changed - leading to all the confusion where browsers need to look at whether the page has a doctype tag or not to decide which box model to use.

Only AFTER it becomes a standard will browsers start to consider supporting those tags that they didn’t decide to support for experimental pages while the standard is being developed.

:lol:

hgroup

IE5 box model

but one question is, is there any assistive technology out there that is actually making use of this facility yet?

They can’t unless the browser offers a relationship between the two to AT. Whether any do at this point, I don’t remember. There was a big longdesc debate recently where use of aria-labelledby for things like figcaptions were discussed, but each example had something stinky about it. Everyone seemed to disagree anyway. Right now as an AT user your best bet in knowing what the caption of an image or a figure is, is to manually sniff around there and assume the text with most proximity and contextually seems like it is probably the caption text.

This old link shows there was/is work on getting native roles to figure and friends, and that the Mozillians are busy there. But dunno who else.

Frankly I’m still waiting for browsers to properly support TITLE attributes so that they work with keyboard etc. But a decade has come and gone so I’m not holding my breath.

Only AFTER it becomes a standard will browsers start to consider supporting those tags that they didn’t decide to support for experimental pages while the standard is being developed.

Should be, Even after… because browsers support something either

  1. when they feel like it
    or
  2. they’re frightened of not supporting something they feel is important and OHNOES another browser already has support for it.

The above also holds for stuff not in the spec. See -webkit-blah-blah drama and the death of Presto.

Besides, if “the spec” means WHATWG, often whether or not someone supports something in the wild already is the basis for speccing it.