menu
vs

@sibertAug 18.2019

I am a bit confused which way to create a side nav menu:
Until now I have used the <a href> method:

<div class=”menu”> <a href=”#”>Something1</a> <a href=”#”>Something2</a> <a href=”#”>Something3</a> <a href=”#”>Something4</a> </div>

But many other uses the <li> way for this purpose:

<ul class=”menu”> <li><a href=”#”>Something1</a></li> <li><a href=”#”>Something2</a></li> <li><a href=”#”>Something3</a></li> <li><a href=”#”>Something4</a></li> </ul>

Which way do you prefer and why?
Which way is simpler if you should make dynamic menus and submenus (dropdown)?

to post a comment

HTML

12 Comments(s) _↴

@cootheadAug 18.2019 — #Hi there sibert,

using the **list element** is the **semantically

correct** coding method to use for **a list of links**.

This has absolutely nothing to do with simplicity

and there is no other method to use.

_coothead_

@codyhillAug 18.2019 — #@sibert#1607707 You need to use the second version.

UL = unordered list;

LI = list item;

An unordered list (ul) needs to have a list of items (li). The a tag just makes the li clickable.

@sibertauthorAug 18.2019 — #> @coothead#1607710 and there is no other method to use.

Why does w3school "recommend" not using lists:

https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp

@cootheadAug 18.2019 — #> @sibert#1607712

> **[color=#069]Why does w3school "recommend" this?[/color]**

What on earth has that site got to do with it ?

https://w3schools.com is not an authoritative resource in any way,

and has absolutely no connection with https://www.w3.org which

is and does.

**Further reading :-**

[url=https://www.quora.com/What-is-wrong-with-W3Schools-that-it-is-often-referred-to-as-a-bad-resource-for-learning]**[color=#069]What-is-wrong-with-W3Schools[/color]**[/url]

_coothead_

@cootheadAug 18.2019 — #Hi there sibert,

if you scroll down to the bottom of the w3schools page,

you will find this information...

>**[color=#069]Examples might be simplified to improve reading and basic understanding.

Tutorials, references, and examples are constantly reviewed to avoid

errors, but we cannot warrant full correctness of all content[/color]**

_coothead_

@JMRKERAug 19.2019 — #I believe a lot of your decisions as to which is better,

depends upon what you want to do.

Obviously if you make not changes in the CSS, the two menu present quite differently.

1. The first gives a horizontal display.

2. The second give a vertical display.

And you can add CSS to make either one look like the other.

Add/Sub the CSS lines to see the difference/sameness displays

<i>
 </i>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/&gt;
 &lt;title&gt; Menu Displays &lt;/title&gt;
 
 &lt;!--  test CSS changes
 &lt;style&gt;
 /* a { display: inline-block; width: 8em; }  /* spreads display *
 /* .menu a { display: block; }               /* makes vertical display */
 
 
 ul { list-style-type: none; }
 /* li { display: inline-block; }  /* default is vertical display */
 /* li { width: 8em;  border: 1px solid black; padding: 0.25em; } /* 
 &lt;/style&gt;
 --&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div class="menu"&gt;
 &lt;a href="#"&gt;Something1&lt;/a&gt;
 &lt;a href="#"&gt;Something2&lt;/a&gt;
 &lt;a href="#"&gt;Something3&lt;/a&gt;
 &lt;a href="#"&gt;Something4&lt;/a&gt;
 &lt;/div&gt;
 
 
 &lt;ul class="menu"&gt;              <br/>
 &lt;li&gt;&lt;a href="#"&gt;Something1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Something2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Something3&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;Something4&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

Bottom line: Use whichever best suits your current and possibly future needs.

Good Luck! :)

@sibertauthorAug 19.2019 — #> @coothead#1607713 What on earth has that site got to do with it ?

Asking for the "right way" (as a newbie) to do things may end up in opinions. Opinions are like the Mac vs PC war ending towards more confusion. I was a Mac Taliban before that could not see why others chose PC. Forced to work with PC i now realize that this is just another way to get the job done. Pure technical there are fewer restarts using Mac (not an opionion). Otherwise rather similar. :-)

There many who dislikes w3schools, but I have found no other place that is so well organized, simple and educational.

My question was pure technical. Pros and cons doing either way.

@sibertauthorAug 19.2019 — #> @JMRKER#1607724 Bottom line: Use whichever best suits your current and possibly future needs.

Thanks! A good explanation.

As a newbie on html I do not see what happens when the code gets more complicated. If either method has benefits when it gets dynamic or when using sub menus.

@tracknutAug 19.2019 — #You may want to read up on semantic html, when you get a chance. There is good value in writing your code in a semantic way, for its own readability for future edits, for folks using different screen readers that you're expecting, for screen scrapers that might be trying to figure out what the site looks like. Your first option, declaring a <div> named "menu", is not semantic at all - ie, the html doesn't give any hint that those four menu items somehow go together as a list of options that can be selected. The only hint is the id "menu", which might as well be "sdfhuslkd" as far as a screen reader is concerned. Putting them in a <ul> will create that list, and certainly is the better way. HTML5 also created the <nav> tag, which can also be used to semantically define a set of navigation links, so using <nav id="menu"> is an good way to group "menu things" (including things that are not just a simple <ul> list) together.

@sibertauthorAug 19.2019 — #> @tracknut#1607758 Your first option, declaring a <div> named "menu", is not semantic at all - ie, the html doesn't give any hint that those four menu items somehow go together as a list of options that can be selected.

Thank you! Good explanation. I have to learn "semantic" in several aspects. :-)

@siddhi_patelSep 17.2019 — #Hello sibert,

Your answer is you can use both method to design side navbar. but if you using the list element is the semantically correct method to use for list of link.

there is nothing with using <a href> method but it is bit more suitable method.

@HarshShahNov 21.2019 — #Hi

You should use <ul><li> for creating menu because it will help to add more styles to your menu. so i will suggest you to go for second option to creating menu which is using <ul><li>.

Hope this will help you.

Thank you.

Also in #HTML _↴

Restricting access to a webpage without agreeing to a consent form rem vs px?What is wrong with target="_blank"

Success!

Help @sibert spread the word by sharing this article on Twitter...

Tweet This

menu
vs

12 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

menu vs

12 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

menu
vs

12 Comments(s) _↴

Also in #HTML _↴