HTML - A element (anchor)

HTML - A element (anchor)

About

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

It is the cornerstone:

Attributes

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 */

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





Discover More
Scroll Bar
Browser - Scroll

This page is scrolling in the internet context (http, html, javascript). Scrolling is implemented by the browser in response to: user interaction (scrollbar, click) or Javascript code. Via...
Blob Url In Browser Address
Browser / Javascript - Object URL (createObjectURL / revokeObjectURL)

An ObjectUrl is the representation of blob object as a data URL strings that can be used with any fetch HTML element that accepts an URL as an attribute. HTML Example: This HTML was generated with...
Boxdim
CSS - Boxes (Box Model)

CSS The Box model means that each element is represented as a rectangular box. The layout phase of the browser rendering engine creates the box model as a tree of box and determines: the , the...
DOM - Event Delegation

Event delegation in the DOM
DOM - Event Propagation (known as Event Bubbling)

event propagation is a mechanism in which an event is propagated to all its ascendant (ancestore). Any time one of anchor tags is clicked, a click event is fired for that anchor, and then...
Data System Architecture
Data Modeling - Reference (connect, link to)

Reference is the name of a relationship that is directed where an entity (source, first) refers to another entity (target, second) We say that the source entity references, cites, or otherwise points...
Google Analytics Outbound Amazon
Google Analytics - Outbound Link Tracking

hyperlink tracking with Based on the Capture outbound links documentation, this site capture all external link created with a anchor with...
HTML - (Flow|Body) Content

Most elements that are used in the body of documents and applications are categorized as flow content. Flow content consists of flow elements intermixed with normal character data. (ifbodhead...
Devtool Track Active Element
HTML - Focus (Active element) (and Blur)

The focus is the interactive element actually active on a HTML dom document through: a mouse click (if you mouse click on a text input field, ready to begin typing, this element will come into focus)...
HTML - Hyper(Link) (href elements)

A link in HTML is an element that have the href attributes with an URL value An hyperlink is a contraction of hypertext link. link element The following elements are hyperlink because they have the...



Share this page:
Follow us:
Task Runner