Links
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a new section within the current document. When you move the cursor over a link in a web page, the arrow will turn into a little hand. Links are what make web pages what they are.
Links are specified in HTML using the <a> tag, which can be used in two ways:
• To create a link to another document, by using the href attribute
• To create a bookmark inside a document, by using the id attribute
The <a> element indicates a hyperlink anchor (see section Hyperlinks). At least one of the name and href attributes should be present. Attributes of the <a> element:
• Href: Gives the URL of the head anchor of a hyperlink.
• ID: Gives the name of the anchor, and makes it available as a head of a hyperlink. For XHTML.
• Name: Gives the name of the anchor, and makes it available as a head of a hyper- link. For HTML, old.
• Title: Suggests a title for the destination resource.
• Rel: This attribute gives the relationship(s) described by the hyperlink. The value is a whitespace separated list of relationship names. The semantics of link relationships are not specified in this document.
• Rev: Same as the rel attribute, but the semantics of the relationship are in the reverse direction. A link from A to B with rel=”X” expresses the same relationship as a link from B to A with rev=”X”. An anchor may have both rel and rev attributes.
• Urn: Specifies a preferred, more persistent identifier for the head anchor of the hyperlink. The syntax and semantics of the urn attribute are not yet specified.
• Methods: Specifies methods to be used in accessing the destination, as a whitespace-separated list of names. The set of applicable names is a function of the scheme of the URI in the HREF attribute. For similar reasons as for the Title attribute, it may be useful to include the information in advance in the link. For
example, the HTML visitor agent may choose a different rendering as a function of the methods allowed; for example, something that is searchable may get a different icon.
<a href=”URL” title=”Webpage Title”>Webpage Title</a>
Title Attribute for Links
Accessibility/usability requires adding a title attribute to all links, just like the alt and title attributes are added to images.
In addition, the title attribute is where you can apply SEO techniques. On one hand, you can simple offer a quick one or two-word bit of information about what the link is, or you can add reasonable SEO-enhancing description.
<a href=”URL” title=”About Us”> About Us</a>
<a href=”URL” title=”About Company Name and Our Team”> About Us</a>
Kinds of Links
• Absolute URLs: An absolute URL is a full http address for a website somewhere in the Internet, since this is the only way you can find the address. You would use it for links external to your website, and inside your own website for submitted form redirect pages. It is the fully typed out URL address.
• Relative URLs: Relative links are for pages in your own web project, and they link to these files relative to where they are in relation to the page being linked from. They contain partial link information: href=”images/imagename.ext”
• Email links: This operates the same way as normal links, but instead of linking to a web page, you link to an email address: href=”mailto:emailname@domain.com”
• Anchor links: While all links are anchors, anchoring links are usually to a specific point in either the same document as the link, or to a specific place in another document in your website. They are used to shortcut the jump from the link to the information, such as using a links of section links on a long FAQs page, or jump- ing from a reference on one page to its citation on a reference listing page. <a id=”top”>
• Images: Images are not linked using the <a> tag, but pulled in with the <img> tag. However, because you are still asking your code to show an image some- where in your website, the linking locations below apply.
Different types of links
Link Locations
Linking only works when you clearly code where the item being linked to actually is. Sometimes you will link to a web page on the Internet; much of the time, you will link to other pages in your own website, Occasionally, you will even link to another segment of the same page you are linking from.
The key is to know in what directory the page you are working on is, and the folder, sub-
folder, and/or just the file name you are linking to.
• Same directory: If you are linking from your index.html page to the about.html page in the same directory, you are moving in the same level. This link is easy:
<a href=”about.html” title=”About Our Company”>About Us</a>
• Moving down a level: You would use this when you are linking to a file in a subfolder of the directory you are currently in, or one level below you. The usual example would be linking to an image in your images subfolder:
<img src=”images/ tortiecat.jpg” alt=”Tortoiseshell Cat” title=” Tortoiseshell Cat” />
• Moving up a level: You would do this if you were inside a subfolder of your web- site and needed to link to a file that was outside your folder – in essence, one level above you. Say you are in one of the About Us web page's secondary navigation files, like Staff Bio, and wanted to get back to the About Us page:
<a href=”../about.html” title=”About Our Company”>About Us</a>
• Moving up multiple levels: This works the same way as moving up a level, except that you jump up more than one level by adding another ../
<a href=”../../about.html” title=”About Our Company”>About Us</a>
• Email address: <a href=mailto:name@domain.com” title=”Email FirstName”> Email Us!</a>
Linking on the same page is a different animal. This is an anchor link, and instead uses the id attribute. You would use this if you had coded a long page, and ever couple of screen scrolls down you wanted a Back to Top link that, when clicked, would send the viewer back to the top of the page. This code is actually a 2-step process – setting the anchor that is being linked to, and placing the link to that anchor:
XHTML Version
• Anchor - <a id=”top”>Top of the Page</a>
Link - <a href=”#top” title=”Back to Top link”>Back to Top</a>
HTML Version
• Anchor - <a name=”top”>Top of the Page</a>
Link - <a href=”#top” title=”Back to Top link”>Back to Top</a>
Link Output
So, you have links. Where do the linked items open? On the Web, you've seen pages open in place of the page with the link you just clicked. In other cases, it opens in a new window or tab.
Output forms include:
• Self: When a visitor clicks a link without a target attribute, the new page will open over the page s/he is on. If s/he starts looking at that new website, s//he might not hit the browser's back button and return to your website – a lost visitor.
• Window: When a visitor clicks a link with a target attribute, the link usually opens in a new window, so that two windows are now open – your website and the linked page. This can help you keep visitors in the vicinity of your website, unless they get frustrated with too many open windows.
• Tab: If a visitor has a browser set to ‘open new tabs', or chooses to do that from a right-click context menu on the link, the new page will open in a new tab in the same window. This is efficient but many browsers just default to new windows.
Target
The target attribute is currently supported in all major browsers, and is used to tell the link where the linked page should open. Sites are using target=”_blank” for links to make sure they will open the link in a new window and keep the visitor on the site, rather than potentially losing the visitor if s/he doesn't use the browser's back button to return.
The values include:
• _blank: Open the linked document in a new window. Opens a new window every time it is clicked.
• _new: This will only spawn one new window and every link clicked with a target value of _new will replace the page loaded in the previously spawned window.
• _self: Open the linked document in the same frame as it was clicked (this is de- fault)
• _parent: Open the linked document in the parent frameset
• _top: Open the linked document in the full body of the window
• Framename: Open the linked document in a named frame
Unfortunately, the target attribute is not recognized in strict doctype XHTML, so you need another option. You can instead use limited JavaScript to simply open the link in a new window.
<script type=”text/javascript”>
<!--window.open(‘URL to open’,’window name’,’attribute1,attribute2’) -->
</script>
Visitor Choice
Many web professionals think that Internet ethics require you to let the website visitor decide how s/he wants to open the links. Web savvy individuals often do not like new windows since they know how to open a new window or tab when they want. Less experienced visitors might not know that you can right-click on a link to get a context menu with those choices. Some visitors might be filling out a form on a page and don't want to lose their work to check something else out on the website. Some visitors don't want to be bothered and want you to give them that convenience built in.
If you decide to go with not giving your links a target, keep in mind a couple of cases when you should still consider it.
• When opening a PDF or some kind of media: This can take more time than people like, so opening it in a new window lets them keep perusing your site while they wait.
• If you have anything linked on a form or info-gathering page that would be canceled out if the visitor navigated away.
• If you really need to visitor to keep your page active while visiting another page.
• If you are opening a link to someone else's website from your own.