Links...Buttons... HTML5

[Taffypro]

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.

[Nancy OShea · Accepted solution]

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

[Taffypro]

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!

[osgood_]

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>

[Nancy OShea]

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.

[osgood_]

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.

[BenPleysier]

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.