{"id":330,"date":"2019-11-29T16:14:10","date_gmt":"2019-11-29T10:44:10","guid":{"rendered":"https:\/\/wpproonline.com\/?p=330"},"modified":"2026-02-26T10:48:13","modified_gmt":"2026-02-26T10:48:13","slug":"html-5-notes-for-professional-chapter-12-linking-resources","status":"publish","type":"post","link":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/","title":{"rendered":"HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources)"},"content":{"rendered":"\n<figure>\n<table>\n<tbody>\n<tr>\n<td>Attribute<\/td>\n<td>Details<\/td>\n<\/tr>\n<tr>\n<td>charset<\/td>\n<td>Specifies the character encoding of the linked document<\/td>\n<\/tr>\n<tr>\n<td>crossorigin<\/td>\n<td>Specifies how the element handles cross origin requests<\/td>\n<\/tr>\n<tr>\n<td>href<\/td>\n<td>Specifies the location of the linked document<\/td>\n<\/tr>\n<tr>\n<td>hreflang<\/td>\n<td>Specifies the language of the text in the linked document<\/td>\n<\/tr>\n<tr>\n<td>media<\/td>\n<td>Specifies on what device the linked document will be displayed, often used with selecting stylesheets based on the device in question<\/td>\n<\/tr>\n<tr>\n<td>rel<\/td>\n<td>Required. Specifies the relationship between the current document and the linked document<\/td>\n<\/tr>\n<tr>\n<td>rev<\/td>\n<td>Specifies the relationship between the linked document and the current document<\/td>\n<\/tr>\n<tr>\n<td>sizes<\/td>\n<td>Specifies the size of the linked resource. Only when <strong><em><code>rel=\"icon\"<\/code><\/em><\/strong><\/td>\n<\/tr>\n<tr>\n<td>target<\/td>\n<td>Specifies where the linked document is to be loaded<\/td>\n<\/tr>\n<tr>\n<td>type<\/td>\n<td>Specifies the media type of the linked document<\/td>\n<\/tr>\n<tr>\n<td>integrity<\/td>\n<td>Specifies a base64 encoded hash (sha256, sha384, or sha512) of the linked resource allowing the browser to verify its legitimacy.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n<p><!--more--><\/p>\n\n<h2 class=\"wp-block-heading\">JavaScript<\/h2>\n\n<h4 class=\"wp-block-heading\">Synchronous<\/h4>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"path\/to.js\"&gt;&lt;\/script&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">Standard practice is to place JavaScript <code><em><strong>&lt;script&gt;<\/strong><\/em><\/code> tags just before the closing <strong><em><code>&lt;\/body&gt;<\/code><\/em><\/strong> tag. Loading your scripts last allows your site&#8217;s visuals to show up more quickly and discourages your JavaScript from trying to interact with elements that haven&#8217;t loaded yet.<\/p>\n\n<h4 class=\"wp-block-heading\">Asynchronous<\/h4>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"path\/to.js\" async&gt;&lt;\/script&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">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 <strong><em><code>async<\/code><\/em><\/strong> 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.<\/p>\n\n<h4 class=\"wp-block-heading\">Deferred<\/h4>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"path\/to.js\" defer&gt;&lt;\/script&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n<h4 class=\"wp-block-heading\">&lt;noscropt&gt;<\/h4>\n\n<pre data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;noscript&gt;JavaScript disabled&lt;\/noscript&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">The <code><em><strong>&lt;noscript&gt;<\/strong><\/em><\/code> element defines content to be displayed if the user has scripts disabled or if the browser does not support using scripts. The <em><strong><code>&lt;noscript&gt;<\/code><\/strong><\/em> tag can be placed in either the <strong><em><code>&lt;head&gt;<\/code><\/em><\/strong> or the <code><em><strong>&lt;body&gt;<\/strong><\/em><\/code>.<\/p>\n\n<h2 class=\"wp-block-heading\">External CSS Stylesheet<\/h2>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"path\/to.css\" type=\"text\/css\"&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">The standard practice is to place CSS <code><em><strong>&lt;link&gt;<\/strong><\/em><\/code> tags inside the <strong><em><code>&lt;head&gt;<\/code><\/em><\/strong> 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 <code><em><strong>type<\/strong><\/em><\/code> attribute is not necessary in HTML5, because HTML5 usually supports CSS.<\/p>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"path\/to.css\" type=\"text\/css\"&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">and<\/p>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"path\/to.css\"&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">\u2026 do the same thing in HTML5.<\/p>\n\n<p class=\"wp-block-paragraph\">Another, though less common practice, is to use an <strong><em><code>@import<\/code><\/em><\/strong> statement inside direct CSS. Like this:<\/p>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;style type=\"text\/css\"&gt;\n @import(\"path\/to.css\")\n&lt;\/style&gt;\n&lt;style&gt;\n @import(\"path\/to.css\")\n&lt;\/style&gt;<\/pre>\n\n<h2 class=\"wp-block-heading\">Favicon<\/h2>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"icon\" type=\"image\/png\" href=\"\/favicon.png\"&gt;\n&lt;link rel=\"shortcut icon\" type=\"image\/x-icon\" href=\"\/favicon.ico\"&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">Use the mime-type <strong><em><code>image\/png<\/code><\/em><\/strong> for PNG files and <code><em><strong>image\/x-icon<\/strong><\/em><\/code> for icon <strong><em><code>(*.ico)<\/code><\/em><\/strong> files. For the difference, see this SO question.<\/p>\n\n<p class=\"wp-block-paragraph\">A file named <strong><em><code>favicon.ico<\/code><\/em><\/strong> at the root of your website will typically be loaded and applied automatically, without the need for a <strong><em>&lt;link&gt;<\/em><\/strong> tag. If this file ever changes, browsers can be slow and stubborn about updating their cache.<\/p>\n\n<h2 class=\"wp-block-heading\">Alternative CSS<\/h2>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"alternate stylesheet\" href=\"path\/to\/style.css\" title=\"yourTitle\"&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">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:<\/p>\n\n<p class=\"wp-block-paragraph\">Firefox lets the user select the stylesheet using the View &gt; Page Style submenu, Internet Explorer also supports this feature (beginning with IE 8), also accessed from View &gt; 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.<\/p>\n\n<p class=\"wp-block-paragraph\">(Source: the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Alternative_style_sheets\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"MDN Docs (opens in a new tab)\">MDN Docs<\/a>)<\/p>\n\n<h2 class=\"wp-block-heading\">Resource Hint: dns-prefetch, prefetch, prerender<\/h2>\n\n<h3 class=\"wp-block-heading\">Preconnect<\/h3>\n\n<p class=\"wp-block-paragraph\">The <strong><em><code>preconnect<\/code><\/em><\/strong> relationship is similar to <strong><em><code>dns-prefetch<\/code><\/em><\/strong> in that it will resolve the DNS. However, it will also make the TCP handshake and optional TLS negotiation. This is an experimental feature.<\/p>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"preconnect\" href=\"URL\"&gt;<\/pre>\n\n<h4 class=\"wp-block-heading\">DNS-Prefetch<\/h4>\n\n<p class=\"wp-block-paragraph\">Informs browsers to resolve the DNS for a URL, so that all assets from that URL load faster.<\/p>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"dns-prefetch\" href=\"URL\"&gt;<\/pre>\n\n<h4 class=\"wp-block-heading\">Prefetch<\/h4>\n\n<p class=\"wp-block-paragraph\">Informs the browsers that a given resource should be prefetched so it can be loaded more quickly.<\/p>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"prefetch\" href=\"URL\"&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">DNS-Prefetch resolves only the domain name whereas prefetch downloads\/stores the specified resources.<\/p>\n\n<h4 class=\"wp-block-heading\">Prerender<\/h4>\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"prerender\" href=\"URL\"&gt;<\/pre>\n\n<h2 class=\"wp-block-heading\">Link &#8216;media&#8217; attribute<\/h2>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"stylesheet\" href=\"test.css\" media=\"print\"&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n<p class=\"wp-block-paragraph\">The value of this attribute can be any of the <strong><em><code>mediatype<\/code><\/em><\/strong> values (similar to a CSS media query.<\/p>\n\n<h2 class=\"wp-block-heading\">Prev and Next<\/h2>\n\n<p class=\"wp-block-paragraph\">When a page is part of a series of articles, for instance, one can use <strong><em><code>prev<\/code><\/em><\/strong> and <strong><em><code>next<\/code><\/em><\/strong> to point to pages that are coming before and after.<\/p>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"prev\" href=\"http:\/\/stackoverflow.com\/documentation\/java\/topics\"&gt;\n&lt;link rel=\"next\" href=\"http:\/\/stackoverflow.com\/documentation\/css\/topics\"&gt;<\/pre>\n\n<h2 class=\"wp-block-heading\">Web Feed<\/h2>\n\n<p class=\"wp-block-paragraph\">Use the <strong><em><code>rel=\"alternate\"<\/code><\/em><\/strong> attribute to allow discoverability of your Atom\/RSS feeds.<\/p>\n\n<pre data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;link rel=\"alternate\" type=\"application\/atom+xml\" href=\"http:\/\/example.com\/feed.xml\" \/&gt;\n&lt;link rel=\"alternate\" type=\"application\/rss+xml\" href=\"http:\/\/example.com\/feed.xml\" \/&gt;<\/pre>\n\n<p class=\"wp-block-paragraph\">See the MDN docs for <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/MDN\/Contribute\/Tools\/Feeds\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"RSS feeds  (opens in a new tab)\"><em><strong><code>RSS feeds<\/code><\/strong><\/em> <\/a>and <strong><em><code><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/RSS\/Module\/Atom\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Atomic RSS (opens in a new tab)\">Atomic RSS<\/a><\/code><\/em><\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Attribute Details 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&hellip;<\/p>\n","protected":false},"author":1,"featured_media":331,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[76,111],"tags":[110,112,136,113],"class_list":["post-330","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-html-5-notes-for-professional","tag-html-5-notes","tag-html-5-tutorial","tag-html-resources","tag-html5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v27.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources) - DigitalHubZ<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources)\" \/>\n<meta property=\"og:description\" content=\"Attribute Details 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&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/\" \/>\n<meta property=\"og:site_name\" content=\"DigitalHubZ\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-29T10:44:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T10:48:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/11\/HTML5-Notes-For-Professionals-chapter-12-Linking-Resources.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"945\" \/>\n\t<meta property=\"og:image:height\" content=\"394\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DigitalHubZ\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DigitalHubZ\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/\"},\"author\":{\"name\":\"DigitalHubZ\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/person\\\/5a4074d837d6e5d22d665e5b7ca9e873\"},\"headline\":\"HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources)\",\"datePublished\":\"2019-11-29T10:44:10+00:00\",\"dateModified\":\"2026-02-26T10:48:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/\"},\"wordCount\":816,\"commentCount\":9,\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/HTML5-Notes-For-Professionals-chapter-12-Linking-Resources.jpg\",\"keywords\":[\"HTML 5 Notes\",\"HTML 5 Tutorial\",\"HTML Resources\",\"HTML5\"],\"articleSection\":[\"HTML\",\"HTML 5 Notes For Professional\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/\",\"name\":\"HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources) - DigitalHubZ\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/HTML5-Notes-For-Professionals-chapter-12-Linking-Resources.jpg\",\"datePublished\":\"2019-11-29T10:44:10+00:00\",\"dateModified\":\"2026-02-26T10:48:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/HTML5-Notes-For-Professionals-chapter-12-Linking-Resources.jpg\",\"contentUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/11\\\/HTML5-Notes-For-Professionals-chapter-12-Linking-Resources.jpg\",\"width\":945,\"height\":394},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-notes-for-professional-chapter-12-linking-resources\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\",\"name\":\"DigitalHubZ\",\"description\":\"Future-Ready Digital Solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\",\"name\":\"DigitalHubZ\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/digitalhubz.webp\",\"contentUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/digitalhubz.webp\",\"width\":1232,\"height\":369,\"caption\":\"DigitalHubZ\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/person\\\/5a4074d837d6e5d22d665e5b7ca9e873\",\"name\":\"DigitalHubZ\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g\",\"caption\":\"DigitalHubZ\"},\"sameAs\":[\"https:\\\/\\\/digitalhubz.com\"],\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/author\\\/digi_v1_wp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources) - DigitalHubZ","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/","og_locale":"en_US","og_type":"article","og_title":"HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources)","og_description":"Attribute Details 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&hellip;","og_url":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/","og_site_name":"DigitalHubZ","article_published_time":"2019-11-29T10:44:10+00:00","article_modified_time":"2026-02-26T10:48:13+00:00","og_image":[{"width":945,"height":394,"url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/11\/HTML5-Notes-For-Professionals-chapter-12-Linking-Resources.jpg","type":"image\/jpeg"}],"author":"DigitalHubZ","twitter_card":"summary_large_image","twitter_misc":{"Written by":"DigitalHubZ","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/#article","isPartOf":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/"},"author":{"name":"DigitalHubZ","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/person\/5a4074d837d6e5d22d665e5b7ca9e873"},"headline":"HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources)","datePublished":"2019-11-29T10:44:10+00:00","dateModified":"2026-02-26T10:48:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/"},"wordCount":816,"commentCount":9,"publisher":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/11\/HTML5-Notes-For-Professionals-chapter-12-Linking-Resources.jpg","keywords":["HTML 5 Notes","HTML 5 Tutorial","HTML Resources","HTML5"],"articleSection":["HTML","HTML 5 Notes For Professional"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/","url":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/","name":"HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources) - DigitalHubZ","isPartOf":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/#primaryimage"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/11\/HTML5-Notes-For-Professionals-chapter-12-Linking-Resources.jpg","datePublished":"2019-11-29T10:44:10+00:00","dateModified":"2026-02-26T10:48:13+00:00","breadcrumb":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/#primaryimage","url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/11\/HTML5-Notes-For-Professionals-chapter-12-Linking-Resources.jpg","contentUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/11\/HTML5-Notes-For-Professionals-chapter-12-Linking-Resources.jpg","width":945,"height":394},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-notes-for-professional-chapter-12-linking-resources\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.digitalhubz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML 5 Notes For Professional \u2013 Chapter \u2013 12 (Linking Resources)"}]},{"@type":"WebSite","@id":"https:\/\/www.digitalhubz.com\/blog\/#website","url":"https:\/\/www.digitalhubz.com\/blog\/","name":"DigitalHubZ","description":"Future-Ready Digital Solutions","publisher":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.digitalhubz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.digitalhubz.com\/blog\/#organization","name":"DigitalHubZ","url":"https:\/\/www.digitalhubz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2023\/03\/digitalhubz.webp","contentUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2023\/03\/digitalhubz.webp","width":1232,"height":369,"caption":"DigitalHubZ"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/person\/5a4074d837d6e5d22d665e5b7ca9e873","name":"DigitalHubZ","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/414c5bb85907e15e0f840541718ecc7420d52ea432b33f6a57761a674a52ebb7?s=96&d=mm&r=g","caption":"DigitalHubZ"},"sameAs":["https:\/\/digitalhubz.com"],"url":"https:\/\/www.digitalhubz.com\/blog\/author\/digi_v1_wp\/"}]}},"_links":{"self":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/330","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/comments?post=330"}],"version-history":[{"count":4,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/330\/revisions"}],"predecessor-version":[{"id":54874,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/330\/revisions\/54874"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/media\/331"}],"wp:attachment":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/media?parent=330"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/categories?post=330"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/tags?post=330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}