Semantics, writing and best practices of link A

Link A's semantics, writing and best practices.

Seeing this topic in JavaEye, the discussion was quite interesting, and I couldn't help but get involved. Semantic thinking

First of all, the link a and button button are semantic and cannot be replaced because of convenience in use. a is the abbreviation of anchor, an anchor point used to navigate or locate. 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 the 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, a button is part of a form, and the triggered action is associated with the form. If there is no form operation at all, you should not use buttons. Give some examples:

The above picture is some links, although it looks like a button, it is semantically a.

The display and sort buttons in the figure above are the operation form. Semantically, it is more appropriate to use button or input. (Note: Taobao search results page currently uses a, which is for the sake of gradual enhancement, and will be mentioned below)

In short, links and buttons have their own semantics and usage scenarios and cannot be replaced at will. Writing analysis

The world is never that simple. In today's JavaScript web world, 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, there is a problem with the first writing method, because the href will be automatically completed under the ie.

The second way to write it directly prevents the default event in the onclick event, so # in href=# can actually be any value. Using # is to consider that when there is no js, ​​it will stay on this page after clicking (note: when a is below one screen, this writing method will cause the page to roll 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 of javascript (such as!, typeof). The function of the void operator is to execute only the following expression and not return any value. It seems that void(0) blocks the default event, but in fact, the following writing methods are fine:

<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 trigger other events. (Note: Under Opera, when there is a return value in the pseudo-protocol, the href will be changed, so we usually write void(0) or empty statements)

After understanding the third way of writing, you will understand the fourth way of writing: href=javascript: void something(). One advantage of this way is that when the mouse is suspended, the user can see the function to be executed through the status bar. This may be a benefit for developers, but for ordinary users, will this really increase trust? Or is it a sense of fear? Without data, you cannot draw conclusions.

In addition to the above writing method, there is another recommended writing method, which is to add a hook to a through class or id, and then add events through hook in js. Reflection

I don't want to discuss which of the above writing styles is the best. Let's think about the origin question: Why do we use a to trigger js events? The reasons I can think of are:

This will automatically have the mouse suspended style. Everyone can't think of any reason for writing this way. This is not very natural. Because IE6 only supports a:hover with css style, 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 the time being and take a look at an example:

The above is the operation bar of Google Reader. If you are interested, you might as well firebug it. The tag used is:

The mouse's suspended style is not a problem at all:

In css, just add cursor: pointer.

From the above example, we can draw a conclusion: if you just trigger the js action without any navigation or positioning semantics, you can use span or other suitable tags, and there is no need to use a incorrectly (using a will cause trouble: first, you need to remove the default event, and second, the information in the status bar will confuse or even fear ordinary users).

Of course, if it is a link itself, you just want to add some js logic or form sorting applications before navigation, considering it from a gradual enhancement perspective, the best practice is to write all the href values ​​so that in browsers that do not support js, usability can be guaranteed. Best Practices

It is not a summary, it is not a one-time finalization. Best practice is just a series of principles. It is necessary to think about it before writing code:

Use link a or button button. Depending on the specific usage scenario, button is related to the form. Don’t abuse a. When you can’t even understand what the href value is (don’t show javascript pseudo-protocol, don’t be lonely#), please select other tags and add events in js through hooks. If it is indeed a link and there is an onclick event, please think about gradual enhancement to ensure the integrity of the href value.

Codes have life, Tag Kingdom is a zoo, familiar with them, everything is lovely.