Semantics, writing, and best practices of link A

The semantics, writing style, and best practices of link A.
I saw this topic on JavaEye and the discussion was quite interesting so I couldn't help but join in. Semantic thinking First of all, links a and buttons button have semantics and cannot be replaced just for convenience of use. a is the abbreviation of anchor, which is an anchor point used for navigation or positioning. Typical usage is:
<a href="http://www.w3c.org/">W3C Web Site</a> <a name="anchor-one">This is the location of anchor one.</a> <a href="#anchor-one">Link to anchor one</a>
You can also specify the name and href attributes at the same time. This is basic knowledge. If you have any questions, please refer to the HTML 4.01 specification.
Let’s talk about buttons (including button and <input type="button/submit" />). Semantically, the button is part of the form, and the action it triggers is related to the form. If there is no form action at all, then a button should not be used. Here are some examples:

The above picture shows some links. Although they look like buttons, they are semantically a.

The display and sort buttons in the above picture are the operation forms. Semantically speaking, button or input is more appropriate. (Note: Taobao search results page currently uses a, this is for progressive enhancement considerations, which will be mentioned below)
In short, links and buttons have their own semantics and usage scenarios, and cannot be interchanged at will. The world of writing analysis is never that simple. In today's Web world where JavaScript is in full swing, link a is often used to trigger js events:
<a href="" onclick="something()">test 1</a> <a href="#" onclick="something();return false">>test 2</a> <a href="javascript: void(0)" onclick="something()">>test 3</a> <a href="javascript: void something()">>test 4</a>
First of all, the first way of writing is problematic in IE because IE will automatically complete the href.
The second way of writing directly blocks the default event in the onclick event, so the # in href="#" can actually be any value. The # is used to consider staying on the current page after clicking when there is no js (Note: when a is below one screen, this writing method will cause the page to scroll back to the top).
The third way of writing is that the href value is a javascript pseudo-protocol, and void is a unary operator in javascript (such as !, typeof). The function of the void operator is to execute only the following expression without returning any value. It seems that void(0) prevents the default event. In fact, the following expressions are all correct:
<a href="javascript: void(1)" onclick="something()">>test 3</a> <a href="javascript:;" onclick="something()">>test 3</a> <a href="javascript:" onclick="something()">>test 3</a> <a href="javascript: return true" onclick="something()">>test 3</a>
Because the default operation of a is the content of the javascript pseudo-protocol, adding void or not will not trigger other events. (Note: In Opera, when there is a return value in the pseudo-protocol, href will be changed, so we usually write void(0) or an empty statement)
After understanding the third way of writing, the fourth way will also be clear: href="javascript: void something()". One "advantage" of this way of writing is that when the mouse hovers, the user can see the function to be executed through the status bar. This may be a benefit for developers, but will it really increase trust for ordinary users? Or is it a sense of fear? Without data, no conclusion can be drawn.
In addition to the above writing method, another recommended writing method is to add a hook to a through class or id, and then add events through the hook in js. Reflection: I don't want to discuss which of the above writing methods is the best. Let's think about the origin of the problem: Why do we use a to trigger js events? The reasons I can think of are:

This will automatically have the mouse hover style. I can't think of any reason why everyone writes this way. Isn't this a very natural thing? Because IE6 only supports CSS style a:hover, and href cannot be empty
It can be seen that apart from the floating style, there is no substantial reason. Let's put aside the style issue for a moment and look at an example:

The above is the operation bar of Google Reader. If you are interested, you can use firebug to check it. The markup used is:

The hover style of the mouse is not a problem at all:

Just add cursor: pointer in css.
From the above example, we can draw a conclusion: if it is just to trigger a js action without any navigation or positioning semantics, span or other appropriate tags can be used. There is no need to use a incorrectly (using a will cause trouble: first, the default event will be removed, and second, the information in the status bar will confuse or even scare ordinary users).
Of course, if it is a link itself, and you just want to add some js logic before navigation, or apply it to form sorting, from the perspective of progressive enhancement, the best practice is to write the full href value to ensure usability even in browsers that do not support js. Best practices are not a summary or a final word. Best practices are just a set of principles that you should think about before writing code:

Use link a or button button, depending on the specific usage scenario. Button is an element related to the form. Do not abuse a. When you can't figure out what the href value is (no javascript pseudo-protocol, no lonely #), please use other tags and add events in js through hook. If it is indeed a link and there is an onclick event, please think about progressive enhancement to ensure the integrity of the href value.
Code has life, the kingdom of tags is a zoo, familiar with them, everything is cute.

<<: A detailed introduction to the Linux directory structure

>>: Getting started with JavaScript basics

Detailed explanation of Docker common commands Study03

Semantics, writing, and best practices of link A

Detailed explanation of Docker common commands Study03

Mysql practical exercises simple library management system

MySQL 8.0.19 installation and configuration tutorial under Windows 10

Solve the problem of MySQL using not in to include null values

Detailed explanation of the usage of scoped slots in Vue.js slots

Use ab tool to perform API stress test on the server

Detailed explanation of Mysql function call optimization

Detailed explanation of how to configure multi-threaded master-slave replication from MySQL 5.7 slave nodes

Tomcat reports an error when starting the springboot project war package: Error when starting the child

MySql grouping and randomly getting one piece of data from each group

Recommend

How to configure the Runner container in Docker

Docker View Process, Memory, and Cup Consumption

How to install and persist the postgresql database in docker

How to solve the problem that mysql cannot be closed

The combination and difference between ENTRYPOINT and CMD in dockerfile

Implementing password box verification information based on JavaScript

About the value transfer problem between antd tree and parent-child components (react summary)

Example code of javascript select all/unselect all operation in html

Understanding JSON (JavaScript Object Notation) in one article

In-depth understanding of the vertical-align property and baseline issues in CSS

How to install common components (mysql, redis) in Docker

Vue's guide to pitfalls using throttling functions

Nginx rewrite regular matching rewriting method example

How to install Docker on Raspberry Pi

Example of ellipsis when CSS multi-line text overflows