The best possible structure for a restaurant menu

HTML & CSS
1

Hi,

I’m currently working on my first web site for a restaurant and I’m wondering what would be the best structure for the menu but have it semantically correct and SEO friendly as well.

<h1>Menu</h1>

<h2>Sandwiches</h2>
<strong>Country Sandwich<strong>
<p>Lettuce, tomato etc</p>

<h2>Fajitas & Quesadillas</h2>
<strong>Bacon Quesadilla<strong>
<p>smoked bacon and cheese etc…</p>

Can the above code be considered SEO friendly or it would be better to use tables or unordered lists?

How would you do it?

Can some give me some advice as to how a restaurant menu should be structured.

Thanks a lot!

2

I would argue that a combination of headlines and definition lists is the best approach:

<h1>Menu</h1>
<h2>Sandwiches</h2>
<dl>
 <dt>Club Sandwich</dt>
  <dd>Chicken, bacon, lettuce, tomato and curry sauce.</dd>
 <dt>BLT</dt>
  <dd>Bacon, lettuce and tomato.</dd>
</dl>

<h2>Fajitas &amp; Quesadillas<h2>
<dl>
 <dt>Bacon Quesadilla</dt>
  <dd>Smoked bacon and cheese.</dd>
</dl>

You can then style your dt as bold using CSS. Definition lists can be a bit tricky to style for some purposes, but you can also get some nice effects. If you wish, you can even manage a nice side-by-side, so that the ingredients are listen next to the dish, rather than below it.

3

Hmm, sounds like a good option.

Thanks a lot for your help!

4

Actually, I think your original is closer to semantically correct – but I’m overly paranoid about definition list abuse – mostly because it seems people dive for DL’s for all the wrong reasons.

the only thing wrong with your h2/p is the use of strong. That should be a h3. I say that since I assume you’d have more than one sandwich… and you’d probably have more information.


<h1>Menu</h1>

<h2>Sandwiches</h2>

<h3><span>Country Sandwich</span> $5.99<h3>
<p>
  Lettuce, tomato etc
</p>

<h3><span>Turkey Club</span> $4.99</h3>
<p>
  turkey, bacon, tomato and lettuce on toast with mayonaisse
</p>

<h2>Fajitas & Quesadillas</h2>

<h3><span>Bacon Quesadilla</span> $6.99</h3>
<p>
  smoked bacon and cheese etc&#8230;
</p>

Set the H3 to float wrap and text-align:right, then float the span left :smiley:

5

Bacon Quesadilla: is a term is it not?
Smoked bacon and cheese.: describes the term does it not?

Though I do think that the second level items such as; Bacon Quesadilla are more appropriate as headings, but in theory either approach could work.

6

I agree that your approach is valid as well, but I will argue that the definition list is semantical in this case. Definition lists are defined quite broadly in the documentation, in that the dd doesn’t have to be an actual definition of the dt, but should merely be closely associated with it.

7

Wow! thank you for the good examples, I think both examples are a lot better than my original approach so, now its just a matter of making my own decision.

Thanks a lot for the big help!