Error occurred when switching from <a> to <button>

Bugs
1

Dear admin !

There was an issue when I tried to convert the tag to a < button>. Specifically, when set as a < button>, the URL links cannot be clicked. When switched back to the tag, everything works fine, but it causes errors in Google PageSpeed tools.

Thank you !

0
2

Hi @NHViet,

I believe there may be a confusion here, as href isn’t a <button> attribute meaning that it isn’t valid HTML.

Could you possibly provide more information on the reason you are using <button> for a link?

Thank you in advance.

3

Dear Araminta !

When I use the < button > attribute, there is no error when using Google’s inspection tool. However, when I use the < a > attribute, an error occurs as shown in the picture. How should I address this?

Thank you !

1
11609×1052 58.9 KB

4

Can you please provide a demonstration of how and where you set up your link, as it seems the href attribute (the actual link) is missing on your link wrapper.
It’s also helpful if you could provide a screenshot from this element on the frontend with reference to the dev tools, inspecting the element.
Please make sure to use the <a> tag for your link, not the <button> one.

Proper usage of <a> and <button> tag

Use an anchor tag (<a>) when you want to create a hyperlink that navigates to another page, file, or location within the same page. The anchor tag can be used for:

  • Linking to another page with the href attribute.
  • Linking to a specific section of a page using a fragment identifier (e.g., #section).
  • Initiating downloads of files with the download attribute.
  • Creating mailto links to open the default email client with the mailto: protocol.
<!-- Link to another page -->
<a href="https://www.example.com">Visit Example.com</a>

<!-- Link to a section on the same page -->
<a href="#section1">Jump to Section 1</a>

<!-- Download a file -->
<a href="/files/example.pdf" download>Download PDF</a>

<!-- Email link -->
<a href="mailto:someone@example.com">Send Email</a>

Use a button tag when you want the user to perform an action that doesn’t navigate away from the current page, like submitting a form, or triggering some JavaScript functionality. The button tag is used for:

  • Submitting forms.
  • Performing actions when clicked, using JavaScript event listeners.
  • Controlling interactive elements on a web page.
<!-- Submit button in a form -->
<button type="submit">Submit</button>

<!-- Button that triggers JavaScript -->
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

While both can be styled similarly and sometimes can be used interchangeably with JavaScript, choosing the right element is important for semantic accuracy and accessibility.

5

Dear Marius

I sent you a video link to illustrate it more clearly for you. You may notice that if I use the < a > tag, an error appears on Google. When switching to < Button >, the issue is resolved, but it cannot be clicked.

Link video: https://youtu.be/3sc2Ie-p8J4

Thank you !