What's the better practice to put in

Question

Between this two practices, what's the better?

<tr onclick="window.document.location='http://link.com';">
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>

Or

<tr>
    <td><a href="http://link.com">Lorem ipsum.</a></td>
    <td><a href="http://link.com">Lorem ipsum.</a></td>
    <td><a href="http://link.com">Lorem ipsum.</a></td>
    <td><a href="http://link.com">Lorem ipsum.</a></td>
    <td><a href="http://link.com">Lorem ipsum.</a></td>
</tr>

I want to use only JavaScript.

In the first way I repeat only one time link, but I don't use a, in the second example I use many a and I repeat the link.

because he only has to do a single line of code (in the tr) rather than adding an href to each one of *n* total `td`s in the row — chiliNUT, Sep 18 '15 at 17:24
I think this depends on the use-case if this is functionality for the row then put it in the `` tag. If it is functionality for each cell then put it in the cell — Hogan, Sep 18 '15 at 17:25
Some crawlers may be able to follow the javascript onclick, but I wouldn't count on it. The use of an tag would be the way to go IMO if you care a stitch about SEO. — Jim Speaker, Sep 18 '15 at 17:27
One will work if JavaScript is disabled and the other will not. So if that is a concern, you know your answer. — epascarello, Sep 18 '15 at 17:27

score 5 · Accepted Answer · edited May 23 '17 at 11:58

5

I would use HTML for a number of reasons.

Separation of Concerns: CSS and JavaScript were created to separate content from presentation from behavior.
Inline JavaScript is not recommended for the previous reason. You can create a script tag and then reference the external javascript file, where you have a code. You should create event listeners with addEventListener.
If you have to use onclick, only use it for calling functions. In your case, onclick="window.document.location='http://link.com';" is really verbose and takes up a lot of space. It is not clean html. This is one of the disadvantages of frameworks like angular and bootstrap.
If a user has disabled JavaScript in their browser, the JavaScript code wouldn't work anyways. However, the traditional HTML still would.

Both of them accomplish the same thing, but the best practice is here

<td><a href="http://link.com">Lorem ipsum.</a></td>

Please see this question

Why is using onClick() in HTML a bad practice?

edited May 23 '17 at 11:58

Community

1
1

answered Sep 18 '15 at 17:24

Richard Hamilton

25,478
10
60
87

3

I don't believe you are using the term separation of concerns correctly – Hogan Sep 18 '15 at 17:26
1

Separation of concerns is to separate content from presentation from behavior – Richard Hamilton Sep 18 '15 at 17:26
2

Looks like a good use of "separation of concerns" to me. Separate code (javascript) from view (HTML). In this case, we can do away with the code entirely, though. – Asaph Sep 18 '15 at 17:27
Your link says something totally different. – Hogan Sep 18 '15 at 17:30
How so, it agrees with me that it's a bad practice – Richard Hamilton Sep 18 '15 at 17:33
1

The problem here is a link that takes you to another page is both content and behavior. – Hogan Sep 18 '15 at 17:33
1

@RichardHamilton - it says to but the js content in another file -- you are arguing for not using js. They are two different issue IMO – Hogan Sep 18 '15 at 17:33
I'm saying if you do use JavaScript, especially long statements, you should reference another file. If you do want to use inline with event attributes, at most use function names, not entire statements. – Richard Hamilton Sep 18 '15 at 17:35
@RichardHamilton - yes I agree with all these statements. It isn't what your answer said originally. – Hogan Sep 18 '15 at 17:36
Understood. Thanks for pointing that out. I have edited my post. – Richard Hamilton Sep 18 '15 at 17:41
Now I believe that this is a better code, but if I've ten rows and ten columns I'll repeat one hundred times. – Rodrigo Boniatti Sep 18 '15 at 19:25

score 3 · Answer 2 · answered Sep 18 '15 at 17:35

As an alternative approach, you could solve both the repeating issue, and keep the anchor funcionalitty (such as SEO reasons), by using css tables:

HTML:

<div class="table">
    <a href="http://link.com" class="table-row">
        <div class="table-cell">Lorem ipsum.</div>
        <div class="table-cell">Lorem ipsum.</div>
        <div class="table-cell">Lorem ipsum.</div>
        <div class="table-cell">Lorem ipsum.</div>
        <div class="table-cell">Lorem ipsum.</div>
    </a>
</div>

CSS:

.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }

There is a reason your icon is Vadar – Hogan Sep 18 '15 at 17:37 — Hogan, Sep 18 '15 at 17:37

score 2 · Answer 3 · answered Sep 19 '15 at 06:14

This question has the accessibility tag but it was only touched on by Adam. From the original question, the second example is more accessible than the first because the screen reader user will know there are links in each cell and can navigate to links using the screen readers shortcut keys (for example, Ctrl+Ins+F7 in JAWS to bring up a list of anchor tags).

If you truly have a table (and not just using a table for layout purposes), then please make sure you have table headers (<th>) and use the scope='row|col' option so that a screen reader user will be able to navigate through the cells of the table and be able to keep themselves oriented on which row or column they're on.

Also, the first example isn't keyboard accessible because you're only listening for onclick. You'd also need onkeydown.

LcSalazar's example using <div>'s is ok if you're trying to mimic a table but if you want it accessible, you'd also need to specify role='grid', role='gridcell', and role='rowheader' for the various <div>'s. That's a lot of work when you could just use the native table tags.

score 1 · Answer 4 · answered Sep 18 '15 at 17:38

1

In matter of accessibility, tables should be used to present tabular information http://www.w3.org/TR/WCAG20-TECHS/H51.html

and the purposed of each link might be determined by the link text http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html

According to those two requirements, it seems to me that there is very few change that you could use a whole range of tabular data inside a tr to describe the purpose of a link.

So I think you can solve your issue by not using a table and not using javascript (see LcSalazar answer for instance)

answered Sep 18 '15 at 17:38

Adam

17,838
32
54

I've a table with many rows and columns. I think that not the best solution. – Rodrigo Boniatti Sep 18 '15 at 19:20
1

I answered your question about accessibility. If the best solution for you is not to care about accessibility, simply remove the tag accessibility from your question. – Adam Sep 18 '15 at 19:25
Oh, sorry. I would like be accessible and semantic. – Rodrigo Boniatti Sep 18 '15 at 19:28
I want to click on the row to trigger edit mode. Seems like this is a common use case to me. – Hogan Sep 21 '15 at 13:32
@Hogan But this is not an accessible "use case". The link text content should define the action. – Adam Sep 21 '15 at 14:09

What's the better practice to put in

4 Answers4