URI authority / URI fragment / URI schemes

Reading some of the MDN web docs.

Date Created:
1 17

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

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 add noopener to your window.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, and iframe 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
        • Hyper text transfer protocol (Secure) (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

Comments

You have to be logged in to add a comment

User Comments

Insert Math Markup

ESC
About Inserting Math Content
Display Style:

Embed News Content

ESC
About Embedding News Content

Embed Youtube Video

ESC
Embedding Youtube Videos

Embed TikTok Video

ESC
Embedding TikTok Videos

Embed X Post

ESC
Embedding X Posts

Embed Instagram Post

ESC
Embedding Instagram Posts

Insert Details Element

ESC

Example Output:

Summary Title
You will be able to insert content here after confirming the title of the <details> element.

Insert Table

ESC
Customization
Align:
Preview:

Insert Horizontal Rule

#000000

Preview:


View Content At Different Sizes

ESC

Edit Style of Block Nodes

ESC

Edit the background color, default text color, margin, padding, and border of block nodes. Editable block nodes include paragraphs, headers, and lists.

#ffffff
#000000

Edit Selected Cells

Change the background color, vertical align, and borders of the cells in the current selection.

#ffffff
Vertical Align:
Border
#000000
Border Style:

Edit Table

ESC
Customization:
Align:

Upload Lexical State

ESC

Upload a .lexical file. If the file type matches the type of the current editor, then a preview will be shown below the file input.

Upload 3D Object

ESC

Upload Jupyter Notebook

ESC

Upload a Jupyter notebook and embed the resulting HTML in the text editor.

Insert Custom HTML

ESC

Edit Image Background Color

ESC
#ffffff

Insert Columns Layout

ESC
Column Type:

Select Code Language

ESC
Select Coding Language

Insert Chart

ESC

Use the search box below

Upload Previous Version of Article State

ESC