Correct/semantic use of <figure>, <figcaption> and <dl>?

[imaginekitty]

While I no longer use the weather.com API I'm still wondering if I used <figure>/<figcaption> correctly and semantically in this instance. Here is an example of what the section used to look like:


Here is the relevant code:

<div class="weather">
	<header>
		<figure><img src="/ccimages/i32x32/14.png" alt="Weather at New Castle, PA (16101)" height="32" width="32" />
			<figcaption>Light Snow</figcaption>
		</figure>
		<aside><b>34°F</b><br />Wind chill: 29°F</aside>
	</header>
	<dl>
		<dt>Wind:</dt>
		<dd>calm</dd>
		<dt>Pressure:</dt>
		<dd>29.88 in and steady</dd>
		<dt>Humidity:</dt>
		<dd>87%</dd>
		<dt>Dew point:</dt>
		<dd>30°F</dd>
		<dt>UV index:</dt>
		<dd>0 Low</dd>
		<dt>Visibility:</dt>
		<dd>3.0 mi</dd>
		<dt>Sunrise:</dt>
		<dd>7:26 AM</dd>
		<dt>Sunset:</dt>
		<dd>5:46 PM</dd>
	</dl>
	<footer>Weather data provided by <a href="http://www.weather.com/" title="">weather.com®</a></footer>
</div>

Also, is that correct use of a Description List <dl>?

[Stevie D]

The use of <figure>, <img> and <figcaption> looks to meet the technical specs and be an appropriate use.

Use of <dl> looks absolutely fine – it's the sort of thing I use it for all the time.

[imaginekitty]

I was thinking it was correct when I wrote the page and then I read up on the HTML5 spec and began to question the decision. Who knows though, it could all change tomorrow.

Thanks.

[Stomme poes]

I don't understand why there's an aside in there. Is the weather inside a weather figure completely or only vaguely related to the weather??? Makes no sense to me. To me, the weather is the weather and this widget is all about the weather and not unrelated weather things like how it's going on the local golf course or a random trip to France.

Since I'm unable to tell what part of that widget is the picture, I would have written like this. (so I have no idea if the image has text, or is only the cloud, or what)

<aside class="weather">
    <header>
	<h1>Weather at New Castle, PA (16101)</h1>
	<ul>
               <li><img src="/ccimages/i32x32/14.png" height="32" width="32" alt="Light Snow"></li>
               <li>34°F</li>
               <li>Wind chill: 29°F</li>             
             </ul>
    </header>
	<dl>
		<dt>Wind:</dt>
		<dd>calm</dd>
		<dt>Pressure:</dt>
		<dd>29.88 in and steady</dd>
		<dt>Humidity:</dt>
		<dd>87%</dd>
		<dt>Dew point:</dt>
		<dd>30°F</dd>
		<dt>UV index:</dt>
		<dd>0 Low</dd>
		<dt>Visibility:</dt>
		<dd>3.0 mi</dd>
		<dt>Sunrise:</dt>
		<dd>7:26 AM</dd>
		<dt>Sunset:</dt>
		<dd>5:46 PM</dd>
	</dl>
	<footer>Weather data provided by <a href="http://www.weather.com/">weather.com ®</a></footer>
</aside>

I'm assuming the image has the words snow in it, and that the main weather is like three bullet points. If the image is only the clouds and we need the text afterwards, then I suppose you have a case for fig/caption

    <header>
	<h1>Weather at New Castle, PA (16101)</h1>
	<ul>
               <li><figure><img src="/ccimages/i32x32/14.png" height="32" width="32" alt=""><figcaption>Light Snow</figcaption></figure></li>
               <li>34°F</li>
               <li>Wind chill: 29°F</li>             
             </ul>
    </header>

Having alt+figcaption (which as a non-recognised tag should at least just be read out and treated like any inline... as if that figcaption were a span) makes it a bit redundant a bit redundant.

And actually, I only have header and footer in there to make HTML5 people think they're being more semantic, but it's actually a bunch of code every user agent just skips over anyway.

[imaginekitty]

I don't understand why there's an aside in there. Is the weather inside a weather figure completely or only vaguely related to the weather??? Makes no sense to me. To me, the weather is the weather and this widget is all about the weather and not unrelated weather things like how it's going on the local golf course or a random trip to France. ...

