A (thing)

One of the most useful HTML tags, a allows you to create an anchor between or within one or more documents. An anchor is typically some text or an image that marks the boundaries of a hypertext link (a.k.a., hyperlink). Clicking the link will take you from one document/resource to another. While the concept is simple, this is the driving force of the World Wide Web.

See also: area, map, link, hard link, pipe link, soft link

Attributes

To be of any use, the anchor tag must define either the "href" or "name" HTML attributes -- however, there are no required attributes. If either of these values is not defined at design time, they are usually set through a client side or server side script at runtime. Below are all the valid attributes for the a tag based on the W3C HTML 4.01 specification:

• accesskey (type: Character) - this accessibility character allows easy access to "click" the link with something other than a mouse
• charset (type: Charset) - this defines the character set of the document being linked
• coords (type: Coords) - defines a client side image map for the link
• href (type: URI) - specifies the location of the document/resource/file being linked to
• hreflang (type: LanguageCode) - specifies the language code of the document/resource/file being linked to
• name (type: CDATA) - names the anchor so that it can be references by other anchors or scripts; sometimes called a bookmark
• rel (type: LinkType) - forward link type which specifies the relationship of the current document to the linked document
• rev (type: LinkType) - reverse link type
• shape (type: Shape) - defines the shape of an image map
• tabindex (type: Number) - specifies the tab order of the anchor
• target (type: FrameTarget) - specifies the target frame or window for the link
• type (type: ContentType) - defines the content type/MIME type of the document being linked
• HTML Core Attributes
  • class (type: CDATA) - space separated list of classes
  • id (type: ID) - document-wide unique id
  • style (type: Style Sheet) - associated style information
  • title (type: Text) - advisory title/amplification; this information is usually displayed through tooltips
• HTML International Attributes (I18N)
  • dir (type: Custom) - specifies the direction of weak or neutral text; valid values include ltr (left to right) or rtl (right to left)
  • lang (type: Custom) - specifies the Language Code of the language used in the abbreviation
• Standard HTML Event Attributes
  • onclick (type: Script) - a pointer button was clicked
  • ondblclick (type: Script) - a pointer button was double clicked
  • onkeydown (type: Script) - a key was pressed down
  • onkeypress (type: Script) - a key was pressed and released
  • onkeyup (type: Script) - a key was released
  • onmousedown (type: Script) - a pointer button was pressed down
  • onmousemove (type: Script) - a pointer was moved within
  • onmouseout (type: Script) - a pointer was moved away
  • onmouseover (type: Script) - a pointer was moved onto
  • onmouseup (type: Script) - a pointer button was released
• Other HTML Event Attributes
  • onblur (type: Script) - the anchor has lost focus
  • onfocus (type: Script) - the anchor has gained focus

Usage

There are several methods for using the a tag, but all of them involve the placement of opening and closing HTML tags around some text, an image, or some other object. Here are some examples:

Standard Text Link - the following will link the words "Blow your mind" to the everything2.com web site

<a href="http://www.everything2.com">Blow your mind</a>

Standard Text Link with Title - the following will link the words "Joe Blow" to the Bazooka gum web site

<a href="http://www.topps.com/Confectionery/Bazooka" title="Blow some bubbles">Joe Blow</a>

Inner-Document Anchor - the following will specify the words "Jump down to here" as the location to go to for an internal link

<a name="inner-document-anchor">Jump down to here</a>

Linking to an Inner-Document Anchor - the following would take you directly to the inner-document anchor specified above using the URL fragment (#)

<a href="#inner-document-anchor">Jump down there</a>

Standard Image Link - the following will create a link from an image instead of linking text (this example links the E2 Jukka logo to the E2 homepage)

<a href="http://www.everything2.com"><img src="http://images.everything2.com/img/e2_others_01.gif" alt="Everything2 logo"></a>

Email Address - the following will link the words "Email nate" and would typically cause your default email client to open and place nate's email address in the "To" field

<a href="mailto:nate@oostendorp.net">Email nate</a>

Everything2 Support?

Technically, E2 does not support the anchor tag. However, by using hard links and pipe links, you can get similar results. By using these unique features of Everything2, you will create links similar to the "Standard Text Link with Title" under the Usage section above. When creating a pipe link, the hyperlink text will show the words you are linking, and the title attribute will contain the title of the node you are actually linking to. Hard links display the same text as the link and the title. If you want to use real anchor tags, turn on and use your Notelet Nodelet.

Common Browser Implementations*

With the default settings, nearly all visual user agents (web browsers) display hyperlinks as underlined blue text. If it is an image anchor, it will usually display a blue border around the linked image. Obviously these settings can be overridden with additional HTML tags, cascading style sheets, and various scripting languages.

Previous HTML Tag: !doctype
Next HTML Tag: abbr
See Also: HTML tags and HTML attributes

* If you know of any browsers that implement a link differently by default, please contact me so that I can add this information.