Element button must not appear as a descendant?-CodePudding

I'm trying to validate m HTML code and it keeps giving me an error

"the element (button) must not appear as a descendant of the (a) element"

This is what I have

<body>
<header>
    <nav>
        <ul class="nav_links">
            <li><a href="index.html">Home</a></li>
            <li><a href="history.html">History</a></li>
            <li><a href="visit.html">Visit</a></li>
        </ul>
    </nav>
    <a class="cta" href="contact.html"><button>Contact</button></a>
    </header>
    </body>

What can I do to sort this?

CodePudding user response：

Try doing something like this: <a href="https://stackoverflow.com" >Go to Stack Overflow</a> instead of adding a button element inside of the anchor element.

<body>
   <header>
      <nav>
         <ul class="nav_links">
            <li><a href="index.html">Home</a></li>
            <li><a href="history.html">History</a></li>
            <li><a href="visit.html">Visit</a></li>
         </ul>
      </nav>
      <a href="https://stackoverflow.com" class="button">Go to Stack Overflow</a>
   </header>
</body>

Example snippet:

Best of luck!

CodePudding user response：

I'd recommend you not to put a button inside of an anchor element as it won't really work. If you still want it to be a button element try using

<button onClick="window.location.href='https://youtube.com';">Lores Ipsum</button>

The onClick setting will just execute the js code written inside it, the code will redirect the user to the website you want (Apparently it's youtube.com) you can set it to whatever you want.

Here is an example of its usage:

<body>
<header>
    <button style="background-color: blue; border-radius: 10px; border: none;" onClick="window.location.href='https://youtube.com';">Lores Ipsum</button>
<header>
</body>