CODEWITHSUNDEEP
html
Kalena
Kalena

Reputation: 21

Navigation links using <div><a> instead of <ul><li><a>?

I've learned to make the main navigation with a list like that: 

<ul>
    <li><a href="#">nav-item</a></li>
</ul>

Now additionally, I need two top navigations, one left for social buttons and another right for other things. Someone told me better to build those top navigations by 2 like that:

<div>
    <a href="a">top-nav-item</a>
</div>

And I'm confused. Why is that better? Could someone tell me the advantage of the second way?

Thank you~

Upvotes: 1

Views: 61

Answers (3)

minitauros
minitauros

Reputation: 2030

I would recommend using <nav> elements, which is HTML5 spec (see also here). Semantically it fits better with navigational elements, and it might help understand search engines better what elements of your website they are looking at. You can put <a> elements inside the <nav>. A search engine might be able to better understand that those are links to other pages, because that is what anchor elements are made for (linking to other pieces of content).

For how it looks, it doesn't matter; pretty much all elements can be made to look like a menu with buttons. Furthermore, search engines are pretty smart nowadays, and they will probably understand most of your website anyway, even if you don't use the proper elements all the time.

That being said, those elements are there for a reason, so why not use them?

The mozilla developer network's example that I reference above uses the following, but to me personally it does not necessarily always make sense to put everything in a <ul> element.

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Upvotes: 2

Ronak Chauhan
Ronak Chauhan

Reputation: 706

I have created example that you want please check below link. Click on Run.

.nav{float:left;}
.nav li,.social li{float: left;margin-right: 22px;list-style: none;}
.social{float:right;}
<header>
  <ul class="nav">
    <li>Home</li>
    <li>About us</li>
    <li>Contact</li>
  </ul>
  
  <ul class="social">
    <li>Facebook</li>
    <li>Google</li>
  </ul>
</header>

Upvotes: 0

Quentin
Quentin

Reputation: 944064

Why is that better?

It isn't.

HTML is a semantic markup language. It is designed to describe the semantics of your data.

You have a list of links.

The markup should express that it is a list of links not a series of generic blocks with links in them.

Upvotes: 1

Related Questions