Do I have to use
/
elements when I make navbars?

Question

Do I have to use ul/ol elements when I make navbars/other groups of links or it is optional?

Is it ok to replace this code

<div>
  <ul style="list-style: none">
    <li style="display: inline-block"><a href="#">fb page</a></li>
    <li style="display: inline-block"><a href="#">twitter account</a></li>
    <li style="display: inline-block"><a href="#">stackoverflow account</a></li>
  </ul>
</div>

by

<div>
    <a href="#" style="display: inline-block">fb page</a>
    <a href="#" style="display: inline-block">twitter account</a>
    <a href="#" style="display: inline-block">stackoverflow account</a>
</div>

?

I would stick with the `
`. But it can be done with `
` too... — Josef E., Jun 30 '14 at 20:29
Totally up to you. It's valid HTML, although not semantically correct. — j08691, Jun 30 '14 at 20:29
Nothing more than common practice. Build it however you like. — Turnip, Jun 30 '14 at 20:31

score 1 · Answer 1 · answered Jun 30 '14 at 20:32

1

The answer lies in using the correct semantics. The navigation is a list of links, thus we treat it as a list. <ul> and <ol> stand for unordered and ordered lists respectively. The <div> tag has almost no semantic meaning.

answered Jun 30 '14 at 20:32

nicholaschris

1,401
20
27

score 1 · Accepted Answer · answered Jun 30 '14 at 20:33

1

Structurally and theoretically speaking speaking, a menu is a list of links, so your markup should reflect it as a list of links. You can style it to make the effects of the list invisible in graphical browsers.

Practically speaking, structure is useful. Look at what happens if you don't have the list and you view the page without a stylesheet. Can you tell where one link ends and the next begins?

screenshot of lynx

answered Jun 30 '14 at 20:33

Quentin

914,110
126
1,211
1,335

so, theoretically, I can't omit list tags, even if I want to create an unilinear menu like in my exemple? – Jun 30 '14 at 20:41
Not if you want it to make sense. – Quentin Jun 30 '14 at 21:12

score 0 · Answer 3 · answered Jun 30 '14 at 20:32

0

It doesn't matter: you can use either <ul> or <div> but the actual symbol in <li> shall not be visible in menu. Rgds,

answered Jun 30 '14 at 20:32

Alexander Bell

7,842
3
26
42

score 0 · Answer 4 · answered Jun 30 '14 at 20:34

Short answer: No, you don't have to use them.

Long answer: The list tags (<ul>, <ol>) are traditionally used for the purpose of creating navigable menus and there are many available stylesheets that will correctly style them as menus, drop downs, etc. That said, this is only a common (though useful) convention. You don't have to follow the convention, but you will make your life (and more importantly, the life of any developer who comes after you) easier if you do.

Do I have to use / elements when I make navbars?

4 Answers4

Do I have to use
/
elements when I make navbars?