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.
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:
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:
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.
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 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:
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:
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 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:
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 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:
The syntax for the rel attribute is:
This code will create a nofollow link that displayed “HTMLGoodies.com” in the user’s browser.
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:
The example syntax for the target attribute is:
The above code shows you how to open a new tab in HTML using the target attribute.
Read more HTML programming tutorials and reference sheets.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Advertise with TechnologyAdvice on HTMLGoodies and our other developer-focused platforms.
Property of TechnologyAdvice.
© 2022 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
source
