Question About HTML for Restaurant Menus

Oh, you mean besides linking to a PDF? I kid. Though, not really. Unfortunately, a PDF has become the “menu solution” for many restaurant sites. This presents a host of issues, from accessibility to slow downloads, that can easily be avoided with good, semantic markup.

As a developer for Happy Cog, I worked on a site for Garces Restaurant Group this past year, where we used HTML, not a PDF, for the menus. This allows all users, including search engines, to access the content. It also means users don’t need to worry about having a PDF reader installed, nor do they need to wait for file downloads on their mobile devices.

Let’s take a look at the menu page featuring menus for brunch, dinner and lunch. Each menu is a section, with headings and narrative paragraphs. The actual dishes available are listed in an unordered list:

<section class="menu-panel">
  <h2>Brunch</h2>
  <p class="adorn-brdr-btm menu-time">…</p>
        
  <h3>Featured Items</h3>
  <p class="intro">…</p>

  <h4><span>First Course</span></h4>
  <ul class="menu-items">
    <li>
      <strong>Ignacio</strong>
      <span class="descript">Black Beans, Tomato, Queso Mixto, Jalapeño, Chile De Arbol, Radish  </span>
    </li>        
    <li>
      <strong>Traditional Guacamole</strong>
      <span class="descript">Cotija Cheese, House Made Tortilla Chips </span>            
    </li>
  </ul>       
 …
</section>

For the unordered list of menu items, we designate the dish name with the strong tag, while the description is indicated with a span. We also follow a slightly different convention for unordered lists in the Dinner Tasting Menu:

<aside class="tasting-menu">
  <h4><span>Chef's Tasting</span></h4>
  <p class="tasting-intro"> <span>Our tasting menus include 3 courses (about 3 plates per course) & dessert uniquely hand-selected by our Chef.</span></p>
  <ul class="tasting-options">
    <li>
      <h5>DIEGO RIVERA—45</h5>
      <p>Take a guided tour of our modern Mexican street food menu, featuring a variety our favorite dishes, without the tough decisions.</p>
    </li>            
    <li>
      <h5>FRIDA KAHLO—55</h5>
      <p>Elevate your experience with a selection of inspired Mexican plates & original off-menu, interpretations crafted by our Chef.</p>
    </li>   
    <li>
      <h5>TEQUILA PAIRING—25</h5>
      <p>A selection of tequila is expertly paired with the flavors of each course. </p>
    </li>  
  </ul>
  <p class="tasting-meta">(priced per person)</p>
</aside>

Here, the tasting menu is an aside of the dinner menu section.menu-panel. Additionally, the unordered list of menu items utilizes h5 for the item name and price, and a p is used for the item description.

The great thing about HTML is that there are times when different solutions are equally effective and even semantic. For example, I could see a menu being marked up as a definition list as well:

<dl class="tasting-options">
  <dt>DIEGO RIVERA—45</dt>
  <dd>Take a guided tour of our modern Mexican street food menu, featuring a variety our favorite dishes, without the tough decisions.</dd>

  <dt>FRIDA KAHLO—55</dt>
  <dd>Elevate your experience with a selection of inspired Mexican plates & original off-menu, interpretations crafted by our Chef.</dd>
   … 
</dl>

Which solution you choose depends on your overall goals. With the definition list example, we are limited to use the dt for the menu item name, and since you can’t nest heading tags in these elements, it may not be ideal if SEO and keyword exposure is a priority.

A simple unordered list allows us to markup menu items with h5s where we need, and still provides good semantic structure. Regardless of the ultimate HTML solution, using markup for menus is a heck of a lot better than hiding all that great content inside a PDF!