anchor

The anchor attribute in HTML links a positioned element to a specific anchor, allowing precise placement relative to another element using CSS anchor positioning. This feature enables dynamic layouts but lacks broad browser support, making it experimental.

Not Recommended

This is a non-standard feature, meaning it is not part of the official web standards. It is not recommended for use on production websites, as it may not function consistently across different users. Additionally, various implementations may have significant differences, and its behavior could change over time.

Anchor Attribute

The anchor global attributes links a positioned element to a specific anchor element. Its value should match the id of the target element. Once linked, CSS anchor positioning can be used to control the element's placement.

Alternatively, you can link a positioned element to an anchor element using CSS with the anchor-name and position-anchor properties. If both HTML and CSS anchoring methods are applied to the same element, the CSS method will override the HTML approach.

Example

Basic Usage of the Anchor Attribute

The example below demonstrates how an element can be linked to an anchor using HTML, while CSS ensures it stays positioned relative to the anchor.

HTML Positioning with Anchors

In this setup, we create a <div> with an id of example-anchor, which serves as our anchor element. Another<div> is then added, utilizing the anchor attribute with a value of example-anchor. This establishes a connection between the two elements, making the first <div> the reference point for the second.

To allow scrolling, additional placeholder text is included around these <div> elements, making the <body> section taller.

CSS Positioning with Anchors

CSS allows us to position an infobox relative to its anchor using anchor positioning. To achieve this, we apply the following styles:

position: fixed; – Converts the element into a positioned element, enabling placement relative to its anchor.
left: anchor(right); – Aligns the infobox’s left edge with the anchor’s right edge.
align-self: anchor-center; – Ensures the infobox is centered with the anchor in the inline direction.
margin-left: 10px; – Adds spacing between the infobox and its anchor for better visual separation.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus elementum sagittis vitae et.

This is an information box.

Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet aliquam.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<div class="anchor" id="example-anchor">⚓︎</div>

<div class="infobox" anchor="example-anchor">
  <p>This is an information box.</p>
</div>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

.infobox {
  position: fixed;
  left: anchor(right);
  align-self: anchor-center;
  margin-left: 10px;
}

Conclusion

The anchor attribute provides a way to link a positioned element to a specific anchor, enabling dynamic placement using CSS anchor positioning. While this feature offers enhanced layout control, it is not widely supported across all browsers and may lead to inconsistencies. Due to its experimental nature and potential changes in future updates, it is not recommended for production use. Developers should consider alternative positioning techniques, such as flexbox or grid, to achieve more reliable and cross-browser-compatible layouts.

accesskey

The accesskey attribute in HTML designates a shortcut key that activates or focuses on an element, enhancing accessibility and navigation. It is included within the element's tag.

async

The async attribute in HTML allows scripts to load and execute asynchronously, enabling faster page loading.