...

View Full Version : Opinions on the best way to semantically mark up a wine list



SB65
11-19-2009, 09:14 AM
Interested in opinions on the best way to semantically mark up a wine list. The information is in the format:

Reds
Wine 1 - Description Price for 125ml Price for 175 ml Price for bottle
Wine 2 - ....
Whites
Winie 3....

My first thought was to use a definition list, but then I changed my mind and did it as a nested ul list as follows:



<ul id="winelist">
<li>Whites
<ul>
<li id="key125">125ml</li>
<li id="key175">175ml</li>
<li id="keybottle">Bottle</li>
<li>1. Cuv&eacute;e Jean Paul Sec
<ul>
<li>Soft, zesty and fresh. A great all-rounder. *1 France</li>
<li class="ml125">&pound;2.25</li>
<li class="ml175">&pound;3.75</li>
<li class="bottle">&pound;10.95</li>
</ul>
</li>
<li>2. Champs Du Moulin Colombard / Chardonnay
<ul>
<li>Fresh and fruity. Nicely aromatic due to the Colombard, and enjoyably textural due to the Chardonnay. *3 France</li>
<li class="bottle">&pound;13.50</li>
</ul>
</li>
</ul>
</li><!-- end whites -->
<li>Reds
<ul>
<li>5. Cuv&eacute;e Jean Paul Rouge
<ul>.....etc


I'm still not quite sure about this - perhaps a definition list within the ul would be better:


<ul>
<li>Whites
<ul>
<li>Wine 1
<dl>
<dt>Tastes nice</dt>
<dd>Costs this much for a glass</dd>
<dd>Costs this much for a bottle</dd>
</dl>
</li>
</ul>
</li>
<li>Reds</li>
</ul>

Kor
11-19-2009, 10:03 AM
First at all draw the way you need user to see the list. Afterward try to find the HTML/CSS solution for that.

Arbitrator
11-19-2009, 10:41 AM
Interested in opinions on the best way to semantically mark up a wine list. The information is in the format:

Reds
Wine 1 - Description Price for 125ml Price for 175 ml Price for bottle
Wine 2 - ....
Whites
Winie 3....Here's one way you might do this:


<h1>Reds</h1>
<div>
<h2><var>Wine 1</var></h2>
<p><var>This is a description.</var></p>
<table>
<thead>
<tr>
<th scope="col">Amount</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">125 <abbr title="Milliliters">mL</abbr></th>
<td><var>$125</var></td>
</tr>
<tr>
<th scope="row">175 <abbr title="Milliliters">mL</abbr></th>
<td><var>$175</var></td>
</tr>
<tr>
<th scope="row">Bottle (<var>225</var> <abbr title="Milliliters">mL</abbr>)</th>
<td><var>$225</var></td>
</tr>
</tbody>
</table>
<h2><var>Wine 2</var></h2>
<var>Another <code>table</code> Element</var>
<p><var>This is a description.</var></p>
</div>
<h1>Whites</h1>
<div>
<h2>Wine 1</h2>
<p>Description</p>
<var>Another <code>table</code> Element</var>
<!-- ... -->

You'd replace the var elements with their respective pieces of code and content. The h# elements would have their numbers adjusted based on the document hierarchy. The div elements aren't strictly necessary; I added them to make the document structure clear via indents.

There's no need to resort to lists when you can use basic layout elements to organize your data.


I'm still not quite sure about this - perhaps a definition list within the ul would be better:


<ul>
<li>Whites
<ul>
<li>Wine 1
<dl>
<dt>Tastes nice</dt>
<dd>Costs this much for a glass</dd>
<dd>Costs this much for a bottle</dd>
</dl>
</li>
</ul>
</li>
<li>Reds</li>
</ul>That's definitely a misuse of a definition list; how can "Tastes nice" be a header for pricing? That content doesn't have a direct relationship and is only indirectly related in that it all applies to "Wine 1".

SB65
11-19-2009, 10:57 AM
There's no need to resort to lists when you can use basic layout elements to organize your data.

But surely, semantically this is a list (and not a table). I've never really thought of lists as a "resort".


That's definitely a misuse of a definition list; how can "Tastes nice" be a header for pricing? That content doesn't have a direct relationship and is only indirectly related in that it all applies to "Wine 1".

Yes, quite right. I put that in very quickly to prompt discussion and didn't look too closely at what I'd got. Maybe this:


<ul>
<li>Whites
<dl>
<dt>Wine 1</dt>
<dd>Tastes nice</dd>
<dd>Costs this much for a glass</dd>
<dd>Costs this much for a bottle</dd>
</dl>
</li>
<li>Reds</li>
</ul>


Thanks for the input.

Arbitrator
11-19-2009, 10:29 PM
But surely, semantically this is a list (and not a table). I've never really thought of lists as a "resort".I meant "resort" in terms of being unnecessarily complex when there are simpler elements that can be used and I wasn't referring to the table versus lists but the heading elements versus lists. If this wine information is the page's primary/top-level data then I think this would be better laid out using the six heading elements.

The table can be replaced with something simpler although that simpler solution won't be quite as comprehensive from a semantic point of view. The table is essentially two lists (Amounts and Prices) that are explicitly associated via use of table heading elements and scoping. If I wanted to be more semantically specific, I would have added a caption too, but I forgot about the element when typing that code. (Keep in mind that you can style individual table elements such that they are hidden or appear as inline text if you're concerned about the appearance of the elements compared with list elements.)

Looking at your list, you've created a semantic structure where "Whites" is not explicitly a heading. That text is essentially equal to the definition list content rather than superior to it as it should be. If you would rather use lists, it would, at least, make more sense to make the outer list a definition list also since then "Whites" (etc) will then be explicitly marked as headings. Either that or use a heading elements around "Whites" (etc), but that would be inconsistent.

SB65
11-20-2009, 05:20 PM
OK, thanks for your thoughts. Instinct tells me this should be a list, so I'll stick with that approach I think.

jlhaslip
11-21-2009, 09:02 AM
<h3>Whites</h3>
<dl>
<dt>Wine 1</dt>
<dd>Tastes nice</dd>
<dd>Costs this much for a glass</dd>
<dd>Costs this much for a bottle</dd>
<dt>Wine 2</dt>
<dd>Tastes nice</dd>
<dd>Costs this much for a glass</dd>
<dd>Costs this much for a bottle</dd>
</dl>

<h3>Reds</h3>
... per above



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum