CODEWITHSUNDEEP
htmlcsshtml-listsnavigationbar
Alireza_Ez73
Alireza_Ez73

Reputation: 139

Making navigation Bar's items html

I'm gonna to create a navigation bar using<nav> </nav>. but I don't know that should I use <Li></Li> and in it to make the items, or<a></a>is just fine?? and what is the difference between this two?? and which one is better?

<nav>
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#About">About</a></li>
    <li><a href="#Contact">Contact</a></li>
    <li><a href="#Buy">Buy</a></li>
</ul></nav>

or

<nav>
 <a href="#home">Home</a>
 <a href="#About">About</a>
 <a href="#Contact">Contact</a>
 <a href="#Buy">Buy</a>   </nav>

Upvotes: 0

Views: 316

Answers (3)

GOVINDARAJ
GOVINDARAJ

Reputation: 365

Output

A navigation bar is one of the main components of a website, in my opinion the most important one, it is in fact the first section that the user sees when he/she enter a website and it links to the other main parts.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><body>

<div class="w3-container">
  
  <div class="w3-bar w3-black">
    <a href="#" class="w3-bar-item w3-button w3-mobile w3-green">Home</a>
    <a href="#" class="w3-bar-item w3-button w3-mobile">About</a>
    <a href="#" class="w3-bar-item w3-button w3-mobile">Services</a>
    <div class="w3-dropdown-hover w3-mobile">
      <button class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
      <div class="w3-dropdown-content w3-bar-block w3-dark-grey">
        <a href="#" class="w3-bar-item w3-button w3-mobile">India</a>
        <a href="#" class="w3-bar-item w3-button w3-mobile">USA</a>
        <a href="#" class="w3-bar-item w3-button w3-mobile">UK</a>
      </div>
    </div>
  </div>
</div>

</body>
</html>

Upvotes: 0

Guillermo P
Guillermo P

Reputation: 73

You can use both of them, it depends of the result that you want to get. The tag ul its used for the creation of "unordered lists", which format by default the li tags inside it. One of the main differences that I think that you might be searching for, is that if you apply the display: flex; to the element, making the li elements show up one behind the other. Here I let you an example of how I apply it:

<div>
            <ul style="display=flex;">
                <li>
                    <a href="xxx"></a>
                </li>
                <li>
                    <a href="xxx"></a>
                </li>
                <li>
                    <a href="xxx"></a>
                </li>
            </ul>
</div>

Check https://www.w3schools.com/css/css_navbar.asp for a more visual examples.

Upvotes: 1

Jorge Guzm&#225;n
Jorge Guzm&#225;n

Reputation: 139

Both are ok if you do what you realy need to do, but as the partner says, semantically speaking, the first one is the correct option, the browser and the users will thank you if you choose this option :).

This link is a good reference for a correct use of the semantic html and all its tags:

https://www.w3schools.com/html/html5_semantic_elements.asp

Upvotes: 0

Related Questions