10

Let's say I have a set of links, can I use <div> instead of <nav>?

<div>
  <ul>
   <li class="head_divider">...</li>
   <li class="head_divider">Text<br />Here</li>
   <li class="head_divider">...</li>
 </ul>

What is the difference between the two? they yield the same format/answer for me

Ian
  • 30,182
  • 19
  • 69
  • 107
Matthew Francis
  • 169
  • 1
  • 1
  • 8
  • 1
    Check http://stackoverflow.com/questions/23238344/div-vs-nav-tag-with-css-positioning and http://stackoverflow.com/questions/25329739/difference-between-nav-vs-div-navbar-in-bootstrap and http://stackoverflow.com/questions/18628097/whats-the-difference-between-using-nav-and-div-around-bootstrap-3-navbars – ketan Mar 19 '16 at 04:49
  • 2
    Possible duplicate of [Why to use HTML5 semantic tag instead of div](http://stackoverflow.com/questions/17272019/why-to-use-html5-semantic-tag-instead-of-div) –  Mar 19 '16 at 07:33

3 Answers3

11

  • <nav> meant for more semantic markup (letting the browser know) that those links aren't just normal links, they are a navigation menu. This can be useful for accessibility (tabs, mobile devices,browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.) and other things.

    For More reference on <nav> : https://www.w3.org/TR/html51/sections.html#the-nav-element

  • The <div> tag defines a division or a section in an HTML document. It is a block-level element that is commonly used to identify large groupings of content, and which helps to build a web page’s layout and design using CSS.

    For more reference on <div> : http://www.html-5-tutorial.com/div-tag.htm

When it comes to styling there is no big difference,

<nav>

<div>

AVI
  • 5,516
  • 5
  • 29
  • 38
2

Technically they work the same way, but for search engines that tells them there is a navigation area.

dnviveros
  • 60
  • 2
  • 1
    Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others – Bhavesh Odedra Mar 22 '16 at 07:14
0

I've done an example of full semantic HTML markup a couple of years ago and published it on github.

Take a look at the code https://github.com/samad-aghaei/Semantic-HTML5/blob/master/index.html

<nav>
<ul itemscope="itemscope" itemtype="http://schema.org/ItemPage">
    <li>
      <a itemprop="url" rel="nofollow" href="#" title="Facebook" class="icon-facebook">
      </a>
    </li>
    <li>
      <a itemprop="url" rel="nofollow" href="#" title="Twitter" class="icon-twitter">
      </a>
    </li>
    <li>
      <a itemprop="url" rel="nofollow" href="#" title="Google Plus" class="icon-gplus">
      </a>
    </li>
    <li>
      <a itemprop="url" rel="nofollow" href="#" title="LinkedIn" class="icon-linkedin">
      </a>
    </li>
    <li>
      <a itemprop="url" rel="nofollow" href="#" title="RSS Feed" class="icon-rss-1">
      </a>
    </li>
  </ul>

Samad Aghaei
  • 17
  • 3