4
\$\begingroup\$

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:

footer

\$\endgroup\$
  • \$\begingroup\$ Is the first entry ("Arcmarks" + copyright) supposed to be a link, too? \$\endgroup\$ – unor Aug 28 '15 at 19:34
  • \$\begingroup\$ This question has been mentioned on Meta. \$\endgroup\$ – 200_success May 17 '16 at 17:28
8
\$\begingroup\$

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.

|improve this answer|||||
\$\endgroup\$
  • 2
    \$\begingroup\$ +1 for the ul, but a div isn't really appropriate. nav is the semantically correct element. \$\endgroup\$ – RubberDuck Aug 22 '15 at 18:02
  • \$\begingroup\$ Why did you wrap the <ul> tag in any tag? - whether <div> or <nav> \$\endgroup\$ – cade galt Aug 22 '15 at 18:24
  • 1
    \$\begingroup\$ @cadegalt Good practice. A div doesn't say much about the contained content, but nav does. "The HTML Navigation Element (<nav>) represents a section of a page that links to other pages or to parts within the page: a section with navigation links." - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav \$\endgroup\$ – Lauren Aug 22 '15 at 18:27
  • 1
    \$\begingroup\$ It also makes it easier to apply styling to the section. You may have other uls that you want to style differently. \$\endgroup\$ – RubberDuck Aug 22 '15 at 18:29
  • 1
    \$\begingroup\$ @cadegalt - A <nav> element has a built-in ARIA role that, among other things, carries a known user-agent behaviour (with different behaviours for different user-agents, of course). It doesn't take a lot of effort to make a site/page accessible at that level, and designing for accessibility is, as often as not, a matter of applying appropriate semantics rather than taking any heroic measures. And never forget that "accessibility" and "good SEO practices" are pretty much synonyms; if you can make a screen reader or a Braille terminal happy, you can make Google or Bing ecstatic. \$\endgroup\$ – Stan Rogers Aug 23 '15 at 6:15
5
\$\begingroup\$

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.

|improve this answer|||||
\$\endgroup\$
5
\$\begingroup\$

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:

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.

|improve this answer|||||
\$\endgroup\$
  • \$\begingroup\$ Beat me to it. nav is the right element to use here. \$\endgroup\$ – RubberDuck Aug 22 '15 at 18:00
  • \$\begingroup\$ So much opinion in web development - I've heard <p> , <div>, and <nav>, and <li> I don't think it matters. There is no semantically correct element, if there was it would be called menu item <mi>. That seems to be the concept to grasp - use a semantically useful tag if it exists, otherwise use a generic tag. \$\endgroup\$ – cade galt Aug 22 '15 at 18:21
  • \$\begingroup\$ Thats not true @cadegalt. nav is the semantically correct element to use for a navigation section. \$\endgroup\$ – RubberDuck Aug 22 '15 at 18:30
  • \$\begingroup\$ I thought it was obvious that I was referring to each individual menu item. Are you suggesting that I use <nav> for each menu item? \$\endgroup\$ – cade galt Aug 22 '15 at 18:34
  • \$\begingroup\$ Let me revise my answer a bit to clarify usage \$\endgroup\$ – Phrancis Aug 22 '15 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.