Off Topic:

Weather is an amalgamation of many measurable meteorological phenomena. You can't consider a measure of temperature "the weather". What is known as current conditions generally blends together many of the measurements into two sections; what you see and what you feel. The temperature component is related to but not necessarily a defining part of the general condition. In other words, it can be mostly sunny at 80°F or at -4°F. It can rain at 40°F or at 90°F. It can snow at -40°F or at 33°F. The range is too large to consider it a directly related part of the whole. Basically, the <figure> is what you can see and the <aside> is what you can't. The description list below are the major components that I like to look at to use to forecast possible upcoming conditions.

Oh, I see I put up the old version. I had taken the <br /> out long ago. It shouldn't be there.

The header section isn't a list, it's more of a statement ("It's snowing and it's cold.") that the description list below it is based upon.

... If the image is only the clouds and we need the text afterwards, then I suppose you have a case for fig/caption ...

Yes, the image is only the clouds. The text afterwards is required because some of the images are very similar.

[dresden_phoenix]

Technically speaking you have used the FIGURE and DL tag correctly.

But, I see what Stommey is saying, in this case. The problem with all semantics is that is relative. Semantic CANNOT work in a modular context. Insert semantically correct snippet within another and the context COULD change radically. I would re iterated since no MAIN topic has been CLEARLY DEFINED, to use ASIDE could be confusing. When you cut out all the code of the REST of the page; is the ASIDE an aside to the figure or to headline in the page (rhetorically speaking)? And doesnt it just seem odd to have an ASIDE within a HEADER??

I want to point out that the "figure" here seems purely decorational. It isnt a picture of actual snow , heck it actually carries the text "light snow". So it strikes me that you can adapt Stomme's list idea thus:

<ul class=" light-snow">
               <li>Light Snow></li>
               <li>34°F</li>
               <li>Wind chill: 29°F</li>             
      </ul>

At this point you can use CSS to IR the first LI, or hide it all together and use a sprite in the bg or the UL ( or even the first LI again) to show the graphic info of /ccimages/i32x32/14.png. This seems to me far more accessible and semantic, IMHO.

[imaginekitty]

Technically speaking you have used the FIGURE and DL tag correctly.

OK. That handles the topic at hand.

But, I see what Stommey is saying, in this case. ... I would re iterated since no MAIN topic has been CLEARLY DEFINED, to use ASIDE could be confusing.

Main topic: Current Meteorological Conditions

When you cut out all the code of the REST of the page; is the ASIDE an aside to the figure or to headline in the page (rhetorically speaking)?

Temperature, real and perceived, is an aside to the general conditions represented in the figure. See "off topic" block above.

And doesnt it just seem odd to have an ASIDE within a HEADER??

No. Maybe. Don't know. If you say this shouldn't be a <header> then I could agree with that. Let's call the <header> a <div id="currentconditions"> instead.

I want to point out that the "figure" here seems purely decorational. It isnt a picture of actual snow , heck it actually carries the text "light snow".

Illustrations are used in figures. I'm not sure I get the issue of this point. Are you saying figures can't be decorational?

So it strikes me that you can adapt Stomme's list idea thus:

<ul class=" light-snow">
               <li>Light Snow></li>
               <li>34°F</li>
               <li>Wind chill: 29°F</li>             
      </ul>

No, it's not a list of anything. General condition is an observation, temperature is a specific measurement. I covered that above.

At this point you can use CSS to IR the first LI, or hide it all together and use a sprite in the bg or the UL ( or even the first LI again) to show the graphic info of /ccimages/i32x32/14.png.

What does "IR" mean in "use CSS to IR the first LI"?

This seems to me far more accessible and semantic, IMHO.

I guess you'll first have to explain how it is inaccessible in its current form.

[Stomme poes]

Illustrations are used in figures. I'm not sure I get the issue of this point. Are you saying figures can't be decorational?

Hm, decorations are a tricky one, but for weather these kinds of images are usually considered content or like an icon. I believe they could be considered a figure. Figures are pretty much any non-text content and if it has a corresponding text component then it can get a figcaption. The idea of figcaption isn't much more than, "how can we state with HTML semantics that this bit of text is, specifically, describing or relating to this image/video/whatever"? For figures they've made what it refers to pretty broad: charts, graphs, videos, carousels, slides, images, etc. So I'd say if you want a "caption" for your image then figure would be appropriate. I don't see the point yet today of making any content image that's just by itself a figure though... maybe once it means something to user agents?

