In this HTML web development tutorial and HTML reference sheet, you will learn how to use the HTML tag, complete with code examples demonstrating how to work with hyperlinks in your web pages.
The HTML Tag
In web development, the HTML 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 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 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 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 element to close out our tag.
In our example, the user will simply see:
Read More at Developer.comWhat are the Attributes of the HTML a Tag?
HTML tags have attributes, and the tag is no different. As we noted above, href is one such attribute. Other tag attributes include those listed below.
The HTML a Tag download Attribute
<a download = “nameOfYourFile”><a href=”/images/.testimage.png” download=”smileyface”>The HTML a Tag hreflang Attribute
<a hreflang=”en”>The HTML a Tag rel Attribute
The rel attribute for the HTML 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 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.
