tagName and HTML best practices


I was curious if I should use the Ember tagName option or simply use HTML? For example, on my navbar I could do:

{{#link-to 'index' tagName = 'li'}}Home{{/link-to}}
{{#link-to 'about' tagName = 'li'}}About{{/link-to}}

or I could do:

<li>{{#link-to 'index'}}Home{{/link-to}}</li>
<li>{{#link-to 'about'}}About{{/link-to}}</li>

Are there pros and cons to each? When should I use which? Thanks!


Use the latter if possible. I say that because I think it’s good practice to keep links on a tags. I do, however, use a form of the first one when using Bootstrap, since Ember.js places an active class on the current URL links.

{{#link-to 'index' tagName='li' href=false}}
    {{#link-to 'index'}}Home{{/link-to}}

But notice that I disable the href on the li tag so the a tag is the one that is clicked. (I’m not even sure if having an href property on an li will work in all browsers.)


Just FYI, as of version 1.0.0 RC3 the {{link-to}} helper will not generate an href="" attribute if the tagName is not “a”.