Links...Buttons... HTML5

Explorer ,
Oct 24, 2018 Oct 24, 2018

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.

Views

497

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Oct 24, 2018 Oct 24, 2018

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

Likes

Translate

Translate
Adobe Community Professional ,
Oct 24, 2018 Oct 24, 2018

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

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Oct 24, 2018 Oct 24, 2018

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 24, 2018 Oct 24, 2018

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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 24, 2018 Oct 24, 2018

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.

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Oct 24, 2018 Oct 24, 2018

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 24, 2018 Oct 24, 2018

Copy link to clipboard

Copied

LATEST

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.

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines