Link

The link tag in an html document is an element defines the relationship between the current document and an external resource. The link tag is most often used to link external style sheets, but it is also used to link other types of resources aswell.

See: https://html.spec.whatwg.org/multipage/semantics.html#the-link-element

Base Tag

<base href="https://dev.berladyn.online" />
    

Declaring the `base` of the file structure allows for cleaner tighter linking as well as a basic fail safe for URL's that may not be fully defined. Rather than type out the full website address, a person only needs to include the ./folders/files . A document may only have one base tag.

DNS Prefetch

<link rel="dns-prefetch" href="//s.w.org" />
    

Calling a `dns-prefetch` is an attempt to reduce time and resources for faster page loading. When a browser requests a resource from a (third party) server the cross-origin's domain name must be resolved to an IP address before the browser can issue the request. This process is known as DNS resolution. While DNS caching can help to reduce this latency, DNS resolution can add significant latency to requests.

Pre-Connect

<link rel="preconnect" href="//securepubads.g.doubleclick.net" />
    

Manifest

<link rel="manifest" href="./manifest.json" />
    

Web app manifests are part of a collection of web technologies called progressive web apps (PWAs), which are websites that can be installed to a device's homescreen without an app store.

https://developer.mozilla.org/en-US/docs/Web/Manifest

Profile

<link rel="profile" href="https://gmpg.org/xfn/11" />
    

XFN (XHTML Friends Network) is a simple way to represent human relationships using hyperlinks. In relatively recent years, blogs and blogrolls have become the fastest growing area of the Web. XFN enables web authors to indicate their relationship(s) to the people in their blogrolls simply by adding this attribute to their tags.

https://gmpg.org/xfn/

Favicon

<link rel="icon" type="image/x-icon" href="./image/favicon.ico" />
    

A `favicon` is a graphic image (icon) associated with a particular Web page and/or Web site. For my personal use, I came up with this square, which is divided into four more squares, each based on one the four primary colours. In my case this reflects rather well with my intentions, with my LEGO childhood, and with my combined paternal and maternal family heritage.

Icon

<link rel="icon" href="./icon/enuk-192x192.png" sizes="192x192" />
    

Alternate Icon

<link rel="alternate icon" href="./favicon.ico" type="image/x-icon" />
    

From Telegram.

Shortcut Icon

<link rel="shortcut icon" href="./images/icons/favicons/fav_logo_2x.ico?6" />
    

Shortcut is not, and never has been, a valid link relation. See article: https://evilmartians.com

Apple Touch Icon

<link rel="apple-touch-icon" href="./icon/enuk.png" />
    

iOS has a concept of `Web Clips` for Web sites and applications. There are two main front-facing parts to an iOS Web application's presence on an iOS device: its Home screen icon (or the Web Clip icon), and its startup image. These are represented by apple-touch-icon and apple-touch-startup-image respectively.

Pingback

<link rel="pingback" href="./xmlrpc.php" />
    

Also known as track-backs, ping-backs are a form of automated comment for a page or post, created when another WordPress blog links to that page or post. When you publish a new blog post, WordPress attempts to ‘ping‘ all the sites that were linked to in your post. When you receive a ping-backs it means someone else has linked to one of your posts or pages.

Canonical

<link rel="canonical" href="..." />
    

A canonical tag (aka `rel canonical`) is a way of telling search engines that a specific URL represents the master copy of a page. Using the canonical tag prevents problems caused by identical or “duplicate” content appearing on multiple URLs. Practically speaking, the canonical tag tells search engines which version of a URL you want to appear in search results.

Alternate

<link rel="alternate" href="..." hreflang="x-default" />
    

The Alternate Tag simply provides a means to offer another version of the page due to language, display, aggregation, securities, intra, etc. This attribute is often used to indicate a relation between a desktop and a mobile website to search engines. Using the mobile attribute is only necessary if you have a separate desktop and mobile website.

Stylesheet

<link rel="stylesheet" id="w3-css" href="./w3.css" type="text/css" media="all" />
    

The Stylesheet Attribute declares a relationship between the current document and an external Cascading Style Sheet (CSS).

Previous / Next

<link rel="prev" href="https://www.example.com/article?story=abc&page=2" />
<link rel="next" href="https://www.example.com/article?story=abc&page=4" />
    

Shortlink

<link rel="shortlink" href="https://wp.me/p6bxIh-1gl" />
    

Search

<link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" />
    

License

<link rel="license" href="https://creativecommons.org/licenses/by-sa/3.0/" />