How to make a valid <li> link

B

7

6

I'm trying to make an unordered list where the list items are links, not just the text inside them. But this is not valid. When checking my code with https://validator.w3.org/check I receive the message

Element a not allowed as child of element ul in this context.

This is the code:

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
        ul {
            list-style:none;
        }
        a {
            text-decoration:none;
            color: #212121;
            font-size: 1em;
            font-family: Arial, Helvetica, sans-serif;
        }
        #container {
            padding:20px;
        }

        .valid {
            background-color:blanchedalmond;
        }

        .invalid {
            background-color:aquamarine;
        }

        .nav-item {
            width:120px;
            height:34px;
            margin:4px;
            line-height:34px;
            text-align:center;
            border: solid 1px #212121;
        }
    </style>
</head>
<body>

    <div id="container">
        <ul>
            <li class="valid nav-item"><a href="index.html">valid</a></li>
            <a href="index.html"><li class="invalid nav-item">invalid</li></a>
        </ul>
    </div>
</body>
</html>

The invalid arrangement of <a><li></li></a> is what I want to achieve behavior-wise with the entire <li> element being selectable as a link.

If I want to maintain valid code what is the best way to achieve a selectable <li>?

Beebread answered 18/6, 2015 at 10:49 Comment(6)

possible duplicate of Make whole <li> as link with proper HTML – Gal 18/6, 2015 at 10:52

you can add onClick event like this <li onclick='window.location.href="http://google.com"'>Click Here</li> – Swab 18/6, 2015 at 10:55

possible duplicate of Validation Error: Element a not allowed as child of element ul in this context. (Suppressing further errors from this subtree.) – Categorical 18/6, 2015 at 10:55

Five people managed to post the exact same answer while failing to answer the actual question. Incredible. The OP knows that <li><a></a></li> is the valid way of constructing elements - this is reflected as much in the original markup. The question is not how to nest the elements validly, it is how to achieve a certain layout (not performance) using valid markup. – Shiism 18/6, 2015 at 10:59

The question is not clear TBF. – Categorical 18/6, 2015 at 11:2

@Liam: The last two paragraphs seem abundantly clear to me, besides the use of the word performance where layout was meant. Perhaps it's the title that needs changing. – Shiism 18/6, 2015 at 11:3

M

24

This format is invalid

<a href="index.html"><li class="invalid nav-item">invalid</li></a>

Valid format is

 <li class="invalid nav-item"><a href="index.html">valid</a></li>

As for your concern anchor filling up the space of li, little css trick will solve it.

a {
 text-decoration: none;
 display: block;
 width: 100%;
 height: 100%;
}

Murrah answered 18/6, 2015 at 10:57 Comment(1)

thank you, I've been searching through many answers, this was the only one that solved my problem :) – Zingaro 12/2, 2020 at 22:15

S

7

There are two way you can get the li text clickable

1) Add onlclick event the the li like <li onclick='window.location.href="Your Link"'>Your Text</li>

2) Add a tag inside the li and add css to a tag as bellow

<li><a href='your link'>Your Text</a></li>

li a{
    display:block;
}

Second option cover inside area of li

Swab answered 18/6, 2015 at 11:1 Comment(0)

N

6

You cannot wrap your li in an anchor, if all you want is to make everything inside your li selectable rather than just the text, you can achieve this using CSS. Remove any defualt padding from your li tags, and make your anchors display block.

li {
    padding: 0;
}

a {
    display: block;
    width:120px;
    height:34px;
}

this will force the anchor to fill the li and so making the entire thing clickable.

Neslund answered 18/6, 2015 at 10:59 Comment(0)

S

-1

The anchor can not contain li as its child so you have to put the anchor tag inside the li element as:

 <ul>
    <li class="valid nav-item"><a href="index.html">valid</a></li>
    <li class="invalid nav-item"><a href="index.html">invalid</a></li>
 </ul>

Just replace your ul with this.
And add the css:

li a{
 display:block;
}

Sheelah answered 18/6, 2015 at 10:56 Comment(0)

E

-4

 <div id="container">
    <ul>
        <li class="valid nav-item"><a href="index.html" title="valid">valid</a></li>
        <li class="invalid nav-item"><a href="index.html" title="invalid">invalid</a></li>
    </ul>
</div>

This is the syntax where u can't get error messages

Earthshine answered 18/6, 2015 at 10:56 Comment(0)

L

-4

Replace your code with below code, you need wrap href element inside li.

<div id="container">
    <ul>
        <li class="valid nav-item"><a href="index.html">valid</a></li>
        <li class="invalid nav-item"><a href="index.html">invalid</a></li>
    </ul>
</div>

Lohr answered 18/6, 2015 at 10:56 Comment(1)

Can you please add your up vote comment why this answer is down vote. – Lohr 18/6, 2015 at 11:5

J

-5

Because you're missing to wrap a tag with li tag:

Replace this:

<ul>
   <li class="valid nav-item"><a href="index.html">valid</a></li>
   <a href="index.html"><li class="invalid nav-item">invalid</li></a>
</ul>

With this:

<ul>
   <li class="valid nav-item"><a href="index.html">valid</a></li>
   <li class="invalid nav-item"><a href="index.html">invalid</a></li>
</ul>

Janise answered 18/6, 2015 at 10:49 Comment(0)

Recommended topics

Hot tags