Html <nav> vs <ul> for nav bars

Question

Html <nav> vs <ul> for nav bars

Which better fits the new HTML5 standard for use in the navigation bar in a web page, the new HTML5 nav tag, or using the ul tag with css?

I would think the latter, because more browsers can use HTML 4.01 than HTML 5, although this gap may close a bit in recent years.

 <!--HTML5 Way -->
 <!DOCTYPE html>
 <html>
    <body>
      <nav>
         <a href="/html/">HTML</a> |
         <a href="/css/">CSS</a> |
         <a href="/js/">JavaScript</a> |
         <a href="/jquery/">jQuery</a>
     </nav>

   </body>
 </html>

 /*CSS way*/
 #topmenudiv ul{
    margin: 0;
    padding:0;
 }

 #topmenudiv li{
    list-style:none;
    font-weight:bold;
    font-size:0.9em;
    border-right: 1px solid #990000;
    height: 100%;
    padding:10px 20px 12px 20px;
    float: left;
 }


 <body>
        <div id="topmenudiv">
            <ul>
                <li>News</li>
                <li>Sports</li>
                <li>Weather</li>
                <li>iPlayer</li>
                <li>TV</li>
                <li>Radio</li>
                <li>More...</li>
            </ul>
        </div>
</body>

Can anyone provide a definitive answer to this? Through your experience, which one is better to use for a website?

+3

html css html5

Ryan J 12 jan. 15 at 2:38

source to share

4 answers

There won't be an absolute answer here, but I would like to approach this problem:

As a developer, I always try to use the latest technology (after it has been publicly tested and approved), regardless of whether it extends to the specific syntax of how I encode an HTML block, or how I choose a structure for a project. I would like you to use an element <nav>

for your main navigation. You are correct <nav>

- this is an HTML5 element that will only be recognized by browsers that support HTML5 (these are all major for now, returning a few major versions).

So ... what about older browsers that don't support HTML5, and even better, what about older browsers like IE <9 that don't even render HTML5 elements on the page correctly? It is for these cases that I recommend using HTML5 including script - which uses "hack" or as I like to say "Fix IE" so that even these browsers (yep IE6 +) will render your shiny new HTML5 elements correctly.

This article does some wonderful work summarizing the unknown HTML5 elements and fixes to work around older browser compatibility.

+2

Alex 12 jan. 15 at 2:48

source to share

semantic css
HTML5 nav

my answer relates to links. Many opinions are about browser compatibility. Moreover, I think the user experience is more important. This user interface is intended especially for people with audio visualization disabilities. Their device can help them read the page easily when you use the nav .

+1

Todd mark 12 jan. 15 at 2:56

source to share

You should put <ul>

in <nav>

Example:
<header> <nav> <ul> <li>Home</li> <li>About</li> <li>Contact us</li> </ul> </nav> </header

0

drymisty 12 jan. '15 at 3:17

source to share

Chuck dries · Accepted Answer · 2015-01-12T02:57:15+0000

To be honest, both work just as well. As of now, no one has implemented anything in any web browser that uses the new semantic tags in HTML5, and many tags are vague and ambiguous, and many people don't know how to use them. Speculation is not really very much. Tags like <article>

and <section>

can be used in many different ways (do you need to nest sections in divs for visual purposes? Should the <h#>

heading tag of a specific section go in or above it? Why some websites show articles next to sections in diagrams but indicate that article is the main content of the website?)

I am currently doing my best to just replace with <div>

more logical semantic tags wherever it makes sense. In your case, I would continue to use <ul>

for your links and put the list inside the tag <nav>

instead of the tag <div>

.

It is important to remember that in practice, all HTML5 semantic tags behave exactly the same as they mean replacing the standard meaningless <div>

. Non-HTML5 browsers will handle <nav>

other new elements like <div>

s.

An example for you (taken directly from the Mozilla Developer Network page for the navigation element ):

<nav>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</nav>

Html <nav> vs <ul> for nav bars

More articles: