seo Question posted in
Some basic information to get you started with this can be found here.

Navigation with <nav-ul-li> vs. navigation with <div> – SEO

1. VERSION (<nav-ul-li>):

HTML:

<nav>
  <ul>
    <li>1.1 Menu</li>
    <li>1.2 Menu</li>
    <li>1.3 Menu</li>
    <li>1.4 Menu</li>
  </ul>
</nav>

CSS:

ul {
 padding: 0;
}

li { 
 display: inline;
 width: 24%;
 float: left;
    border-style: solid;
    border-width: 1px;
    background-color: red;
}

2. VERSION (<div>):

HTML:

<div class="navigation">
     <div class="menu">1.1 Menu</div>
     <div class="menu">1.2 Menu</div>
     <div class="menu">1.3 Menu</div>
     <div class="menu">1.4 Menu</div>
</div>

CSS:

.navigation {
 width: 100%;
 float: left;
 margin-top: 5%;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

.menu {
 float: left;
 width: 24%;
    border-style: solid;
    border-width: 1px;
    background-color: green;
}

I have a general questions regarding the navigation of a website. I created the same navigation for a webstite in two different ways. In the 1. Version I used the HTML tags <nav-ul-li> and in the 2. Version I only used the HTML tag <div>. With both version I get a working navigation.

Since I am newbie to the webdeveloping I do not really see why I should code the navigation with the <nav-ul-li> tags since they seem to be much more difficult to handle due to their standard properties. Therefore, I would prefer to go with the <div> solution.

Does the <div> solution cause any troubles with the website?
Or what could be a reason to use the <nav-ul-li> solution instead?

(The only thing I could image so far is that it might cause a lower Google ranking since Google can only check if a website has a proper navigation based on the <nav-ul-li> tags)

You can also find my code here: https://jsfiddle.net/uss8uxur/14/

Tags:

2

Answers


  1. 0

    I am putting a lengthier answer here which includes my comment mentioned above.
    Think about accessibility and screen readers stuff. Take a look around microdata as well, if you need to incorporate that in your page. Using nav is the correct way since every browser or html reader has learnt to understand that nav means navigation. div is now just a multipurpose blocking element on page. Using it does not cause any trouble to the end user.

    Also, as you mentioned above, you can effectively and very easily use div inside nav tag for navigation. Surely do that if the requirements in hand do not want you to cater to assistive technology. As the article provided by @Alohci above mentions at one point “You can leave that to experts” in that case.

    The overall point is that with HTML 5, HTML has gone more semantic in meaning and the people who draft HTML have chosen to provide specific meaning to stuff used for specific purpose. Earlier, it was about creating HTML with table, div and span etc. What you might have used as 

    <div id="menu">
<div id="main">
<div id="aside">
<div id="page">
<div id="main-content">
<div id="main-content-part-one">

    is now equivalent to

    <nav>
<main>
<aside>
<page>
<article>
<section>

    So, yes its slightly more to learn but definitely not boring for the person developing that. But every part of your HTML will be catering a specific and easily identifiable purpose for assistive things or the person maintaining them. You can also put ARIA roles in these items for assistive technology. From HTML to HTML 5, HTML has gone more practical from theoretical. It wants to make sense of what’s written in there to present the content.

    Not all screen-readers, search-engines might be using correct structure of HTML5 but sooner or later, they are expected to. Search engine algorithms constantly change and evolve, and as old HTML pages will start to get less and less on web, one of things they can do is to ask for strict adherence to HTML5 structure for SEO rankings. Right now, we can only speculate on that.

    What i will suggest is that you should use nav with ul-li, ol-li kind of stuff for navigation and use css styling (libraries, may be bootstrap) to make them look a certain way but start to use HTML5 with correct semantic meaning. It will take some time for anyone starting afresh to get a hold on many things provided in HTML5.

    To see (more or less) exact purpose of individual tags, you can head over to link below and check things in point no 4, The elements of HTML

    http://w3c.github.io/html/index.html#contents

    Login or Signup to reply.
  2. 0

    In addition to the answer of Amit. According to the documentation of W3 about nav: “The tag defines a set of navigation links“, and W3 about div: “The tag defines a division or a section in an HTML document“. Element nav is a semantic element of HTML5. This element is specifically designed to include thematically related content. The element div has no value about the content contained. More details about these tags are provided by Mozilla’s documentation: “The HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes” and “The HTML element is the generic container for flow content and does not inherently represent anything“. With semantic elements, you segment and / or fragment the source code of your web page. Search engines and browsers make it easier to understand the structure of your web page. Semantic tags are machine-readable and help machine learning.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search