CODEWITHSUNDEEP
htmlcssvalidation
ryanr
ryanr

Reputation: 83

How to make a valid <li> link

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

Upvotes: 6

Views: 36311

Answers (7)

sonam gupta
sonam gupta

Reputation: 785

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

Upvotes: -1

Mitul
Mitul

Reputation: 3427

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

Upvotes: 7

Mike Oram
Mike Oram

Reputation: 765

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.

Upvotes: 6

Muhammet
Muhammet

Reputation: 3308

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

Upvotes: 24

stanze
stanze

Reputation: 2480

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>

Upvotes: -4

kaushik dey
kaushik dey

Reputation: 102

 <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

Upvotes: -4

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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>

Upvotes: -5

Related Questions