SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The best possible structure for a restaurant menu

    Hi,

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

    Code:
    <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!
    Thank you very much!!!

  2. #2
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    I would argue that a combination of headlines and definition lists is the best approach:

    Code html4strict:
    <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.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  3. #3
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, sounds like a good option.

    Thanks a lot for your help!
    Thank you very much!!!

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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…
    </p>
    Set the H3 to float wrap and text-align:right, then float the span left

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,184
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by deathshadow60
    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.
    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.
    The only code I hate more than my own is everyone else's.

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.
    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.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    SitePoint Evangelist fs_tigre's Avatar
    Join Date
    Feb 2009
    Location
    Close to Chicago, Illinois
    Posts
    517
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!
    Thank you very much!!!


Bookmarks

Posting Permissions

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