How to make a valid
link

Question

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>?

score 24 · Accepted Answer · answered Jun 18 '15 at 10:57

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%;
}

answered Jun 18 '15 at 10:57

Muhammet

3,288
13
23

1

thank you, I've been searching through many answers, this was the only one that solved my problem :) – Normajean Feb 12 '20 at 22:15

score 7 · Answer 2 · answered Jun 18 '15 at 11:01

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

score 6 · Answer 3 · answered Jun 18 '15 at 10:59

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.

sonam gupta · Answer 4 · 2015-06-18T11:10:50.137

-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;
}

edited Jun 18 '15 at 11:10

answered Jun 18 '15 at 10:56

sonam gupta

775
6
17

score -4 · Answer 5 · answered Jun 18 '15 at 10:56

 <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

score -4 · Answer 6 · answered Jun 18 '15 at 10:56

-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>

answered Jun 18 '15 at 10:56

stanze

2,456
10
13

Can you please add your up vote comment why this answer is down vote. – stanze Jun 18 '15 at 11:05

score -5 · Answer 7 · answered Jun 18 '15 at 10:51

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>

How to make a valid
link

7 Answers7

Linked

How to make a valid link

7 Answers7

Linked

How to make a valid
link