A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location. In other words, this Hypertext Reference is where users will navigate to if they do click on this link. Use the demonstration below as a reference.
The World Wide Web got its spidery name from the plentiful connections (links) that link websites together with the click of a button. What most people don’t know is that HTML links are actually HTML anchors constructed using anchor tags (<a>).
<a href=”url”>link text</a>
In HTML, links are defined with the <a> tag:
HTML Text Link Examples:
<a href=”https://www.zulweb.com”>Visit ZulWeb</a>
<a href=”http://www.espn.com/” target=”_blank”>ESPN Home</a>
<a href=”http://www.yahoo.com/” target=”_blank”>Yahoo Home</a>
HTML Text Link Code:
Global – href=”http://www.cnn.com/” Links to other domains outside your website domain.
Local – href=”../internal/mypage2.html” Links to other pages within your website domain.
Internal – href=”#anchorname” Links to anchors embedded in the current web page.
HTML – Link Targets
The target attribute defines how each link will open when clicked. Will each one open in a new window, or will each one open in the current browser window? As the web designer, you call the shots as to how a user navigates from page to page, so long as you know how to handle the target attribute.
|_blank||Opens the linked document in a new window or tab|
|_self||Opens the linked document in the same frame as it was clicked (this is default)|
|_parent||Opens the linked document in the parent frame|
|_top||Opens the linked document in the full body of the window|
|framename||Opens the linked document in a named frame|
The two most important values are the top two, (target=”_blank” and target=”_self”). The _self value is generally the default. It loads each new page in the current browser window, while _blank opens up a new web browser window with each click of the text link.
<a href=”https://www.zulweb.com” target=”_blank”>ZulWeb</a>
The code below shows how you would link to https://www.zulweb.com, a popular sports website. The target attribute is added to allow the browser to open ZulWeb in a new window, so that the viewer can have a window that remains opened to our website. Here’s the example.
HTML Links – Image as Link
It is common to use images as links:
<a href=”default.html”><img src=”image.jpg” alt=”HTML tutorial” width=”300″ height=”250″></a>
<a href=”default.html”><img src=”image.jpg” alt=”HTML tutorial” style=”width:42px; height:42px; border:0″></a>
HTML – Email Links
<a href=”mailto:email@example.com?subject=Feedback” > Email@ZulWeb </a>
Creating an email link is simple. If you want people to mail you about your site, a good way to do it is place an email link with a subject line already filled out for them. HTML Email Link Code:
HTML – Download Links
<a href=”your file.zip”>Text Document</a>
Placing files available for download is done in exactly the same fashion as placing text links. However, things become complicated if we want to place image links for download. The best solution for images is to use a thumbnail links, which we will discuss in the next lesson. HTML Download Link Code:
- Use the HTML <a> element to define a link
- Use the HTML href attribute to define the link address
- Use the HTML target attribute to define where to open the linked document
- Use the HTML <img> element (inside <a>) to use an image as a link
- Use the HTML id attribute (id=”value”) to define bookmarks in a page
- Use the HTML href attribute (href=”#value”) to link to the bookmark