{"id":203,"date":"2019-07-07T17:58:03","date_gmt":"2019-07-07T17:58:03","guid":{"rendered":"https:\/\/wpproonline.com\/?p=203"},"modified":"2026-02-26T10:49:07","modified_gmt":"2026-02-26T10:49:07","slug":"html-5-chapter-6-anchors-and-hyperlinks","status":"publish","type":"post","link":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/","title":{"rendered":"HTML 5 Notes For Professional \u2013 Chapter \u2013 6 (Anchors and Hyperlinks)"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">href<\/h4>\n\n<p class=\"wp-block-paragraph\">Specifies the destination address. It can be an absolute or relative URL or the name of an anchor. An absolute URL is the complete URL of a website like http:\/\/example.com\/. A relative computer address points to a different directory and\/or document within the constant web site, e.g. \/about-us\/ points to the directory \u201cabout-us\u201d inside the root directory (\/). When pointing to another directory without explicitly specifying the document, web servers typically return the document \u201cindex.html\u201d inside that directory.<\/p>\n\n<p><!--more--><\/p>\n\n<h4 class=\"wp-block-heading\">hreflang<\/h4>\n\n<p class=\"wp-block-paragraph\">Specifies the language of the resource linked by the href attribute (which must be present with this one). Use language values from <a href=\"http:\/\/www.ietf.org\/rfc\/bcp\/bcp47.txt\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"BCP 47 (opens in a new tab)\">BCP 47<\/a> for HTML5 and <a href=\"http:\/\/www.ietf.org\/rfc\/rfc1766.txt\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"RFC 1766 (opens in a new tab)\">RFC 1766<\/a> for HTML 4.<\/p>\n\n<h4 class=\"wp-block-heading\">rel<\/h4>\n\n<p class=\"wp-block-paragraph\">Specifies the connection between the present document and therefore the connected document. For HTML5, the values must be <a href=\"https:\/\/www.w3.org\/TR\/2014\/REC-html5-20141028\/links.html#linkTypes\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"defined in the specification (opens in a new tab)\">defined in the specification<\/a> or registered in the <a href=\"http:\/\/microformats.org\/wiki\/existing-rel-values#HTML5_link_type_extensions\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Microformats wiki. (opens in a new tab)\">Microformats wiki.<\/a><\/p>\n\n<h4 class=\"wp-block-heading\">target<\/h4>\n\n<p class=\"wp-block-paragraph\">Specifies where to open the link, e.g. in a new tab or window. Possible values are _blank, _self, _parent, _top, and framename (deprecated). Forcing such behavior is not recommended since it violates the control of the user over a website.<\/p>\n\n<h4 class=\"wp-block-heading\">title<\/h4>\n\n<p class=\"wp-block-paragraph\">Specifies extra information about a link. The information is most often shown as a tooltip text when the cursor moves over the link. This attribute is not restricted to links, it can be used on almost all HTML tags.<\/p>\n\n<h4 class=\"wp-block-heading\">download<\/h4>\n\n<p class=\"wp-block-paragraph\">Specifies that the target will be downloaded when a user clicks on the hyperlink. The value of the attribute will be the name of the downloaded file. There are no restrictions on allowed values, and the browser will automatically detect the correct file extension and add it to the file (.img, .pdf, etc.). If the value is omitted, the original filename is used.<\/p>\n\n<p class=\"wp-block-paragraph\">Anchor tags are commonly used to link separate webpages, but they can also be used to link between different places in a single document, often within table of contents or even launch external applications. This topic explains the implementation and application of HTML anchor tags in various roles.<\/p>\n\n<h2 class=\"wp-block-heading\">Link to another site<\/h2>\n\n<p class=\"wp-block-paragraph\">This is the basic use of the <strong><em>&lt;a&gt;<\/em><\/strong> (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/a\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"anchor element (opens in a new tab)\">anchor element<\/a>) element:<\/p>\n\n<pre><code>&lt;a href=\"http:\/\/example.com\/\"&gt;Link to example.com&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">It creates a hyperlink, to the URL <em>http:\/\/example.com\/<\/em> as specified by the <strong><em>href<\/em><\/strong> (hypertext reference) attribute, with the anchor text &#8220;Link to example.com&#8221;. It would look something like the following:<\/p>\n\n<blockquote class=\"is-layout-flow wp-block-quote-is-layout-flow\">\n<p><a href=\"https:\/\/example.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"Link to example.com (opens in a new tab)\">Link to example.com<\/a><\/p>\n<\/blockquote>\n\n<p class=\"wp-block-paragraph\">To denote that this link leads to an external website, you can use the <em>external<\/em> link type:<\/p>\n\n<pre><code>&lt;a href=\"http:\/\/example.com\/\" rel=\"external\"&gt;example site&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">You can link to a site that uses a protocol other than HTTP. For example, to link to an FTP site, you can do,<\/p>\n\n<pre><code>&lt;a href=\"ftp:\/\/example.com\/\"&gt;This could be a link to a FTP site&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">In this case, the difference is that this anchor tag is requesting that the user&#8217;s browser connect to example.com using the File Transfer Protocol (FTP) rather than the Hypertext Transfer Protocol (HTTP).<\/p>\n\n<p class=\"wp-block-paragraph\"><a href=\"ftp:\/\/example.com\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"This could be a link to a FTP site (opens in a new tab)\">This could be a link to a FTP site<\/a><\/p>\n\n<h2 class=\"wp-block-heading\">Link to an anchor<\/h2>\n\n<p class=\"wp-block-paragraph\">Anchors can be used to jump to specific tags on an HTML page. The <strong><em>&lt;a&gt;<\/em><\/strong> tag can point to any element that has an id attribute. To learn more about IDs, visit the documentation about Classes and IDs. Anchors are mostly used to jump to a subsection of a page and are used in conjunction with header tags. Suppose you&#8217;ve created a page (<em>page1.html<\/em>) on many topics:<\/p>\n\n<pre><code>&lt;h2&gt;First topic&lt;\/h2&gt;\n&lt;p&gt;Content about the first topic&lt;\/p&gt;\n&lt;h2&gt;Second topic&lt;\/h2&gt;\n&lt;p&gt;Content about the second topic&lt;\/p&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">Once you have several sections, you may want to create a Table of Contents at the top of the page with quick-links (or bookmarks) to specific sections.<\/p>\n\n<p class=\"wp-block-paragraph\">If you gave an <strong><em>id<\/em><\/strong> attribute to your topics, you could then link to them<\/p>\n\n<pre><code>&lt;h2 id=\"Topic1\"&gt;First topic&lt;\/h2&gt;\n&lt;p&gt;Content about the first topic&lt;\/p&gt;\n&lt;h2 id=\"Topic2\"&gt;Second topic&lt;\/h2&gt;\n&lt;p&gt;Content about the second topic&lt;\/p&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">Now you can use the anchor in your table of contents:<\/p>\n\n<pre><code>&lt;h1&gt;Table of Contents&lt;\/h1&gt;\n&lt;a href='#Topic1'&gt;Click to jump to the First Topic&lt;\/a&gt;\n&lt;a href='#Topic2'&gt;Click to jump to the Second Topic&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">These anchors are also attached to the web page they&#8217;re on (<em>page1.html<\/em>). So you can link across the site from one page to the other by referencing the page <em>and<\/em> anchor name.<\/p>\n\n<pre><code>Remember, you can always &lt;a href=\"page1.html#Topic1\"&gt;look back in the First Topic&lt;\/a&gt; for supporting information.<\/code><\/pre>\n\n<h2 class=\"wp-block-heading\">Link to a page on the same site<\/h2>\n\n<p class=\"wp-block-paragraph\">You can use a <a href=\"https:\/\/en.wikipedia.org\/wiki\/Path_(computing)#Absolute_and_relative_paths\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"relative path (opens in a new tab)\">relative path<\/a> to link to pages on the same website.<\/p>\n\n<pre><code>&lt;a href=\"\/example\"&gt;Text Here&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">The above example would go to the file example at the root directory <strong>(\/)<\/strong> of the server.<\/p>\n\n<p class=\"wp-block-paragraph\">If this link was on <a href=\"http:\/\/example.com\">http:\/\/example.com<\/a>, the following two links would bring the user to the same location.<\/p>\n\n<pre><code>&lt;a href=\"\/page\"&gt;Text Here&lt;\/a&gt;\n&lt;a href=\"http:\/\/example.com\/page\"&gt;Text Here&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">Both of the above would go to the <em><strong>page<\/strong><\/em> file at the root directory of <em><strong>example.com<\/strong><\/em><\/p>\n\n<h2 class=\"wp-block-heading\">Link that dials a number<\/h2>\n\n<p class=\"wp-block-paragraph\">If the value of the href-attribute begins with tel:, your device will dial the number when you click it. This works on mobile devices or on computers\/tablets running software \u2013 like Skype or FaceTime \u2013 that can make phone calls.<\/p>\n\n<pre><code>&lt;a href=\"tel:11234567890\"&gt;Call us&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">Most devices and programs will prompt the user in some way to confirm the number they are about to dial.<\/p>\n\n<h2 class=\"wp-block-heading\">Open link in new tab\/window<\/h2>\n\n<pre><code>&lt;a href=\"example.com\" target=\"_blank\"&gt;Text Here&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">The <em><strong>target<\/strong><\/em> attribute specifies where to open the link. By setting it to<em><strong> _blank<\/strong><\/em>, you tell the browser to open it in a new tab or window (per user preference).<\/p>\n\n<blockquote class=\"is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>SECURITY VULNERABILITY WARNING!<\/strong><\/p>\n<p>Using <strong><em>target=&#8221;_blank&#8221;<\/em><\/strong> gives the opening site partial access to the <strong><em>window.opener<\/em><\/strong> object via JavaScript, which allows that page to then access and change the <em><strong>window.opener.location<\/strong><\/em> of your page and potentially redirect users to malware or phishing sites.<\/p>\n<p>Whenever using this for pages you do not control, add <em><strong>rel=&#8221;noopener&#8221;<\/strong><\/em> to your link to prevent the <em><strong>window.opener<\/strong><\/em> object from being sent with the request.<\/p>\n<p>Currently, Firefox does not support <em><strong>noopener<\/strong><\/em>, so you will need to use <em><strong>rel=&#8221;noopener noreferrer&#8221;<\/strong><\/em> for maximum effect.<\/p>\n<\/blockquote>\n\n<h2 class=\"wp-block-heading\">Link that runs JavaScript<\/h2>\n\n<p class=\"wp-block-paragraph\">Simply use the <strong><em>javascript:<\/em><\/strong> protocol to run the text as JavaScript instead of opening it as a normal link:<\/p>\n\n<pre><code>&lt;a href=\"javascript:myFunction();\"&gt;Run Code&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">You can also achieve the same thing using the <em><strong>onclick<\/strong><\/em> attribute:<\/p>\n\n<pre><code>&lt;a href=\"#\" onclick=\"myFunction(); return false;\"&gt;Run Code&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">The <strong><em>return false;<\/em><\/strong> is necessary to prevent your page from scrolling to the top when the link to # is clicked. Make sure to include all code you&#8217;d like to run before it, as returning will stop execution of further code.<\/p>\n\n<p class=\"wp-block-paragraph\">Also noteworthy, you can include an exclamation mark ! after the hashtag in order to prevent the page from scrolling to the top. This works because any invalid slug will cause the link to not scroll anywhere on the page,<br \/>because it couldn&#8217;t locate the element it references (an element with <em><strong>id=&#8221;!&#8221;<\/strong><\/em>). You could also just use any invalid slug (such as <em><strong>#scrollsNowhere<\/strong><\/em>) to achieve the same effect. In this case, <em><strong>return false;<\/strong><\/em> is not required:<\/p>\n\n<pre><code>&lt;a href=\"#!\" onclick=\"myFunction();\"&gt;Run Code&lt;\/a&gt;<\/code><\/pre>\n\n<blockquote class=\"is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Should you be using any of this?<\/strong><\/p>\n<p>The answer is almost certainly <strong><em>no<\/em><\/strong>. Running JavaScript inline with the element like this is fairly bad practice. Consider using pure JavaScript solutions that look for the element in the page and bind a function to it instead. Listening for an event.<\/p>\n<p>Also consider whether this element is really a <em><strong>button<\/strong><\/em> instead of a <em><strong>link<\/strong><\/em>. If so, you should use <strong><em>&lt;button&gt;<\/em><\/strong><\/p>\n<\/blockquote>\n\n<h2 class=\"wp-block-heading\">Link that runs email client<\/h2>\n\n<h4 class=\"wp-block-heading\">Basic usage<\/h4>\n\n<p class=\"wp-block-paragraph\">If the value of the <strong><em>href<\/em><\/strong>-attribute begins with <em><strong>mailto:<\/strong><\/em> it will try to open an email client on click:<\/p>\n\n<pre><code>&lt;a href=\"mailto:example@example.com\"&gt;Send email&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">This will put the email address <em><strong>example@example.com<\/strong><\/em> as the recipient for the newly created email.<\/p>\n\n<h4 class=\"wp-block-heading\">Cc and Bcc<\/h4>\n\n<p class=\"wp-block-paragraph\">You can also add addresses for cc- or bcc-recipients using the following syntax:<\/p>\n\n<pre><code>&lt;a href=\"mailto:example@example.com?cc=john@example.com&amp;bcc=jane@example.com\"&gt;Send email&lt;\/a&gt;<\/code><\/pre>\n\n<h4 class=\"wp-block-heading\">Subject and body text<\/h4>\n\n<p class=\"wp-block-paragraph\">You can populate the subject and body for the new email as well:<\/p>\n\n<pre><code>&lt;a href=\"mailto:example@example.com?subject=Example+subject&amp;body=Message+text\"&gt;Send email&lt;\/a&gt;<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">Those values must be <a href=\"https:\/\/en.wikipedia.org\/wiki\/Percent-encoding\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\" (opens in a new tab)\">URL encoded.<\/a><\/p>\n\n<p class=\"wp-block-paragraph\">Clicking on a link with <em><strong>mailto:<\/strong><\/em> will try to open the default email client specified by your operating system or it will ask you to choose what client you want to use. Not all options specified after the recipient&#8217;s address are supported in all email clients.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>href Specifies the destination address. It can be an absolute or relative URL or the name of an anchor. An absolute URL is the complete URL of a website like&hellip;<\/p>\n","protected":false},"author":1,"featured_media":207,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[76,111],"tags":[109,110,112,123,124,113],"class_list":["post-203","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","category-html-5-notes-for-professional","tag-html","tag-html-5-notes","tag-html-5-tutorial","tag-html-anchors","tag-html-hyperlinks","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 6 (Anchors and Hyperlinks) - 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-chapter-6-anchors-and-hyperlinks\/\" \/>\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 6 (Anchors and Hyperlinks)\" \/>\n<meta property=\"og:description\" content=\"href Specifies the destination address. It can be an absolute or relative URL or the name of an anchor. An absolute URL is the complete URL of a website like&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/\" \/>\n<meta property=\"og:site_name\" content=\"DigitalHubZ\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-07T17:58:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-26T10:49:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/07\/html5-chapter-6.png\" \/>\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\/png\" \/>\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=\"8 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-chapter-6-anchors-and-hyperlinks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/\"},\"author\":{\"name\":\"DigitalHubZ\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#\\\/schema\\\/person\\\/5a4074d837d6e5d22d665e5b7ca9e873\"},\"headline\":\"HTML 5 Notes For Professional \u2013 Chapter \u2013 6 (Anchors and Hyperlinks)\",\"datePublished\":\"2019-07-07T17:58:03+00:00\",\"dateModified\":\"2026-02-26T10:49:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/\"},\"wordCount\":1259,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html5-chapter-6.png\",\"keywords\":[\"HTML\",\"HTML 5 Notes\",\"HTML 5 Tutorial\",\"HTML Anchors\",\"HTML Hyperlinks\",\"HTML5\"],\"articleSection\":[\"HTML\",\"HTML 5 Notes For Professional\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/\",\"name\":\"HTML 5 Notes For Professional \u2013 Chapter \u2013 6 (Anchors and Hyperlinks) - DigitalHubZ\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html5-chapter-6.png\",\"datePublished\":\"2019-07-07T17:58:03+00:00\",\"dateModified\":\"2026-02-26T10:49:07+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html5-chapter-6.png\",\"contentUrl\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/html5-chapter-6.png\",\"width\":945,\"height\":394},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.digitalhubz.com\\\/blog\\\/html-5-chapter-6-anchors-and-hyperlinks\\\/#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 6 (Anchors and Hyperlinks)\"}]},{\"@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 6 (Anchors and Hyperlinks) - 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-chapter-6-anchors-and-hyperlinks\/","og_locale":"en_US","og_type":"article","og_title":"HTML 5 Notes For Professional \u2013 Chapter \u2013 6 (Anchors and Hyperlinks)","og_description":"href Specifies the destination address. It can be an absolute or relative URL or the name of an anchor. An absolute URL is the complete URL of a website like&hellip;","og_url":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/","og_site_name":"DigitalHubZ","article_published_time":"2019-07-07T17:58:03+00:00","article_modified_time":"2026-02-26T10:49:07+00:00","og_image":[{"width":945,"height":394,"url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/07\/html5-chapter-6.png","type":"image\/png"}],"author":"DigitalHubZ","twitter_card":"summary_large_image","twitter_misc":{"Written by":"DigitalHubZ","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/#article","isPartOf":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/"},"author":{"name":"DigitalHubZ","@id":"https:\/\/www.digitalhubz.com\/blog\/#\/schema\/person\/5a4074d837d6e5d22d665e5b7ca9e873"},"headline":"HTML 5 Notes For Professional \u2013 Chapter \u2013 6 (Anchors and Hyperlinks)","datePublished":"2019-07-07T17:58:03+00:00","dateModified":"2026-02-26T10:49:07+00:00","mainEntityOfPage":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/"},"wordCount":1259,"commentCount":3,"publisher":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/07\/html5-chapter-6.png","keywords":["HTML","HTML 5 Notes","HTML 5 Tutorial","HTML Anchors","HTML Hyperlinks","HTML5"],"articleSection":["HTML","HTML 5 Notes For Professional"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/","url":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/","name":"HTML 5 Notes For Professional \u2013 Chapter \u2013 6 (Anchors and Hyperlinks) - DigitalHubZ","isPartOf":{"@id":"https:\/\/www.digitalhubz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/#primaryimage"},"image":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/07\/html5-chapter-6.png","datePublished":"2019-07-07T17:58:03+00:00","dateModified":"2026-02-26T10:49:07+00:00","breadcrumb":{"@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/#primaryimage","url":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/07\/html5-chapter-6.png","contentUrl":"https:\/\/www.digitalhubz.com\/blog\/wp-content\/uploads\/2019\/07\/html5-chapter-6.png","width":945,"height":394},{"@type":"BreadcrumbList","@id":"https:\/\/www.digitalhubz.com\/blog\/html-5-chapter-6-anchors-and-hyperlinks\/#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 6 (Anchors and Hyperlinks)"}]},{"@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\/203","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=203"}],"version-history":[{"count":4,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/203\/revisions"}],"predecessor-version":[{"id":54898,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/posts\/203\/revisions\/54898"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/media\/207"}],"wp:attachment":[{"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/media?parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/categories?post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.digitalhubz.com\/blog\/wp-json\/wp\/v2\/tags?post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}