pelicin › web › HTML

Explanation to Recurring HTML Attributes

Some HTML attributes are recurring in more than one type of elements. To save spaces for their (usually long) explanation, they are described here.

crossorigin=[...]

Defines how the browser should make the request in terms of CORS. Possible values:

  • anonymous — Do not send credentials for CORS when requesting the resource. Expect the server to allow CORS via Access-Control-Allow-Origin response header
  • use-credentials — Send credentials for CORS when requesting the resource. Expect the server to allow CORS via Access-Control-Allow-Credentials response header
Note: Credentials are cookies, authorization headers, or TLS client certificates.

form=[...]

Which id of <form id="..."> this form item is associated with.

(Allows you to place the form item anywhere in the page, not necessarily as the children of said <form>.)

referrerpolicy=[...]

Whether or not the browser should include the Referer header when making the request. Possible values:

No-referrer
  • no-referrer — Don't send referer
  • no-referrer-when-downgrade — (This is default.) Don't send referer if we are making request to less secure protocol (i.e. HTTPS to HTTP). Otherwise, send origin, path, and querystring as Referer.
Origin
  • origin — Only send origin as Referer
  • same-origin — Only send origin as Referer when making same-origin requests. Otherwise, don't send referer.
  • origin-when-cross-origin — Only send origin as Referer when making cross-origin request. Otherwise, send origin, path, and querystring as Referer.
Strict origin
  • strict-origin — Only send origin as Referer when the protocol security level is at least the same. Otherwise, don't send referer.
  • strict-origin-when-cross-origin — (1) Only send origin as Referer when making cross-origin request and the protocol security level is at least the same. (2) Send origin, path, and querystring as Referer when making same-origin request and the protocol security level is at least the same. (3) Otherwise, don't send referer.
Unsafe URL
  • unsafe-url — Send origin, path, and querystring as Referer. (May leak private data over insecure HTTP.)

rel=[...]

Defines relation of the linked resource to the document. When specifying more than one, separate using space.

The possible values depend on how rel was used:

  • <link rel="...">
  • <a rel="..."> or <area rel="...">,
  • <form rel="...">

rel of <link>

Link to other page
  • author — link to the author
  • canonical — link to the preferred URL for this document
  • alternate — link to the alternate representation of this document, e.g.
    • <link rel="alternate" href="www.example.com/jp-jp" hreflang="jp-jp"
    • <link rel="alternate" type="application/atom+xml" href="posts.xml" title="Blog">
  • help — link to help page of this document
  • license — link to license page of this document
  • search — link to search page of this document
  • next — link to the next document in series
  • prev — link to the previous document in series
  • pingback — link to the pingback server of this document (e.g., on Wordpress, if somebody writes a link to your post, Wordpress will try to contact the pingback server of your post to let you know that somebody has put down a link to your post)
  • manifest — link to PWA manifest
Performance
  • dns-prefetch — tells the browser to preemptively perform DNS resolution for the target origin
  • preconnect — tells the browser to preemptively connect to the target origin (this does DNS resolution, TLS negotiation, and TCP handshake)
  • prefetch — tells the browser that it should fetch and cache the target resource because it's likely to be used in the followup navigation
  • preload — tells the browser that it must fetch and cache the target resource because it's likely to be used in the current navigation
  • prerender — tells the browser that it should fetch and process the target resource (e.g. fetch its subresources or perform rendering off-screen) because it's likely to be used in the followup navigation
  • modulepreload — for JS modules: tells the browser to preemptively fetch the script (and its dependencies) and store it in the document's module map for later evaluation.
Resource type
  • icon — loads favicon
  • stylesheet — loads CSS

rel of <a> or <area>

Link to other page
  • author — indicates link to the author of the current document/section
  • alternate — indicates link to the an alternative version of the current document/section
  • bookmark — indicates permalink to the current document/section
  • help — indicates link to the help page of the current document/section
  • license — indicates link to the license page of the current document/section
  • search — indicates link to the search page of the current document/section
  • next — indicates link to the next document (in series) of the current document/section
  • prev — indicates link to the previous document (in series) of the current document/section
  • tag — indicates link to a tag page that applies to the current document/section (e.g. link to the "fiction" or "nonfiction" tag of a book)
Link annotation
  • external — indicates that the link is pointing to an external site
  • nofollow — indicates that the author does not endorse the link (tells search engine crawlers to ignore the link)
  • noreferrer — Don't include Referer header when navigating; behaves like noopener
  • noopener — On the target URL, sets window.opener to null (for security)
  • opener — On the target URL, gives access to window.opener (may allow phising attacks)

rel of <form>

Link to other page
  • help — ???
  • license — ???
  • search — ???
  • next — ???
  • prev — ???
Link annotation
  • external — indicates that the form is submitting to an external site
  • nofollow — indicates that the author does not endorse the link (tells search engine crawlers to ignore the link)
  • noreferrer — Don't include Referer header when submitting; behaves like noopener
  • noopener — On the target URL, sets window.opener to null (for security)
  • opener — On the target URL, gives access to window.opener (may allow phising attacks)

sizes=[...]

Defines: for a given screen dimension, how wide is the "slot" for the image (for example, if the image slot is 720px wide, the browser will load the smallest image from srcset that is at least 720px wide).

Not required if you used the "x" descriptor in srcset.

Sample value:

  • (min-width: 960px) 720px, 100vw — it means that if the screen is at least 960px wide, the image slot is 720px wide. Otherwise, the image slot is 100% width of the screen (the definition of 100vw).

srcset=[...]

Comma-separated list of possible sources to load an image.

Use one of the following format (given as examples):

  • image-small.jpg 240w, image-medium 300w, image-large.jpg 720w, where the number before "w" is the image's width (the browser will pick which one to load based on the value of sizes attribute)
  • image-small.jpg, image-medium 1.5x, image-large.jpg 2x, where the number before "x" is the pixel density (defaulting to 1x if the number is not given; the browser will pick which one to load based on the device's pixel density)

target=[...]

Targets where to open a link. Possible values:

  • _self — current window/tab
  • _blank — new window/tab
  • _parent — Parent frame (otherwise behaves like _self)
  • _top — Root frame (otherwise behaves like _self)

References