The Anchor Tag Unleashed- Part 1

  • strict warning: Declaration of views_handler_filter::options_validate() should be compatible with views_handler::options_validate($form, &$form_state) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/includes/filter.handlers.inc on line 526.
  • strict warning: Declaration of views_handler_filter::options_submit() should be compatible with views_handler::options_submit($form, &$form_state) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/includes/filter.handlers.inc on line 526.
  • strict warning: Declaration of views_handler_filter_many_to_one::init() should be compatible with views_handler_filter::init(&$view, $options) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/includes/filter.handlers.inc on line 1488.
  • strict warning: Declaration of views_handler_argument::init() should be compatible with views_handler::init(&$view, $options) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/includes/argument.handlers.inc on line 694.
  • strict warning: Declaration of views_plugin_display::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/includes/plugins.inc on line 1861.
  • strict warning: Declaration of views_plugin_display::options_submit() should be compatible with views_plugin::options_submit(&$form, &$form_state) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/includes/plugins.inc on line 1861.
  • strict warning: Declaration of views_plugin_style_default::options() should be compatible with views_object::options() in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/includes/plugins.inc on line 3100.
  • strict warning: Declaration of views_plugin_row::options_validate() should be compatible with views_plugin::options_validate(&$form, &$form_state) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/includes/plugins.inc on line 3673.
  • strict warning: Declaration of views_plugin_row::options_submit() should be compatible with views_plugin::options_submit(&$form, &$form_state) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/includes/plugins.inc on line 3673.
  • strict warning: Declaration of views_handler_field_comment::init() should be compatible with views_handler_field::init(&$view, $options) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/comment.views.inc on line 480.
  • strict warning: Declaration of views_handler_field_username_comment::init() should be compatible with views_handler_field::init(&$view, $options) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/comment.views.inc on line 527.
  • strict warning: Declaration of views_handler_field_node_new_comments::pre_render() should be compatible with views_handler_field::pre_render($values) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/comment.views.inc on line 803.
  • strict warning: Declaration of views_handler_filter_node_status::operator_form() should be compatible with views_handler_filter::operator_form(&$form, &$form_state) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/node.views.inc on line 1112.
  • strict warning: Declaration of views_handler_field_accesslog_path::init() should be compatible with views_handler_field::init(&$view, $options) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/statistics.views.inc on line 289.
  • strict warning: Declaration of views_handler_field_file::init() should be compatible with views_handler_field::init(&$view, $options) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/system.views.inc on line 225.
  • strict warning: Declaration of views_handler_filter_term_node_tid::value_validate() should be compatible with views_handler_filter::value_validate($form, &$form_state) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/taxonomy.views.inc on line 933.
  • strict warning: Declaration of views_handler_field_upload_description::init() should be compatible with views_handler_field::init(&$view, $options) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/upload.views.inc on line 269.
  • strict warning: Declaration of views_handler_field_user::init() should be compatible with views_handler_field::init(&$view, $options) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/user.views.inc on line 414.
  • strict warning: Declaration of views_handler_filter_user_name::value_submit() should be compatible with views_handler_filter_in_operator::value_submit($form, &$form_state) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/user.views.inc on line 746.
  • strict warning: Declaration of views_handler_filter_user_name::value_validate() should be compatible with views_handler_filter::value_validate($form, &$form_state) in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/modules/user.views.inc on line 746.
  • strict warning: Declaration of views_handler_field_content::options() should be compatible with views_object::options() in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/cck/includes/content.views.inc on line 258.
  • : Function ereg() is deprecated in /home/fredscoop/grooveinteractive.com/drupal-6.2/includes/file.inc on line 893.
  • : Function ereg() is deprecated in /home/fredscoop/grooveinteractive.com/drupal-6.2/includes/file.inc on line 893.
  • : Function ereg() is deprecated in /home/fredscoop/grooveinteractive.com/drupal-6.2/includes/file.inc on line 893.
  • : Function ereg() is deprecated in /home/fredscoop/grooveinteractive.com/drupal-6.2/includes/file.inc on line 893.
  • : Function ereg() is deprecated in /home/fredscoop/grooveinteractive.com/drupal-6.2/includes/file.inc on line 893.
  • : Function ereg() is deprecated in /home/fredscoop/grooveinteractive.com/drupal-6.2/includes/file.inc on line 893.
  • : Assigning the return value of new by reference is deprecated in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/includes/view.inc on line 1095.
  • strict warning: Non-static method view::load() should not be called statically in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/views.module on line 716.
  • strict warning: Non-static method view::load() should not be called statically in /home/fredscoop/grooveinteractive.com/drupal-6.2/sites/all/modules/views/views.module on line 716.
