When it comes to making elements clickable in HTML, developers often find themselves at a crossroads. The choice between the <button>, <a> (anchor), or even <div> tags can be puzzling. In this article, we’ll delve into the nuances of creating clickable elements in HTML, exploring the pros and cons of different approaches and providing code examples to illustrate each point.
Table of contents
Open Table of contents
The Dilemma: <div> or Not <div>?
Before we explore the various tags, let’s address the temptation to use the <div> tag for clickable elements. While it might seem convenient, there are inherent issues, especially concerning accessibility. Screen readers won’t recognize a <div> as a button, making it less friendly for users with disabilities.
To address this, one might add role=“button” to the <div> tag, indicating to devices that it behaves like a button. However, this alone doesn’t make it function like a button. To make the <div> focusable, you can set tabindex=“0”. Additionally, you’ll need to manage focus styling to provide visual feedback when the element is focused.
<div role="button" tabindex="0" class="custom-button">Click me</div>This approach, though feasible, becomes increasingly complex and imperfect, prompting the search for a better solution.
The Hero: <button> Tag
The <button> tag emerges as the hero of clickable elements in HTML. However, using it comes with its own set of challenges. Styling buttons can be a pain, with default styles often resembling relics from older operating systems.
button.custom-button {
appearance: none;
/* Other styling properties */
}To reset default button styles, you can use appearance: none. However, it doesn’t automatically make the button a blank slate. You might consider using all: unset to reset all properties, but remember to provide your own focus styling for accessibility.
button.custom-button {
all: unset;
/* Other styling properties */
outline: 2px solid #007bff; /* Example focus styling */
}The Quirk: Default <button> Behavior in Forms
A quirk with the <button> tag arises when used within forms. By default, <button> elements act as submit buttons. To prevent unexpected form submissions, always explicitly set type=“button”.
<button type="button" class="custom-button">Click me</button>This ensures that clicking the button won’t trigger form submission, preserving the intended behavior.
Navigating to New Pages: <a> or <button>?
When dealing with clickable elements that navigate to other pages, the decision between the <a> and <button> tags becomes crucial. Simply adding a click event to update the URL is not recommended, as it hinders SEO and breaks user expectations for opening links in new tabs or windows.
<!-- Avoid this -->
<button onclick="window.location.href = 'new-page.html'">Go to Page</button>Instead, use the <a> tag for links, ensuring proper SEO and expected browser behavior.
<a href="new-page.html" class="custom-link">Go to Page</a>Conclusion
To address the need for consistency and flexibility, consider creating a button component that conditionally renders either an <a> or <button> based on the presence of an href prop.
<!-- Button Component -->
<a href="{linkUrl}" class="custom-button">Click me</a><!-- Button Component -->
<button type="button" class="custom-button">Click me</button>This approach allows developers to maintain a unified visual style while accommodating various use cases.
In conclusion, the choice of tags for clickable elements in HTML depends on the specific requirements and considerations. The <button> tag stands out for its versatility, but developers must be mindful of styling challenges and form behavior. Combining it with the <a> tag in a well-designed component can offer the best of both worlds, ensuring consistency and accessibility across different scenarios.