Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts

    Opinions on the best way to semantically mark up a wine list

    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:

    Code:
    <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:

    Code:
    <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>
    Last edited by SB65; 11-19-2009 at 08:21 AM.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    First at all draw the way you need user to see the list. Afterward try to find the HTML/CSS solution for that.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by SB65 View Post
    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:

    Code:
    <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.

    Quote Originally Posted by SB65 View Post
    I'm still not quite sure about this - perhaps a definition list within the ul would be better:

    Code:
    <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".
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    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:

    Code:
    <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.

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by SB65 View Post
    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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    OK, thanks for your thoughts. Instinct tells me this should be a list, so I'll stick with that approach I think.

  • #7
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    Code:
    <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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •