{"id":58,"date":"2022-03-19T09:52:55","date_gmt":"2022-03-19T09:52:55","guid":{"rendered":"https:\/\/staging.brightwhiz.com\/?post_type=topic&#038;p=58"},"modified":"2022-03-19T09:52:56","modified_gmt":"2022-03-19T09:52:56","slug":"html-links","status":"publish","type":"topic","link":"http:\/\/local.tutorials\/topic\/html-links\/","title":{"rendered":"HTML &#8211; Links"},"content":{"rendered":"\n<p>HTML links or hyperlinks are at the root of how the world wide web works. HTML links are used to allow users to jump from page to page by clicking on them. Links can be attached to almost any element.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"html-links-syntax\">HTML Links Syntax<\/h2>\n\n\n\n<p>The HTML <code>&lt;a&gt;<\/code> tag defines a hyperlink with the following syntax:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href=&quot;url&quot; [other optional attributes]&gt;Link Text&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>Example:<br>This example creates a link to <strong>Brightwhiz.com<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head&gt;\n      &lt;title&gt;This is document title&lt;\/title&gt;\n   &lt;\/head&gt;\t\n   &lt;body&gt;\n      &lt;p&gt;Click the link below:&lt;\/p&gt;\n      &lt;a href=&quot;https:\/\/brightwhiz.com&quot;&gt;This is a link&lt;\/a&gt;\n   &lt;\/body&gt;\t\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>The <code>&lt;a&gt;<\/code> element used as a link requires the <code>href<\/code> attribute, which indicates the link&#8217;s destination. The link text &#8220;This is a link&#8221; in the above example is the part of the link that will be visible to the visitor. Clicking on the link text will send the visitor to the specified URL address.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"the-target-attribute\">The target Attribute<\/h2>\n\n\n\n<p>By default, the linked page will be displayed in the current browser window. This behavior can be changed using the target attribute, which specifies where to open the linked document.<\/p>\n\n\n\n<p>The target attribute can have one of the following values:<\/p>\n\n\n\n<ul><li><strong>_self<\/strong>: Default. Opens the document in the same window\/tab as the current link<\/li><li><strong>_blank<\/strong>: Opens the document in a new window or tab<\/li><li><strong>_parent<\/strong>: Opens the document in the parent frame<\/li><li><strong>_top<\/strong>: Opens the document in the full body of the window<\/li><li><strong>targetframe<\/strong>: Opens the document in a named targetframe<\/li><\/ul>\n\n\n\n<p>Example<br>This <code>target=&quot;_blank&quot;<\/code> will open the linked document in a new browser window or tab:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href=&quot;https:\/\/brightwhiz.com&quot; target=&quot;_blank&quot;&gt;Opens in New Tab or Window&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p><strong>Test It<\/strong><\/p>\n\n\n\n<p>Click the following link to test the above example<\/p>\n\n\n\n<p><a href=\"https:\/\/brightwhiz.com\" target=\"_blank\" rel=\"noreferrer noopener\">Opens in New Tab or Window<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"absolute-urls-vs-relative-urls\">Absolute URLs vs. Relative URLs<\/h2>\n\n\n\n<p>When you link HTML documents with a destination on the same website (local link), you do not have to specify a complete URL for every link. All the examples in this tutorial have specified the website and therefore are termed Absolute URLs.<\/p>\n\n\n\n<p>A local link without the website specified is called a Relative URL.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;h1&gt;Absolute URLs&lt;\/h1&gt;\n&lt;p&gt;&lt;a href=&quot;https:\/\/brightwhiz.com\/&quot;&gt;W3C&lt;\/a&gt;&lt;\/p&gt;\n&lt;p&gt;&lt;a href=&quot;http:\/\/local.tutorials\/&quot;&gt;Google&lt;\/a&gt;&lt;\/p&gt;\n\n&lt;h1&gt;Relative URLs&lt;\/h1&gt;\n&lt;p&gt;&lt;a href=&quot;index.html&quot;&gt;Interesting Page&lt;\/a&gt;&lt;\/p&gt;\n&lt;p&gt;&lt;a href=&quot;\/another_file.html&quot;&gt;Another Page&lt;\/a&gt;&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"html-links-other-elements\">HTML Links &#8211; Other Elements<\/h2>\n\n\n\n<p>Almost all visual HTML elements can be turned into a link simply by placing it inside the <code>&lt;a&gt;<\/code> tags.<\/p>\n\n\n\n<p>Example<\/p>\n\n\n\n<p>This example shows how to create a link using an image.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href=&quot;index.php&quot;&gt;\n   &lt;img src=&quot;logo.png&quot; alt=&quot;Brightwhiz.com&quot;&gt;\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"what-about-base-path\">What About Base Path?<\/h2>\n\n\n\n<p>You can specify the base path within a website by using the <code>&lt;base&gt;<\/code> tag in your HTML document header. This tag is used to give a base path for all the links. So your browser will concatenate the given relative path to this base path and will make a complete URL. Absolute URLs will not be affected.<\/p>\n\n\n\n<p>Example<\/p>\n\n\n\n<p>The following example makes use of <code>&lt;base&gt;<\/code> tag to specify base URL and later we can use the relative path to all the links instead of giving a complete URL for every link.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n   &lt;head&gt;\n      &lt;title&gt;This is document title&lt;\/title&gt;\n      &lt;base href = &quot;https:\/\/brightwhiz.com\/&quot;&gt;\n   &lt;\/head&gt;\t\n   &lt;body&gt;\n      &lt;p&gt;Click the link below:&lt;\/p&gt;\n      &lt;a href=&quot;index.html&quot;&gt;This is a link&lt;\/a&gt;\n   &lt;\/body&gt;\t\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>The above will result in a full URL reading: <code>https:\/\/brightwhiz.com\/index.html<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"linking-to-a-page-section\">Linking to a Page Section<\/h2>\n\n\n\n<p>You can create a link to a particular section of an HTML document by specifying the id attribute.<\/p>\n\n\n\n<p>Note: name attribute was used prior to HTML5 but has since been deprecated in favor of id attribute.<\/p>\n\n\n\n<p>Example<\/p>\n\n\n\n<p>Using the deprecated name attribute.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;h1&gt;HTML Title &lt;a name=&quot;top&quot;&gt;&lt;\/a&gt;&lt;\/h1&gt;<\/code><\/pre>\n\n\n\n<p>Next, create a hyperlink to the section of the document with the <code>&lt;a&gt;<\/code> tag that has the name attribute with the value &#8220;top&#8221;.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href = &quot;index.html#top&quot;&gt;Go to the Top&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"using-id-attribute\">Using Id attribute<\/h2>\n\n\n\n<p>Specify the id attribute of any HTML element.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;h1 id=&quot;top&quot;&gt;HTML Title&lt;\/h1&gt;<\/code><\/pre>\n\n\n\n<p>Next, as shown above, create the link.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href = &quot;index.html#top&quot;&gt;Go to the Top&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"download-links\">Download Links<\/h2>\n\n\n\n<p>When you link to certain binary file formats such as EXE or ZIP, etc., They will be downloaded automatically. However, when you link to documents like PDF, or DOC they will be opened in the web browser. Sometimes that may not be what you want. If you would like your document to be downloaded instead you can specify the <code>download<\/code> attribute.<\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href=&quot;document.pdf&quot; download&gt;This is a downloadable document&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"link-to-a-resource\">Link to a Resource<\/h2>\n\n\n\n<p>HTML Links do not have to open HTML documents on the website. They can be used to access other results depending on the URI scheme.<\/p>\n\n\n\n<p>Example<\/p>\n\n\n\n<p>In this example, we have used the <code>mailto:<\/code> scheme and specified the email address in the <code>href<\/code> attribute. This opens the default email client to allow a user to send a new email.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&lt;a href=&quot;mailto:user@example.com&quot;&gt;Send an email&lt;\/a&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>HTML links or hyperlinks are at the root of how the world wide web works. HTML links are used to allow users to jump from page to page by clicking on them. Links can be attached to almost any element. HTML Links Syntax The HTML &lt;a&gt; tag defines a hyperlink with the following syntax: Example:This [&hellip;]<\/p>\n","protected":false},"featured_media":43,"comment_status":"open","ping_status":"closed","template":"","meta":[],"categories":[2],"tags":[],"subject":[7,8],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Learn HTML - Links Hyperlinks<\/title>\n<meta name=\"description\" content=\"HTML links are used to connect HTML documents, web pages, assets or sites with each other and typically navigated by clicking or taping them\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/local.tutorials\/topic\/html-links\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Learn HTML - Links Hyperlinks\" \/>\n<meta property=\"og:description\" content=\"HTML links are used to connect HTML documents, web pages, assets or sites with each other and typically navigated by clicking or taping them\" \/>\n<meta property=\"og:url\" content=\"http:\/\/local.tutorials\/topic\/html-links\/\" \/>\n<meta property=\"og:site_name\" content=\"Brightwhiz.com Tutorials and Courses\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/brightwhiz\" \/>\n<meta property=\"article:modified_time\" content=\"2022-03-19T09:52:56+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@brightwhizmag\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-links\/\",\"url\":\"http:\/\/local.tutorials\/topic\/html-links\/\",\"name\":\"Learn HTML - Links Hyperlinks\",\"isPartOf\":{\"@id\":\"http:\/\/local.tutorials\/#website\"},\"datePublished\":\"2022-03-19T09:52:55+00:00\",\"dateModified\":\"2022-03-19T09:52:56+00:00\",\"description\":\"HTML links are used to connect HTML documents, web pages, assets or sites with each other and typically navigated by clicking or taping them\",\"breadcrumb\":{\"@id\":\"http:\/\/local.tutorials\/topic\/html-links\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/local.tutorials\/topic\/html-links\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/local.tutorials\/topic\/html-links\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/local.tutorials\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Topics\",\"item\":\"http:\/\/local.tutorials\/topic\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML &#8211; Links\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/local.tutorials\/#website\",\"url\":\"http:\/\/local.tutorials\/\",\"name\":\"Brightwhiz.com Tutorials and Courses\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\/\/local.tutorials\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/local.tutorials\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/local.tutorials\/#organization\",\"name\":\"Brightwhiz.com\",\"url\":\"http:\/\/local.tutorials\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"contentUrl\":\"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png\",\"width\":706,\"height\":135,\"caption\":\"Brightwhiz.com\"},\"image\":{\"@id\":\"http:\/\/local.tutorials\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/brightwhiz\",\"https:\/\/twitter.com\/brightwhizmag\",\"https:\/\/www.instagram.com\/glamorglaze\/\",\"https:\/\/www.pinterest.com\/sobbayi\/\",\"https:\/\/www.youtube.com\/c\/Sobbayi\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Learn HTML - Links Hyperlinks","description":"HTML links are used to connect HTML documents, web pages, assets or sites with each other and typically navigated by clicking or taping them","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":"http:\/\/local.tutorials\/topic\/html-links\/","og_locale":"en_US","og_type":"article","og_title":"Learn HTML - Links Hyperlinks","og_description":"HTML links are used to connect HTML documents, web pages, assets or sites with each other and typically navigated by clicking or taping them","og_url":"http:\/\/local.tutorials\/topic\/html-links\/","og_site_name":"Brightwhiz.com Tutorials and Courses","article_publisher":"https:\/\/www.facebook.com\/brightwhiz","article_modified_time":"2022-03-19T09:52:56+00:00","og_image":[{"width":640,"height":360,"url":"http:\/\/local.tutorials\/wp-content\/uploads\/2022\/03\/tutorial-html5.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@brightwhizmag","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/local.tutorials\/topic\/html-links\/","url":"http:\/\/local.tutorials\/topic\/html-links\/","name":"Learn HTML - Links Hyperlinks","isPartOf":{"@id":"http:\/\/local.tutorials\/#website"},"datePublished":"2022-03-19T09:52:55+00:00","dateModified":"2022-03-19T09:52:56+00:00","description":"HTML links are used to connect HTML documents, web pages, assets or sites with each other and typically navigated by clicking or taping them","breadcrumb":{"@id":"http:\/\/local.tutorials\/topic\/html-links\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/local.tutorials\/topic\/html-links\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/local.tutorials\/topic\/html-links\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/local.tutorials\/"},{"@type":"ListItem","position":2,"name":"Topics","item":"http:\/\/local.tutorials\/topic\/"},{"@type":"ListItem","position":3,"name":"HTML &#8211; Links"}]},{"@type":"WebSite","@id":"http:\/\/local.tutorials\/#website","url":"http:\/\/local.tutorials\/","name":"Brightwhiz.com Tutorials and Courses","description":"","publisher":{"@id":"http:\/\/local.tutorials\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/local.tutorials\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/local.tutorials\/#organization","name":"Brightwhiz.com","url":"http:\/\/local.tutorials\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/","url":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","contentUrl":"https:\/\/staging.brightwhiz.com\/wp-content\/uploads\/2022\/03\/brightwhiz-com-logo-orange.png","width":706,"height":135,"caption":"Brightwhiz.com"},"image":{"@id":"http:\/\/local.tutorials\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/brightwhiz","https:\/\/twitter.com\/brightwhizmag","https:\/\/www.instagram.com\/glamorglaze\/","https:\/\/www.pinterest.com\/sobbayi\/","https:\/\/www.youtube.com\/c\/Sobbayi"]}]}},"_links":{"self":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic\/58"}],"collection":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/types\/topic"}],"replies":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/comments?post=58"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media\/43"}],"wp:attachment":[{"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/media?parent=58"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/categories?post=58"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/tags?post=58"},{"taxonomy":"subject","embeddable":true,"href":"http:\/\/local.tutorials\/wp-json\/wp\/v2\/subject?post=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}