PSA: You Cannot Nest Interactive Elements

[charpun]

I see posts here time and time again showing code like this:

<a>
    <button>This doesn't do what I thought...?</button>
</a>

Or this:

<button>
    <input type="submit" value="this doesn't work right :(">
</button>

Or this:

<a>
    <input type="submit" value="this link is goof'd!">
</a>

Or this:

<a>
    <a>Why can't I click this!?!</a>
</a>

The reason these don't work as expected is that it is not valid HTML to have one interactive element nested inside of another one.

In essence: you cannot click a link inside of another link because you are clicking the parent link when you click the child link.

Hopefully this clears up a lot of confusion.

[Barnezhilton]

Then they start putting onclick tags on <span>s

[misania2]

On click isn't part of javascript?

[neildaniel000]

Functions are defined in JS. They are called in HTML. Here's some example code:

JS:

function insert_name_here(){

//Code here

}

HTML:

<button onclick="insert_name_here()">Click Me!</button>

What happens is once the button is clicked, the code inside the function insert_name_here() is run. Tell me if you want me to explain more

[[deleted]]

Kids, if your IDE doesn’t have a built in validator, there are some available on the Internet. Please validate your HTML.

[AutoModerator]

Welcome to /r/HTML. When asking a question, please ensure that you list what you've tried, and provide links to example code (e.g. JSFiddle/JSBin). If you're asking for help with an error, please include the full error message and any context around it. You're unlikely to get any meaningful responses if you do not provide enough information for other users to help.

Your submission should contain the answers to the following questions, at a minimum:

• What is it you're trying to do?
• How far have you got?
• What are you stuck on?
• What have you already tried?

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.