HTML Anchors with ids

Despite being in the HTML 4.01 spec since 1999 I picked up another small frontend tip recently.

When adding anchors on a page for the purpose of in-page links my typical method for years has been to add a link with the anchor name in the href and an anchor tag with a name attribute.

<a href="#productList">View more products</a>
Some page content…
<a name="productList"></a>
<ul class="productList">…</a>

Just the other day @ry5n informed me that a link that corresponds to an elements id will work just the same and there’s no need to add an additional anchor with a name. This allows you to use any element as the anchor. I find this avoids additional un-nessecary markup and overall is more convenient.

<a href="#productList">View more products</a>
Some page content…
<ul id="productList">…</a>

According to the docs:

The id and name attributes share the same name space. This means that they cannot both define an anchor with the same name in the same document. It is permissible to use both attributes to specify an element's unique identifier for the following elements: A, APPLET, FORM, FRAME, IFRAME, IMG, and MAP. When both attributes are used on a single element, their values must be identical.