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


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 general questions regarding navigation of website. created same navigation webstite in 2 different ways. in 1. version used html tags <nav-ul-li> , in 2. version used html tag <div>. both version working navigation.

since newbie webdeveloping not see why should code navigation <nav-ul-li> tags since seem more difficult handle due standard properties. therefore, prefer go <div> solution.

does <div> solution cause troubles website?
or reason use <nav-ul-li> solution instead?

(the thing image far might cause lower google ranking since google can check if website has proper navigation based on <nav-ul-li> tags)

you can find code here: https://jsfiddle.net/uss8uxur/14/

i putting lengthier answer here includes comment mentioned above. think accessibility , screen readers stuff. take around microdata well, if need incorporate in page. using nav correct way since every browser or html reader has learnt understand nav means navigation. div multipurpose blocking element on page. using not cause trouble end user.

also, mentioned above, can , use div inside nav tag navigation. surely if requirements in hand not want cater assistive technology. article provided @alohci above mentions @ 1 point "you can leave experts" in case.

the overall point html 5, html has gone more semantic in meaning , people draft html have chosen provide specific meaning stuff used specific purpose. earlier, creating html table, div , span etc. might have used 

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

is equivalent to

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

so, yes more learn not boring person developing that. every part of html catering specific , identifiable purpose assistive things or person maintaining them. can put aria roles in these items assistive technology. html html 5, html has gone more practical theoretical. wants make sense of what's written in there present content.

not screen-readers, search-engines might using correct structure of html5 sooner or later, expected to. search engine algorithms change , evolve, , old html pages start less , less on web, 1 of things can ask strict adherence html5 structure seo rankings. right now, can speculate on that.

what suggest should use nav ul-li, ol-li kind of stuff navigation , use css styling (libraries, may bootstrap) make them way start use html5 correct semantic meaning. take time starting afresh hold on many things provided in html5.

to see (more or less) exact purpose of individual tags, can head on link below , check things in point no 4, elements of html

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


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more