Hi
Looking for some tips how to correctly (semanticly) markup the content in the image.
Thx in advance
What have you got so far?
Nothing really, was thinking heading, list items in divs but that doesnt relate the left column to the right.
This isn’t a site where we write the code for you, sorry to sound blunt but for us to help you we need what you have done so far so we can assist you with making it better. We are not here to do the work for you.
Never crossed my mind that someone would wrtie the code for me, Im just looking for pointers to correctly markup the section of the page as its so bespoke. I dont think this forum is exclusivly for “whats wrong with my code” kind of Q and A, I assume that theoretical questions around markup questions can be asked ???
HTH
No need to get all moody, if you take a step back and read your first post you essentially imply you want us to write something for you just because of your short and sweet wording and the image. Now because you and I got off on the wrong foot i would like to rectify this and assist you, in my option the easiest and most semantic markup i see fit would be a definition list aka <dl>.
They work in all browsers but sometimes in IE they can be a pain but overall would be the best option for you in my opinion.
I would do it as a <table> with <th> for the top row, that’s for sure.
Beyond that, I can see two plausible routes.
-
Each type of cheese/wine in a cell (using <td rowspan=#> for the cheeses, with the type marked up by <b>.
-
Each cheese type in a cell, and all accompanying wines in the same cell. Use <dl> within each <td>, with <dt> for the type of cheese/wine and <dd> for the list of varieties within each type. (Technically you could use multiple <dd>s but I probably wouldn’t go that far).
(using <td rowspan=#> for the cheeses, with the type marked up by <b>.
Why? Don’t we have
<dl>
<dt>Hard Mild</dt>
<dd>Lancashire, Cheshire, Caerphilly</dd>
</dl>
or something similar? What’s the b going to do?
Oh wait, one or the other? Since there’s still a good content relationship between cheese type and cheese examples, even a <h?> to <p> or <h?> to <ul> setup would still give more (correct) content structure.
Or, we don’t know why it’s bold, but whether it was or not, there’s still a relationship there that we can mark up in other ways.
Totally agree on the table… can’t think of a way to not use a table while still having the two top headers head each list of header/list pairs.
I wouldn’t have said the cheese/wine types were headings, and I think it would be wrong to use <h*> elements for them (although I accept that it is arguable, and I won’t go to war over it). It’s a classic example of where a list heading element would be perfect, but we don’t have such a tool at our disposal.
Yes, you could use list items (whether <ul><li> or <dl><dd>) to mark up the wines and cheeses within each category, but I’m always slightly wary of using them in that way, because you want a comma-separated list, which means making them inline elements and using generated content to get the commas. Sure, it’s possible, but it isn’t rock solid and there are browsers out there that will barf it up and make a complete pig’s breakfast of it. I know you shouldn’t use markup to get a particular output format, but sometimes it’s better to be practical and accept that the most semantically correct markup doesn’t give the best results consistently enough, and that a “second-best” semantic form actually works better in real-world deployment…
Looks like the image is gone?