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
<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
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.