Overview
The HTML hyperlink uses an <a> tag to create a link to another document, image, video, or to a section of the current document. It contains the (href) attribute which is the URL of the destination page, image, or video.
HTML links can have absolute URLs (complete URLs that begin with HTTP or HTTPS) or can use relative URLS.
Absolute URL:
<a href="https://www.1smartchicken.com/blog/index.html">Home Page</a>However, if the document we are linking to lives within a directory called /blog we don’t need to write the entire address beginning with HTTP/HTTPS. We can simply refer to that directory and then the document we are linking to.
Relative URL:
<a href="/blog/index.html">Home Page</a>Note
This only works if the document your are working on lives in the directory above the /blog directory – meaning the /blog directory is a child directory of your document’s current location. If you are in a directory within the /blog directory or alongside the directory (a sibling directory at the same depth level), you will need to use ../ before the directory to raise your relative link one directory before linking down to your intended target. If you need to raise yourself two directories, you would use ../../ and so on.
<!-- moves up one directory and then down to the targeted doc -->
<a href="../blog/index.html">Home Page</a>
<!-- moves up two directories and then down to the targeted doc -->
<a href="../../blog/index.html">Home Page</a>The <a> tag can also be used inside another tag like a paragraph <p> or heading <h1>. Only the text inside the two <a> tags will be the link.
<p>Please visit our <a href="https://www.1smartchicken.com">Home Page</a>.</p>The <a> tag can also wrap around another element or even multiple elements to make the entire section a link.
<a href="https://www.1smartchicken.com">
<h2>Home Page</h2>
<p>Please visit us and say hello.</p>
</a>Attributes
The following attributes can be using within in the <a> tag.
| Attribute | Value | Description |
|---|---|---|
| download | filename | Specifies that the target will be downloaded when a user clicks on the hyperlink |
| href | URL | Specifies the URL of the page that the link goes to |
| hreflang | language_code | Specifies the language of the linked document |
| media | media_query | Specifies for what media/device the linked document is optimized |
| ping | list_of_URLs | Specifies a space-separated list of URLs to which, when the link is followed, post requests with the body ping will be sent by the browser; typically used for tracking |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin same-origin strict-origin-when-cross-origin unsafe-url | Specifies which referrer information to send with the link |
| rel | alternate author bookmark external help license next nofollow noreferrer noopener prev search tag | Specifies the relationship between the current document and the linked document |
| target | _blank _parent _self _top | Specifies where to open the linked document |
| type | media_type | Specifies the media type of the linked document |
Target Attribute
There are several target attributes that can be used inside an <a> tag. Fore example, the following will load the linked document in a new tab or window (depending on how your browser is setup).
<a href="https://www.1smartchicken.com" target="_blank">Home Page</a>The target attribute can have one of the following values:
| Target | Description |
|---|---|
| _self | Opens in the same tab/window (default) |
| _blank | Opens in a new tab/window |
| _parent | Opens in the parent frame if using frames |
| _top | Opens in the full body of the current tab/window which is helpful when using frames |
Title Attribute
Another attribute often used is the title attribute which provides the user a “hint” at what the link does. When they hover over it, a tooltip will show (small popup) that provides the link title.
<a href="https://www.1smartchicken.com" title="Link to Home page" target="_blank">Home Page</a>HTML Notes:
- In our HTML section the term “tag” and “element” are often used interchangeably to refer to both the tag used to create a page element and the element created by the tag (<p> tag = <p> element = paragraph on the page)
- HTML5 is not case sensitive; so <P> is the same as <p>, <H1> is the same as <h1>
- Global attributes can be used with all HTML tags and are therefore not mentioned on every tag page
- To write clean, readable HTML code, it is best to use indentation whereas elements within elements are indented (tabbed or spaces) to create something that looks like a project outline
- The browser will automatically remove any extra spaces and lines in your HTML code when the page is displayed
- Double quotes or single quotes can be used around HTML attribute values, but when the attribute value itself contains one form of quote, it will be necessary to use the other around the attribute
We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.