Tutorial by Examples

External CSS Stylesheet

<link rel="stylesheet" href="path/to.css" type="text/css"> The standard practice is to place CSS <link> tags inside the <head> tag at the top of your HTML. This way the CSS will be loaded first and will apply to your page as it is loading, rather th...

JavaScript

Synchronous <script src="path/to.js"></script> Standard practice is to place JavaScript <script> tags just before the closing </body> tag. Loading your scripts last allows your site's visuals to show up more quickly and discourages your JavaScript from trying to...

Favicon

<link rel="icon" type="image/png" href="/favicon.png"> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> Use the mime-type image/png for PNG files and image/x-icon for icon (*.ico) files. For the difference...

Alternative CSS

<link rel="alternate stylesheet" href="path/to/style.css" title="yourTitle"> Some browsers allow alternate style sheets to apply if they are offered. By default they will not be applied, but usually they can be changed through the browser settings: Firefox l...

Web Feed

Use the rel="alternate" attribute to allow discoverability of your Atom/RSS feeds. <link rel="alternate" type="application/atom+xml" href="http://example.com/feed.xml" /> <link rel="alternate" type="application/rss+xml" href=&quo...

Link 'media' attribute

<link rel="stylesheet" href="test.css" media="print"> Media specifies what style sheet should be used for what type of media. Using the print value would only display that style sheet for print pages. The value of this attribute can be any of the mediatype val...

Prev and Next

When a page is part of a series of articles, for instance, one can use prev and next to point to pages that are coming before and after. <link rel="prev" href="http://stackoverflow.com/documentation/java/topics"> <link rel="next" href="http://stackover...

Resource Hint: dns-prefetch, prefetch, prerender

Preconnect The preconnect relationship is similar to dns-prefetch in that it will resolve the DNS. However, it will also make the TCP handshake, and optional TLS negotiation. This is an experimental feature. <link rel="preconnect" href="URL"> DNS-Prefetch Informs bro...

Page 1 of 1

logo rip
SUPPORT & PARTNERS
STAY CONNECTED

Get monthly updates about new articles, cheatsheets, and tricks.