Basic standalone horizontal menu

Question

Here is what I'm starting with. It is just some <p> tags in a <div> tag.

   <div id='mi_control' class='radius_all'>
      <p id='mi_cover_l' class='menu_bottom small_dark'>Arcmarks &copy; </p>
      <p id='mi_about_l' class='menu_bottom small_dark'>About</p>
      <p id='mi_privacy_l' class='menu_bottom small_dark'>Privacy</p>
      <p id='mi_team_l' class='menu_bottom small_dark'>Contact</p>
      <p id='mi_arc_l' class='menu_bottom small_dark'>Developers</p>
    </div>

This post seems a bit unrelated as I just want to know the HTML/CSS structure for a horizontal menu.

Here is what it looks like and what I want it to look like:

Answer 1

Based on personal experience as well as this blog post, I'd recommend that you use an unordered list ul versus div and p, because it's a more accurate representation of the actual content you're marking up (semantic markup).

Here's a modified (div replaced with nav) snippet of the HTML from the article I linked to above:

<nav class="nav">
  <ul>
    <li class="home"><a href="#">Home</a></li>
    <li class="tutorials"><a class="active" href="#">Tutorials</a></li>
    <li class="about"><a href="#">About</a></li>
    <li class="news"><a href="#">Newsletter</a></li>
    <li class="contact"><a href="#">Contact</a></li>
  </ul>
</nav>

For the CSS to create a horizontal list, you could either use display: inline-block; or float: left; on the li items. If you need to support older browsers, like IE7, then you'll most likely want to use float. For more information on how to decide which technique to use, I'd take a look at this Stack Overflow question.

Answer 2

Hmm, when it comes to horizontal lists, there's not really a standard best-way-to-do-it, you've just gotta see which works best for your solution.

<div>s are one option, even replacing your <p> tags with <div>s.

Or, on the other hand, you could try a <ul>.

---

A <ul> is specifically for un-ordered lists, which seems to best fit the context of what you have.

They have a structure like:

<ul>
    <li>First Item</li>
    <li>Second Item</li>
</ul>

A vanilla <ul> is tagged with a bullet, but, you can use style elements of list-style: none on the <ul> and display: inline on the <li> to make it appear in a row.

.footer {
    list-style: none;
}
.footer li {
    display: inline;
}

---

Rather than attaching class='menu_bottom small_dark' to all of the elements, you can just write the CSS so that it puts that style on all children elements of the parent tag, and if you have certain elements that don't want to have that, you can just add :not(.escape) to the CSS and escape it.

Answer 3

You are using paragraph <p> markers for what is really just a word or very short link. Semantically, you should try to use HTML tags that best represent the element you are wanting to make. So I would use <p> for actal text paragraphs only.

In your case, what I think would make the most sense, semantically, would be to use <nav> elements to group together your navigation menu. You could also always use <div> which is the most generic element possible, although it is usually preferable to use something that represents better what the element is.

Some links:

• nav element on HTML5Doctor

• nav documentation on MDN

• HTML5 sectionining elements (for reference of other very useful semantic sectioning elements)

One example way to do this (there are others, as mentioned by others):

   <nav id='mi_control' class='radius_all'>
      <div id='mi_cover_l' class='menu_bottom small_dark'>Arcmarks &copy; </div>
      <div id='mi_about_l' class='menu_bottom small_dark'>About</div>
      <div id='mi_privacy_l' class='menu_bottom small_dark'>Privacy</div>
      <div id='mi_team_l' class='menu_bottom small_dark'>Contact</div>
      <div id='mi_arc_l' class='menu_bottom small_dark'>Developers</div>
    </nav>

---

One note, on using separate ids for each item: Unless you plan on each item to be uniquely different (and even that might not be a good use case), use classes instead of IDs.