Specifies the character encoding of the linked document
crossorigin
Specifies how the element handles cross origin requests
href
Specifies the location of the linked document
hreflang
Specifies the language of the text in the linked document
media
Specifies on what device the linked document will be displayed, often used with selecting stylesheets based on the device in question
rel
Required. Specifies the relationship between the current document and the linked document
rev
Specifies the relationship between the linked document and the current document
sizes
Specifies the size of the linked resource. Only when rel="icon"
target
Specifies where the linked document is to be loaded
type
Specifies the media type of the linked document
integrity
Specifies a base64 encoded hash (sha256, sha384, or sha512) of the linked resource allowing the browser to verify its legitimacy.
While many scripts, icons, and stylesheets can be written straight into HTML markup, it is best practice and more efficient to include these resources in their own file and link them to your document. This topic covers linking external resources such as stylesheets and scripts into an HTML document.
JavaScript
Synchronous
Standard practice is to place JavaScript tags just before the closing
tag. Loading your scripts last allows your site’s visuals to show up more quickly and discourages your JavaScript from trying to interact with elements that haven’t loaded yet.
Asynchronous
Another alternative, when the Javascript code being loaded is not necessary for page initialization, it can be loaded asynchronously, speeding up the page load. Using async the browser will load the contents of the script in parallel and, once it is fully downloaded, will interrupt the HTML parsing in order to parse the Javascript file.
Deferred
Deferred scripts are like async scripts, with the exception that the parsing will only be performed once the HTML is fully parsed. Deferred scripts are guaranteed to be loaded in the order of declaration, same way as synchronous scripts.
The element defines content to be displayed if the user has scripts disabled or if the browser does not support using scripts. The tag can be placed in either the or the .
External CSS Stylesheet
The standard practice is to place CSS tags inside the 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 than showing unstyled HTML until the CSS is loaded. The type attribute is not necessary in HTML5, because HTML5 usually supports CSS.
and
… do the same thing in HTML5.
Another, though less common practice, is to use an @import statement inside direct CSS. Like this:
Favicon
Use the mime-type image/png for PNG files and image/x-icon for icon (*.ico) files. For the difference, see this SO question.
A file named favicon.ico at the root of your website will typically be loaded and applied automatically, without the need for a tag. If this file ever changes, browsers can be slow and stubborn about updating their cache.
Alternative CSS
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 lets the user select the stylesheet using the View > Page Style submenu, Internet Explorer also supports this feature (beginning with IE 8), also accessed from View > Page Style (at least as of IE 11), but Chrome requires an extension to use the feature (as of version 48). The web page can also provide its own user interface to let the user switch styles.
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.
DNS-Prefetch
Informs browsers to resolve the DNS for a URL, so that all assets from that URL load faster.
Prefetch
Informs the browsers that a given resource should be prefetched so it can be loaded more quickly.
DNS-Prefetch resolves only the domain name whereas prefetch downloads/stores the specified resources.
Prerender
Informs browsers to fetch and render the URL in the background, so that they can be delivered to the user instantaneously as the user navigates to that URL. This is an experimental feature.
Link ‘media’ attribute
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 values (similar to a CSS media query.
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.
Web Feed
Use the rel="alternate" attribute to allow discoverability of your Atom/RSS feeds.
WP Pro Online uses cookies for its advertisement solutions and for analytics. We hope you're ok with this, but you can opt-out if you wish. Read our Privacy Policy and Cookie Policy. AcceptReject
Privacy & Cookies Policy
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.