HTML Anchors

An anchor in its most generic form is created using the code below

<a class="style" id="name" target="text" type="text" href="source">Description</a>

• The class attribute is discussed here. One can locally alter some aspects of the assigned style by defining an inline style using the code style="color:...". Needless to say, only those style attributes that require altering/adding need to be specified.
• The id attribute is discussed here.
• The events available across all three browsers - Firefox, Opera and IE - are discussed here.
• The style attribute is used to assign inline CSS styling information to the element. The specification takes the form style="color:...". Inline styling should be used sparingly to temporarily override CSS attributes inherited from a class specification.
• target="text" determines the window in which the target resource will be displayed. This can have one of the intrinsic values described here. If no target attribute is specified, the target document will replace the current one.
• type="text" describes the nature of the resource - the MIME type - being targeted by the anchor. For instance type="image/png" indicates that the anchor points to a PNG image file. Not specifying the target type can cause HTML validators to complain loudly. However, browsers are smarter and usually interpret the anchor correctly even when the target type attribute is missing. Our belief is that it is better, and usually safe, to abandon validation compliance in favor of brevity - anchors are the life blood of HTML, so missing out the target type attribute could save valuable server bandwidth in the long term.
• Finally href="source" indicates the location of the hyperlink. The precise nature of source depends on the location of the resource being pointed to. There are several possibilities
  • <a href="buttons.shtml">Buttons</a> - indicates a file from the same location as the current one. Needless to say it is possible to specify a different virtual directory at the location in question, drop back one directory level using .. etc. When specifying virtual directories and subdirectories remember to use the solidus, /, not the backward slash, \, so familiar to Windows users.
  • <a href="http://www.google.com">Google</a> - indicates an external resource, i.e. not one on the site that delivered the current web page. Note that the path to the resource has to be indicated in full, inclusive of the protocol to be used.
  • <a href="url"#data>Data</a> - provides a link to the element bearing the id data at the location url.
    
    For instance the link Back to Top created using the code <a href="anchors.shtml"#top> points to the anchor < a id="top"><\a><h1>HTML Anchors<\h1> at the top of this page. Needless to say, instead of being blank - as in this example - the anchor pointed to could contain visible text or images.
    
    A very common use for such internal links is to create a "FAQ" page with questions at the top of the page followed by a sequence of answers. A link is placed next to each answer to take the user back to the list of questions. In such cases, having to manage mutiple URL references is wasteful, tedious and prone to error. It is better to use a base specification in the document header and dispense with the need for specifying a URL altogether. Thus in the present instance one would define the base URL as being

    <base href= "http://www.brandspatch.com/.../anchors.shtml"
    

    and simply use href=#top in the anchor specification.
  • <a href="javascript:JSFunc( )"> Call JS Function</a> - indicates that the javascript function JSFunc - defined in an external script imported by the present document or a script defined in the head section of the document - should be called when the user clicks on the anchor.

  • <a href= "mailto:info@brandspatch.com">Contact</a>

    - indicates an email link which when clicked causes the user's email client to be opened with the specified address in the To field. It is also possible to pass additional parameters to the email client thus
    
    <a href = "mailto:info@brandspatch.com?cc = sales@brandspatch.com
&subject = CSS%20with%20HTML"> Contact</a>
    
    Note the URL encoding!

As with any other HTML element it is possible to redefine style attributes for the anchor inline using the format style="..." . A non-standard attribute that you may want to consider using with some anchors is rel="nofollow". This attribute has been used since 2005 by Google - and now by all major search engines - to ignore hyperlinks so they do not end up artifically boosting the pagerank of the resource they link to. You would, for instance, use this with text-link advertisements or to any links that arise from user contributions to the page.

A warning worth adding on the subject of mailto anchors - putting in email addresses on a website is a great way to invite email address harvesters to get hold of your email address and shower you with junk mail. There are two ways of reducing this risk:

• Replace the mailto link with a contact form which posts the user's comments to a server side script which then relays the mail to a real email address. The drawback here is that many users do not like contact forms - they are too restrictive.
• Instead of a searchable mailto link coded into your webpage use a JavaScript anchor or code the onmouseover event for the anchor to change the href attribute on the fly as described here.