URI - Fragment (Ref, Reference)

The fragment ¹⁾ is the last part of a URI

An URI has the following syntax with the #fragment being the fragment

[scheme:][//authority][path][?query][#fragment] 

The value of the fragment must be encoded.

The fragment will cause the browser to scroll to the target element

When a html navigation occurs (ie the uri is clicked or fired), the fragment represent:

• an id attribute
• or a name attribute
• or a dfn element

Example with a anchor name

<a name="smtpd_client_restrictions">smtpd_client_restrictions</a>

If the URI set in the href attribute contains only a fragment, it will cause a local scrolling

• to the top of the page with an empty value (ie #)
• to the local target otherwise

You can select all target with the :target ²⁾ pseudo selector.

Example when using a fixed top header

:target {
  scroll-margin-top: 80px;
}

The :target-within pseudo-class ³⁾ applies to elements:

• for which the :target pseudo class applies
• as well as to descendant element