Abuse of tag

Question

As I understand it, the < A > tag is the "anchor" tag, and it has three purposes:

1) Describe and name an item on the page <a name="foo"/>

2) Send a user to another page, when clicked <a href="http://www.yahoo.com">Yahoo!</a>

3) Send a user to another spot in the same page, when clicked <a href="#foo">Foo!</a>

It was explained to me that the < a > tag is the only touch/click event universally handled across browsers, and we needed to hijack it for this compatibility. I doubt this - if the browser is capable of displaying a website that uses JQuery (and CSS2/3!), the browser should also be able to handle custom onclick() events without the need of anchor tags.

Right now, it's been standard operating procedure in the project to handle all clickable events with the use of the <A> tag. In code, we must prevent default (otherwise the page jumps to the top), and then handle our merry business. I strongly feel that this is abusing the purpose of the tag, much like how some frameworks hijacked the <i> tag to show icons.

IMO, if you wanted a selectable LI list, you assign an "onclick" event handler to each LI item. Since there's no default action, there is no need to worry about preventing default.

Since this is StackOverflow, I need to have a question to answer: Is this currently prescribed behavior abusing the purpose of the < A > tag?

EDIT: For purposes of accessibility (being able to tab through objects, which A allows but LI does not ), this StackOverflow post of setting TabIndex on an LI seems promising:

What is the HTML tabindex attribute?

This is more a rant than a question (as your last paragraph makes clear you know). If you want to ask a question, I suggest deleting this rant and asking a question. — T.J. Crowder, Feb 23 '15 at 17:22
Yes you can click on an li, but can you focus the li without using a mouse? Not everyone uses a mouse. (some modern browsers will let you focus on elements now) — epascarello, Feb 23 '15 at 17:25
And would a screen-reader pick-up on the fact the element can be interacted with? — Alex K., Feb 23 '15 at 17:26
That is a very valid point about not using a mouse, I did just check... by using the A tag, you can tab over to items on a custom-dropdown list. — Jeffrey Kern, Feb 23 '15 at 17:31
What is the question, really? What “currently prescribed behavior” are you referring to? What is your *practical* problem? You should show enough code to demonstrate why someone thinks the `` element needs to be used and why someone else thinks it should not be used? — Jukka K. Korpela, Feb 23 '15 at 18:49

score 2 · Accepted Answer · answered Feb 23 '15 at 17:25

2

With the use of jQuery you can on('click',callback) any element.

Using only the a element may be for accessibility purposes (telling screen readers, for example, that this element is to do something interesting).

answered Feb 23 '15 at 17:25

Richard Parnaby-King

14,703
11
69
129

I did just check, using the A tag allows you to tab over to items in a customized list, whereas you cannot without it. So it does allow the usage of the site for those without mice or touch input (which is rare but does occur). – Jeffrey Kern Feb 23 '15 at 17:33
If accessibility is indeed a concern (and in a lot of cases it simply is not, whether we find that fair or not), you could bind key handlers to the navigation elements. After 20 years coding HTML, I have personally pretty much abandoned HTML tags and use only about 5 or so of them in 99% of the cases: `DIV` for anything to lay out, `A` for some (but not all) clickables, `SELECT` (which is almost extinct IMHO, too), `INPUT`, and now I have to really think about what else... – tim May 13 '15 at 01:23

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Yes, it is an abuse.

I would explain them about Semantic HTML. Every tag has a purpose and a context where it should be used.

By the way, usage of <i> for icons is not necessarily an abuse. CSS is strongly recommended for italic style.

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 23 '15 at 17:25

Rahul Desai

15,242
19
83
138

So if it is abuse...what would you use instead? – epascarello Feb 23 '15 at 17:29
@epascarello I would need to know the context to pick up the most appropriate HTML tag. I agreee with OP where he/she mentioned that `if you wanted a selectable LI list, you assign an "onclick" event handler to each LI item` – Rahul Desai Feb 23 '15 at 17:34
But that is not 100% accessible in all browsers. – epascarello Feb 23 '15 at 17:35
The tag is now outdated due to CSS styling, but it's original purpose was (and still is) to italicize text. If the tag's purpose is no longer meaningful, it should be retired and another tag should take up it's place for an icon instead – Jeffrey Kern Feb 23 '15 at 17:36
@epascarello In that case, we can use `html5shiv` / `modernizer`. – Rahul Desai Feb 23 '15 at 17:36
How in the world does using one of this magically make a screen reader work and allow keyboard support? OP has a menu, seems logical to use anchors in the menu to me. Other option would be to use radio buttons or checkboxes. – epascarello Feb 23 '15 at 17:37
What about using the TabIndex attribute for an object? Wouldn't
foo