HTML - A element (anchor)

About

The a (or anchor) ¹⁾ is a html element that represents a hyperlink.

It is the cornerstone:

of every navigation scheme on the web.
and of the importance of a page on the internet (pagerank)

Attributes

the href (hypertext reference) attribute with an URL
the title attribute of a anchor will show a tooltip.
rel defines the types of the link. For example:
- nofollow indicates that the current document's original author or publisher does not endorse the referenced document (Generally an external link)
download to download a file
target defines the browsing context where the result of the link request is rendered:
- _self: replace the actual content (ie stay in the same browsing context)
- _blank: open a new tab (default) or window (blank is a browser configuration)
- _parent: open in the parent of the actual browsing context. If no parent, behaves as _self.
- _top: open in the root context of the actual browsing context. If no ancestors, behaves as _self.
hreflang Language of the linked resource (Tags for Identifying Languages) (to select the element with this tag, you would use the pipe equality attribute selector

API

See HTML - Hyper(Link) (href elements) on how to get them

Tracking

See Google Analytics - Outbound Link Tracking

Xsl

example on how to get the href in XSL

<xsl:element name="a">
    <xsl:attribute name="href">
        <xsl:value-of select="actionUrl"/>
    </xsl:attribute>
    <xsl:value-of select="actionUrl"/>
</xsl:element>

Deep Anchors

Deep anchors are icon that are located closed to element that when clicked will give the URL with the fragment that permits to navigate directly to the section or element that have the same value as id

Technically, this is just a local anchor with only the fragment that contains an icon / image.

An adapted version of the Rfc document using the content css element..

<a class="anchor" name="section-14.39" href="#section-14.39">
   <h3>14.39 - Server</h3>
</a>

h3 {
    margin-left: 30px;
}
.anchor::before {
    opacity: 0;
    content: "#";
    position: absolute;
    left:25px;
}

.anchor:hover:before {
    opacity: 1;
}
/* The :hover>.class can also be used See https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference */

Rendered by WebCode

Another example with an icon:

<a href="#deep_anchors">
   <svg aria-hidden="true" width="18" height="18" viewBox="0 0 18 18"><path d="M7.22 11.83a6 6 0 001.62.85l.61-1.8a4.1 4.1 0 114.04-.8l1.26 1.42a6 6 0 10-7.53.33zm3.43-5.6a6 6 0 00-1.6-.87L8.4 7.15a4.1 4.1 0 11-4.05.73L3.12 6.43a6 6 0 107.53-.2z"></path></svg>
</a>

If you want to create direct navigation link, you can also use the dfn (defining term) element

Documentation / Reference

the a element

¹⁾