No, it's not a list of anything.

I used a list because it seemed to be a "bullet points" set of statements. They're not complete sentences and they have a grouping topic so I tried a list. I would not be against something else being used.

<aside><b>34°F</b><br />Wind chill: 29°F</aside>

This still makes no sense to me. It had better make perfect sense when it's all by itself, since the idea of an aside is that it can be completely separate and viewed without the rest of the content around it and still make sense on its own. The kinds of sidebars people tend to make into <aside>s now would be things like "Blog archive (list of blogs)", "3rd-party ads (list of ads)", etc. I mean, you don't need to read the current blog or whatever on a page to view the archive on its own. That aside would have a header in it (<h?>Blog Archive</h?>) and whatever other structure necessary.

I don't believe "34°F Wind chill: 29°F" by itself can be separated that much. It could be "<h?>Weather for [city], [date]</h?> Temperature: 34°F; Wind chill: 29°F" though. That bit could do well on its own and all the other information would just be additional and not necessary (which seems to be the reason you wanted to use the aside).

[imaginekitty]

<aside><b>34°F</b><br />Wind chill: 29°F</aside>

This still makes no sense to me. It had better make perfect sense when it's all by itself, since the idea of an aside is that it can be completely separate and viewed without the rest of the content around it and still make sense on its own. The kinds of sidebars people tend to make into <aside>s now would be things like "Blog archive (list of blogs)", "3rd-party ads (list of ads)", etc. I mean, you don't need to read the current blog or whatever on a page to view the archive on its own. That aside would have a header in it (<h?>Blog Archive</h?>) and whatever other structure necessary.

I suppose I was looking at it from this side of the screen. I guess I did put it on my site for me and no one else (certainly a mistake) so it does make sense to me by itself as I know what it represents. Good point.

I don't believe "34°F Wind chill: 29°F" by itself can be separated that much. It could be "<h?>Weather for [city], [date]</h?> Temperature: 34°F; Wind chill: 29°F" though. That bit could do well on its own and all the other information would just be additional and not necessary (which seems to be the reason you wanted to use the aside).

Yes, adding a header would allow it to make more sense to others. I think you reasoning to why I decided to use the aside is on point.

[dresden_phoenix]

about the header:

It's not about getting rid of it or not the issue. It's just that having an aside inside it makes no sense. a HEADER indicates a TOPIC an asside mean an unrelated sub ject to the topic. In a sense they would cancel each other out.


About the artwork:
Again, you have to consider the information ABOVE the design, keep in mind this is coming from an Art director , even! A line of text would serve the purpose better, which can then be covered over with a corresponding ICON, is what I was trying to say.

[deathshadow60]

I don't see a header there, or an aside...

It's just that having an aside inside it makes no sense. a HEADER indicates a TOPIC an asside mean an unrelated sub ject to the topic. In a sense they would cancel each other out.

Actually, an aside is a related topic that is separate from the main subject. The key part is it's supposed to be RELATED, but not important to, the main topic.

Which is why using it just for a sidebar is wrong... and why it's so vaguely defined but at the same time specific in use, the result is a confusing mess NOBODY can figure out how to use it properly... hence the notion of an ASIDE inside an ASIDE being outright silly and just more proof of just how stupid the entire concept of the new tags in HTML 5 are!

Personally, I dislike 'figure', you have a img, you've said it's a IMG with a IMG tag... so what does it need figure for? If the text is equivalent to the image, I'd have the text and then try to find some way to put the image in there as PRESENTATION for that text. (like say, a CSS background).

In any case, that most CERTAINLY IS NOT a header, as you aren't starting a section with it; that data is no different than the data that follows,you are just presenting it different... Which is also a mistake from a semantic point of view. It's also proof that the FOOTER tag is completely pointless as that's wasting semantics on something that probably doesn't need an extra wrapper around it.

HTML 5, what a load of....

[imaginekitty]

In production there was no header in the widget. It was originally <div id="cc"> so let's call that a non-issue ... yet again.