Skip to content

Instantly share code, notes, and snippets.

@murtaugh murtaugh/menu-items.md
Last active Dec 31, 2015

Embed
What would you like to do?
How would you mark up an item on a restaurant menu?

I was thinking about restaurant menus, and started wondering how best to mark up individual items on the menu. Assuming you're going to put the each item in an li one approach could be:

<li>
	<h2>Home-Style Burger</h2>
	<p>half-pound burger with grilled onions</p>
	<p class="price">$7.25</p>
</li>	

This offers some semantic structure, but is it enough? We could add some microdata:

<li itemscope itemprop="menu-item">
	<h2 itemprop="item-name">Home-Style Burger</h2>
	<p itemprop="item-description">half-pound burger with grilled onions</p>
	<p class="price" itemprop="item-price">$7.25</p>
</li>	

But again, is it enough? Swapping in a definition list might make sense:

<li>
	<dl itemscope itemprop="menu-item">
		<dt itemprop="item-name">Home-Style Burger</dt>
		<dd itemprop="item-description">half-pound burger with grilled onions</dd>
		<dd class="price" itemprop="item-price">$7.25</dd>
	</dl>
</li>	

As I'm thinking about this, I like the dl approach not just because it offers semantic meaning, but also because it gives me an additional element to hook styles on to, without resorting to a non-semantic element (although I think my fear of non-semantic elements is too strong).

What would you do?

@dalejcruse

This comment has been minimized.

Copy link

dalejcruse commented Dec 17, 2013

At TroquetBoston.com I used something like your first approach, but without the unordered list/list item construct.

@blainsmith

This comment has been minimized.

Copy link

blainsmith commented Dec 17, 2013

I would opt for either a UL or DL.

<ul>
    <li>
        <h2>Home-Style Burger</h2>
        <p>half-pound burger with grilled onions</p>
        <p class="price">$7.25</p>
    </li>

    <li>
        <h2>BBQ Bacon Burger</h2>
        <p>half-pound burger with a lot of bacon covered in BBQ sauce</p>
        <p class="price">$9.25</p>
    </li>
</ul>

OR

<dl>
    <dt>Home-Style Burger</dt>
    <dd>half-pound burger with grilled onions</dd>
    <dd class="price">$7.25</dd>

    <dt>BBQ Bacon Burger</dt>
    <dd>half-pound burger with a lot of bacon covered in BBQ sauce</dd>
    <dd class="price">$9.25</dd>
</dl>

I am more of a fan of simpler less-markup approach.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.