Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Unordered lists are often created with the intent of using them as a menu, but an <code>li</code> list item is text. Because the list <code>li</code> item is text, the mouse pointer will not be an arrow, but an "I cursor". Users are accustomed to seeing a pointing finger for a mouse pointer when something is clickable. Using an anchor tag <code>a</code> inside of the <code>li</code> tag causes the mouse pointer to change to a pointing finger. The pointing finger is a lot better for using the list as a menu.</p> <pre><code>&lt;ul id="menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Menu Item 4&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>If the list is being used for a menu, and doesn't need a link, then a URL doesn't need to be designated. But the problem is that if you leave out the <code>href</code> attribute, text in the <code>&lt;a&gt;</code> tag is seen as text, and therefore the mouse pointer is back to an I-cursor. The I-cursor might make the user think that the menu item is not clickable. Therefore, you still need an <code>href</code>, but you don't need a link to anywhere.</p> <p>You could use lots of <code>div</code> or <code>p</code> tags for a menu list, but the mouse pointer would be an I-cursor for them also.</p> <p>You could use lots of buttons stacked on top of each other for a menu list, but the list seems to be preferable. And that's probably why the <code>href="#"</code> that points to nowhere is used in anchor tags inside of list tags.</p> <p>You can set the pointer style in CSS, so that is another option. The <code>href="#"</code> to nowhere might just be the lazy way to set some styling.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload