Ad

Navigation With Vs. Navigation With

- 1 answer

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/

Ad

Answer

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 ma 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

Ad
source: stackoverflow.com
Ad