Brian Miller's picture

October 6, 2010

By: Brian Miller

Anchor

First, I've always wanted to write a post with this title. I know most developers and content editors don't even give HTML a second thought, but it's a very powerful structural mark-up language that is the basis for all usability, accessibility, and SEO on the web. I think about 95% of all SEO, accessibility, usability, and web standards compliance comes from good HTML. And where else should we start talking about good HTML than with the anchor tag.

You are all probably aware that the anchor tag or <a> is the basis of hypertext mark-up language allowing developers to create a hyperlink to a URL. But most people don't utilize it's full potential or worse yet; misuse it. So I'm going to go through the proper use of the anchor tag and things to avoid.

The Tag

The basis for the anchor tag is to create a link to another URL. The anchor tag helps inform the user where this link will take them using many different attributes and values.

  • AVOID empty anchor tags, all anchor tags must have a value. Bad Example: <a></a>
  • AVOID using an anchor tag to do anything other than take a user to another URL. This includes using javascript to post a form, show/hide text, etc. Bad Example: <a href="javascript:(alert'no!')">Popup</a>

Text

The most important part of the anchor tag is the text. This is the value placed between the opening anchor tag <a> and the closing anchor tag </a>. The value should clearly inform the user where the link will take them.

  • USE text that is the same as the title of the destination page or section whenever possible. This is the easiest way to inform the user where the link will take them. Good Example: "Google" for http://www.google.com.
  • AVOID using an image inside an anchor tag, especially for navigation, as it is difficult for users and machines to read the text value of an image.
  • AVOID using words that are generic or do not let the user know where the link will take them. Bad Example: "View this page"
  • USE values that would make sense even if the link was removed from it's surrounding content. Good Example: For more information visit "Groove Interactive." Bad Example: "For more information" visit Groove Interactive.
  • USE values that are the same if there are multiple links on one page that goto the same destination. Good Example:
    Link1: "Groove Interactive Home" for http://www.grooveinteractive.com,
    Link2: "Groove Interactive Home" for http://www.grooveinteractive.com.
  • AVOID values that are the same if there are multiple links on the page that goto different destinations. Bad Example:
    Link1: "Home" for http://www.grooveinteractive.com,
    Link2: "Home" for http://www.google.com.

The best way to audit your link values is to list all the links values on a page and see if their destinations make sense, both by themselves and when compared to other links in the list. This is the same thing that a machine would do when crawling your website and evaluating the links on your page for inclusion in a search engine. Users of screen readers may also get this list in order to more quickly navigate through a website, ignoring all other content on a page. Is it clear to the user or machine where each link will take them?

href

The destination of an anchor tag is set using the href attribute. The value of the href should be a section in the current page, the local path on the current site, or a full URL to another site.

  • USE the full url to link to pages on other sites or to https pages on the current site. Good Example: "http://www.google.com"
  • USE absolute links when pointing to other pages on the current site. This makes it much easier to manage vs relative links. Bad Example: "../../../company/information.html" Good Example: "/company/information.html"
  • USE "#" and the id of the section to link to that section on the same page. Add that id to the first element of the section using the "id" attribute. Pick section id's that have contextual meaning to make it easier to manage. Avoid "a names" for this. Bad example: <a name="about"></a>. Good Example: href="#about"...links to <h2 id="about">About</h2>.

So you can now create a simple, accessible, machine readable, SEO optimized, and usable link. I know you couldn't imagine the anchor tag taking up more than 1 post, but there is more to come about all the other exciting attributes of the anchor tag.

Post new comment

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Copy the characters (respecting upper/lower case) from the image.