In this HTML web development tutorial and HTML reference sheet, you will learn how to use the HTML <a> tag, complete with code examples demonstrating how to work with hyperlinks in your web pages.
The HTML Tag
In web development, the HTML <a> tag is used to define a hyperlink or “link” to either an internal or external web page or some other type of resource. These links have a state and will look different depending upon several factors. For instance, a link’s text that has been visited – or clicked on – is typically purple and underlined. If the text of the link has not been clicked on, and is therefore unvisited, will be blue and underlined. Active links, meanwhile, are usually red and underlined.
While the above is typically true, note that some web designers will use cascading style sheets (CSS) or templates that allow for different styling on hyperlinks and links.
The syntax for a basic <a> tag in HTML is as follows:
<a href="https://www.htmlgoodies.com"> Read More at Developer.com</a>
In the example of how to create a hyperlink in HTML, the opening <a> tag is followed by an attribute known as href, which web developers use to indicate what URL the link should “open” up in the browser. We use the = sign followed by a value enclosed in two quotation marks to signify what web address needs to be opened. Next, we add some text after the close of our <a> tag, which is the text that will be displayed on the screen and in which the link will be contained. Finally, we use the closing </a> element to close out our <a> tag.
In our example, the user will simply see:
Read More at Developer.com
in their browser. By default, unless otherwise indicated by a template or CSS style, links will open in the same browser. For best practices, we recommend opening all links in a new browser instead. We will demonstrate how to achieve this in a section below.
What are the Attributes of the HTML a Tag?
HTML tags have attributes, and the <a> tag is no different. As we noted above, href is one such attribute. Other <a> tag attributes include those listed below.
The HTML a Tag download Attribute
The download attribute in HTML is used when you want someone to be able to download a file, whose location is specified in the href attribute, versus visiting or viewing the file when a hyperlink is clicked. The syntax for the download attribute is:
<a download = “nameOfYourFile”>
You may also include the path of the file that is being downloaded and assign the download a name that differs from its filename. To do that, you would write the following HTML syntax:
<a href=”/images/.testimage.png” download=”smileyface”>
Writing this HTML script will cause the testimage.png file that is located in the /images folder to be downloaded under the new name smileyface.png.. In cases like this, the web browser can automatically detect the file type and so there is no need for the web developer to specify the type of file.
The HTML a Tag hreflang Attribute
The hreflang attribute of the HTML a tag tells the browser what language the linked document is written in. The syntax for the hreflang attribute is:
<a hreflang=”en”>
This code would tell the browser that the linked document is written in English. If we placed the value as “fi” it would be Finnish; set the value to “eo” and it would be Esperanto, and so forth.
The HTML a Tag rel Attribute
The rel attribute for the HTML <a> tag is used to denote certain information about the document being linked to or about the link itself. The following values are all possible:
- alternate: used when you want to present the page as translated, printable version, or a mirror
- author: used when you want to link to the author of the document or let search engines know who authored the page
- bookmark: used to provide a bookmark for the URL
- external: used when you are linking to a website that is not part of the current website – for example when you are linking to someone else’s website
- help: used when you are linking to a help document
- license: used when you are linking to licensing documentation
- next: used when you want to link to the “next” part of a series
- nofollow: part of search engine optimization; used to let Google and other search engines know that the link is sponsored or paid for
- prev: like the “next” value, this value is used to denote the previous part of a series
- tag: used when you want to tag a page with a certain keyword or tag
The syntax for the rel attribute is:
<a href=”https://www.htmlgoodies.com” rel=”nofollow”> HTMLGoodies.com</a>
This code will create a nofollow link that displayed “HTMLGoodies.com” in the user’s browser.
The HTML a Tag target Attribute
The target attribute of the HTML <a> tag is used to tell the Internet browser how a link should be opened. The options include: _blank, _parent, _top, and _self:
- _blank: used to open a page in a new tab or a new window. Mostly used when linking to another website, so you can keep people on your website and make it so they do not navigate from your site.
- _parent: used to open a page within the parent frame
- _self: used to open a page within the same window. The value is set to this as default. Good for using when you are navigating within your own website.
- _top: used to open a page within a full window
The example syntax for the target attribute is:
<a href=”https://www.htmlgoodies.com” target=”_blank”> HTMLGoodies.com</a>
The above code shows you how to open a new tab in HTML using the target attribute.
