Copy link to clipboard
Copied
Hi,
I am accustomed to creating links using the <a> tag. Suddenly I am confused when creating a button and the proper way to apply a tag using HTML5.
I’ve read conflicting information about this and am wondering what is the proper way to do it. I’ve read that it should be within a <form> tag, wrap the <a> tag around the button, assign it to class=“button”,or it should be javascripted(??)
<a href="https://www.mywebsite.com/html/"><button>Visit our Website!</button></a> ??
Thanks for the help.
It varies by the context in which your button/link will be used.
How to create an HTML button that acts like a link? - Stack Overflow
Copy link to clipboard
Copied
It varies by the context in which your button/link will be used.
How to create an HTML button that acts like a link? - Stack Overflow
Copy link to clipboard
Copied
I'm using it to link to an external webpage. Does it matter if it's a link to another page on the same site?
Thanks Nancy!
Copy link to clipboard
Copied
Taffypro wrote
Does it matter if it's a link to another page on the same site?
Thanks Nancy!
No, just use:
<a href="about_Us.html">About Us</a>
Ooops ....for an 'external' linked page:
<a href="http://www.domain.com/page_name.html">External Link</a>
Copy link to clipboard
Copied
Did you look at the any of the answers in the StackOverflow link I posted?
Are you using Bootstrap?
Does link need to look like a button? If yes, use CSS to style it.
Copy link to clipboard
Copied
Taffypro wrote
Hi,
I am accustomed to creating links using the <a> tag. Suddenly I am confused when creating a button and the proper way to apply a tag using HTML5.
I’ve read conflicting information about this and am wondering what is the proper way to do it. I’ve read that it should be within a <form> tag, wrap the <a> tag around the button, assign it to class=“button”,or it should be javascripted(??)
<a href="https://www.mywebsite.com/html/"><button>Visit our Website!</button></a> ??
Thanks for the help.
Wrapping an anchor tag around a 'button' tag is not vaild any longer in html5, I think.
If you're linking to a page I would just use the normal anchor tag:
<a href="https://www.mywebsite.com/html/">Visit our Website!</a>
If you are doing something with jquery/javascript:
<button class="myButton">Click Me</button>
$('.myButton').click(function() {
alert('clicked');
}
or
var myButton = document.querySelector('.myButton');
myButton.addEventListener('click', myFunction);
function myFunction() {
alert('clicked');
}
You can use it also in a form and submit your form using javascript insead of a 'submit type' form field.
Copy link to clipboard
Copied
Both <button> and <a> are clickable elements. To place one inside of another makes no sense and will only confuse screen readers (including search engine bots).
Come to think of it, if <button> is not of the type 'submit' or 'reset' within a form, it becomes a useless clickable element unless we use JS to perform an action. Outside of a form element, it could be used to send the user to another link as per
<button onclick="window.location.href='http://www.hyperlinkcode.com/button-links.php'" role="link">Go to Hyperlink</button>
To keep screen readers happy, I think that it be made clear that this is a button that acts as a link.