Question

Using this source code in a razor view:

@for( int x = 0; x < 100; x++)
{
    <a href="action">link</a>
}
@for( int x = 0; x < 100; x++)
{
    @Html.ActionLink("link", "action")
}

Produces two different blocks of html:

The first loop produces <a> tags with a line break between each:

<a href="action">link</a>
<a href="action">link</a>
<a href="action">link</a>
<a href="action">link</a>
<a href="action">link</a>
<a href="action">link</a>
<a href="action">link</a>
<a href="action">link</a>
<a href="action">link</a>
...

And the second one produces one long chain of <a> tags:

<a href="action">link</a><a href="action">link</a><a href="action">link</a><a href="action">link</a><a href="action">link</a><a href="action">link</a><a href="action">link</a>...

In the second case, browsers will not use any spacing between the links and will not allow the text to wrap if necessary creating one long non-breakable line of links. The fact that there is no space in the link text makes a difference. In my application, I’m really need a long list of one-word links and they have to wrap correctly.

What is the right way to use Html.ActionLink in this case?

I found two workarounds:

1. Wrap the <a> inside <li>
2. Use <text></text> after the Html.ActionLink call. That forces a line break in the generated source code.

Answer 1

From a semantic point of view you’re creating a bunch of links that form some kind of navigation. You should express that semantics in your generated HTML, so your so called work around with the <li> element is the “right” approach from a semantic point of view!

In HTML5 we have a tag to express that there is a bunch of links that forms some kind of navigation on your page:

<nav>
  <ul>
    @for( int x = 0; x < 100; x++)
    {
      @Html.ActionLink("link", "action")
    }
  </ul>
</nav>

If you’re using (X)HTML 4 you may consider to use a <div class=”nav”> element instead.

Last point: Don’t try to express some representation with your HTML code. The wrapping of HTML links is a representation thing. If you use semantic markup you may fix the representation too but that’s not the reason to use semantic markup.

How you can use HTML 5 tags even with IE6 is demonstrated in this link.