URI authority / URI fragment / URI schemes
Reading some of the MDN web docs.
References
Related
- percent-encoded
- Percent-encoding is a mechanism to encode 8-bit characters that have specific meaning in the context of URLs. It is sometimes called URL encoding. The encoding consists of substitution. A '%' followed by the hexadecimal representation of the ASCII value of the replace character.
- block-level element
- In CSS< content that participates in block layout is called block-level content. In a block layout, boxes are laid out after the other, vertically, beginning at the top of the containing block. Each box's outer edge touches the left edge of the containing block.
- A block-level element always starts on a new line.
Notes
URI authority
The authority of a URI is the section that comes after the scheme and before the path. It may have up to three parts: user information, host, and port.
host
host:port
user@host
user@host:port
- host
- The host is usually the domain name or IP address of the server hosting the resource. The domain name is resolved to an IP address using the Domain Name System.
- port
- The port is a number that indicates the port on which the server is listening for requests. It is optional and defaults to 80 for HTTP and 443 to HTTPS. Other schemes may define their own defaults or make it mandatory.
- user
- The user is optional and is used for authentication purposes. It is not commonly used in web URIs.
URI fragment
The fragment of a URI is the last part of the URI, starting with the #
character. It is used to identify a specific part of the resource, such as a section of a document or a position in a video. The fragment is not sent to the server when the URI is requested, but it is processed by the client (such as the browser) after the resource is retrieved.
#fragment
- fragment
- A sequence of any characters. The exact format of the fragment is defined by the resource itself. Some common examples:
- In an HTML document, it can be the
id
attribute of an element, and the browser will scroll to that element - It can be a text fragment in the form of
#:~:text=...
, which makes the browser highlight the specified text - It can be a media fragment in the form of
#t=...
, which makes the video or audio start playing from that time
- In an HTML document, it can be the
text fragment
Text fragments allow linking directly to a specific portion of text in a web document, without requiring the author to annotate it with an ID, using particular syntax in the URL fragment. Supporting browsers are free to choose how to draw attention to the linked text, e.g. with a color highlight and/or scrolling to the content on the page. This is useful because it allows web content authors to deep-link to other content they don't control, without relying on the presence of IDs to make that possible. Building on top of that, it could be used to generate more effective content-sharing links for users to pass to one another.
text fragments allow link authors to specify text content to link to, rathe than document fragments, in a flexible manner.
In a similar manner to document fragments, text fragments are appended into a URL after a hash symbol #
. The syntax is a bit different:
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
:~:
- Otherwise known as the fragment directive, this sequence of characters tells the browser what comes next is one or more user-agent instructions, which are stripped from the URL during loading so that author scripts cannot directly interact with them. User-agent instructions are also called directives.
text=
- A text directive. This provides a text fragment to the browser, defining what text is to be linked in the linked document.
textStart
- A text string specifying the start of the linked text.
textEnd
- A text string specifying the end of the linked text.
prefix-
- A text string followed by a hyphen specifying what text should immediately precede the linked text, only allowing for whitespace in between. This helps the browser select the correct linked text, in cases where there are multiple matches.
-suffix
- A hyphen followed by a text string specifying what text should immediately follow the linked text, only allowing for whitespace in between. This helps the browser to select the correct linked text, in cases where there are multiple matches.
Usage Notes
- Text strings used for the
textStart
,textEnd
,prefix-
, and-suffix
values need to be percent-encoded. - Matches are case-insensitive.
- Individual
textStart
,textEnd
,prefix-
, and-suffix
strings need to reside wholly inside the same block-level element, but complete matches can span across multiple element boundaries - For security reasons, the feature requires links to be opened in a noopener context - you need to add
rel="noopener"
to your<a>
elements, and addnoopener
to yourwindow.ipen()
calls when using this feature - Text fragments are invoked only on full (non-same-page), user-initiated navigations
- Text fragments are only applied to the main frame; text will not be searched inside
<iframe>
s, andiframe
navigation will not invoke a text fragment. - For sites that wish to opt-out, Chromium based browsers support a Document policy that they can send so user agents will not process Text Fragments:
Document-Policy: force-load-at-top
Browsers are free to style the highlighted text in whatever default way they choose. The CSS Pseudo-Elements Module Level 4 defines a pseudo-element, ::target-text
, which allows you to specify custom styling.
::target-text {
background-color: rebeccapurple;
color: white;
}
The FragmentDirective
object, which is accessed via the Document.fragmentDirective
property, can be used to test whether or not text fragments are supported in a browser.
document.fragmentDirective;
// returns an empty FragmentDirective object, if supported
// undefined otherwise
URI schemes
The scheme of a URI is the first part of the URI, before the :
character. It indicates which protocol the browser must use to fetch the resource. The scheme may affect how the rest of the URI is structured and interpreted.
protocol:
- protocol
- A sequence of characters that identifies the protocol to use. It should consist of only alphanumeric characters and the
+
,-
, and.
characters. Common schemes are: blob
- Binary Large Object; a pointer to a large in-memory object
data
- Data directly embedded in the URL
file
- Host-specific file names
ftp
- File Transfer Protocol
- An insecure protocol for transferring files from one host to another over the internet. For many years it was the defacto standard way of transferring files, but as it is inherently insecure, it is no longer supported by many hosting accounts. Instead, you should use SFTP (a secure, encrypted version of FTP) or another secure method for transferring files like rsync over SSH.
http
/https
javascript
- URL-embedded JavaScript code
mailto
- Electronic mail address
resource
- Firefox and Firefox browser extensions to load resources internally
ssh
- Secure shell
tel
- telephone
urn
- Uniform resource name
view-source
- Source code of the resource
ws
/wss
- A sequence of characters that identifies the protocol to use. It should consist of only alphanumeric characters and the
Comments
You have to be logged in to add a comment
User Comments
There are currently no comments for this article.