HTML Linking Resources
Different types of Linking Resources like js, CSS, and meta tag links in html5
|charset||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.
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, the same way as synchronous scripts.
The <noscript> element defines the content to be displayed if the user has scripts disabled or if the browser does not support using scripts. The <noscript> tag can be placed in either the <head> or the <body>.
External CSS Stylesheet Linking in HTML
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 than showing unstyled HTML until the CSS is loaded. The typeattribute is not necessary in HTML5, because HTML5 usually supports CSS.
... do the same thing in HTML5. Another, though less common practice, is to use an @import statement inside direct CSS. Like this:
Favicon Link in HTML
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 <link> tag. If this file ever changes, browsers can be slow and stubborn about updating their cache.
Alternative CSS Link in HTML
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:
Resource Hint: dns-prefetch, prefetch, prerender
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.
Informs browsers to resolve the DNS for a URL so that all assets from that URL load faster.
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.
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 in HTML
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 media type values (similar to a CSS media query).
Prev and Next in Link tags
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.
HTML Web Feed
Use the rel="alternate" attribute to allow discoverability of your Atom/RSS feeds.
ATutorialHub Related Guide
HTML Tutorials Comments (8)
panduranga gupta2021-07-05 07:03:13
good website for learning and help me a lot
The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
It is very helpful to students and easy to learn the concepts
Great job Tutorials are easy to understand Please make use of it
Zain Khan2021-09-18 15:07:23
Great content and customized courses.
Rudrakshi Bhatt2021-09-09 15:08:10
Well structured coursed and explained really well!
Pavana Somashekar2021-09-11 15:09:08
Good platform for beginners and learn a lot on this website