Custom Search
| Syntax | This element uses separate opening and closing tags.<a>...</a> |
|---|---|
| Usage | The <a> tag, called an anchor element, has 2 primary uses. 1) The <a> tag can be used to implement a hyperlink to another web resource. A web resource can be an HTML document (web page), an image, a video, a PDF file, etc. The <a> tag can also link to a specific location within another web page, or to a specific location within the current web page. The href attribute is used to specify the location of the resource. 2) Another use for the <a> tag is to act as a marker, within a web page, that another <a> tag can link to. To use the <a> tag as a marker, use the name and/or the id attribute to uniquely identify the tag. HTML & XHTML <a> tag example using a text link. The text that is contained between the opening and closing tags is the text that will be displayed in the browser. In the following example, the text 'Visit Little Web Hut' will be displayed as a link in the browser. When a user clicks on this link, the website at 'www.littlewebhut.com' will be displayed. <a href="http://www.littlewebhut.com">Visit Little Web Hut</a>   HTML <a> tag example using an image link. In addition to placing text between the opening and closing <a> tags, it's also common to place an image between the tags. In the following example, when a user clicks on the image, the website will be displayed. <a href="http://www.littlewebhut.com"> <img src="http://www.littlewebhut.com/images/little_web_hut.gif" alt="Little Web Hut"></a> XHTML <a> tag example using an image link. In addition to placing text between the opening and closing <a> tags, it's also common to place an image between the tags. In the following example, when a user clicks on the image, the website will be displayed. <a href="http://www.littlewebhut.com"> <img src="http://www.littlewebhut.com/images/little_web_hut.gif" alt="Little Web Hut" /></a> HTML <a> tag example using a borderless image link. Some browsers may, by default, place a border around images that are used as links. A CSS style can override this behavior. The following example is one method of applying a CSS style to turn off image borders. <a href="http://www.littlewebhut.com"> <img style="border:none" alt="Little Web Hut" src="http://www.littlewebhut.com/images/little_web_hut.gif"></a> XHTML <a> tag example using a borderless image link. Some browsers may, by default, place a border around images that are used as links. A CSS style can override this behavior. The following example is one method of applying a CSS style to turn off image borders. <a href="http://www.littlewebhut.com"> <img style="border:none" alt="Little Web Hut" src="http://www.littlewebhut.com/images/little_web_hut.gif" /></a> HTML & XHTML Example that links to a specific location within the current web page. The following is an example of using the <a> tag to mark a location within a web page. <a name="example4" id="example4"></a>If the above <a> tag is placed somewhere in the current web page, then the following <a> tag will link to it. Notice the hash (#) symbol before the id name. When the user clicks on the link, the browser will jump to the marked location. <a href="#example4">Jump to Ten</a> |
| Content Model | The <a> element can contain the following tags, and Text, between its opening and closing tags. <abbr>
<acronym>
<applet>
<b>
<basefont>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<del>
<dfn>
<em>
<font>
<i>
<iframe>1
<img>
<input>
<ins>
<kbd>
<label>
<map>
<object>
<q>
<s>
<samp>
<script>
<select>
<small>
<span>
<strike>
<strong>
<sub>
<sup>
<textarea>
<tt>
<u>
<var>
Notes:1. The <a> element can contain the <iframe> tag when using DTD Transitional and Frameset documents but not Strict documents. 2. Red tags have been deprecated and are allowed in DTD Transitional and Frameset documents but not Strict documents. |
| Required | Tag Specific | Core | Focus | Events | Language |
|---|---|---|---|---|---|
| charset coords href hreflang name1 rel rev shape target type | id class style title | accesskey onblur onfocus tabindex | onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup | dir lang xml:lang2 | |
| Notes: 1. deprecated in XHTML. 2. XHTML only. | |||||
| Attribute | Description |
|---|---|
| charset | The charset attribute specifies the character encoding for the web resource that is pointed to by the link. |
| coords | When the <a> tag is used as part of a <map> tag, the coords attribute specifies the dimensions of the clickable link area. The value for the coords attribute is a comma separated list of lengths. |
| href | When linking to a web resource, the href attribute is used to specify the location of the resource. The value of the href attribute is a Uniform Resource Locator (URL). In the absolute address example below, the URL is "http://www.littlewebhut.com" where www.littlewebhut.com identifies the web resource and http:// indicates that that resource can be obtained using HTTP. (Besides using http://, other common schemes (or types) are ftp://, mailto:, and file://). Absolute verses Relative addresses: In the following example, the absolute address of the web resource is used. Relative addressing can also be used. Since the browser knows the absolute address of the web page that it is currently displaying, a web resource that is located in the same directory can use relative addressing. See the examples below. HTML & XHTML <a> tag example using an absolute address. <a href="http://www.littlewebhut.com">Visit Little Web Hut</a>HTML & XHTML <a> tag example using a relative address. <a href="example_a1.html">Example</a>HTML & XHTML <a> tag example using a relative address with resource located in a sub-directory named examples. <a href="examples/example_a2.html">Example</a>HTML & XHTML <a> tag example using a relative address with resource located in a directory one level up from the current directory. <a href="../example_a3.html">Example</a> |
| hreflang | The hreflang attribute specifies the language code of the web resource that is pointed to by the link. |
| name | The name attribute is used with the <a> tag to mark a specific location within a web page. In XHTML, the id attribute is used instead of the name attribute. To be compatible with both HTML and XHTML use the name and the id attributes. The following is an example of using the <a> tag to mark a location within a web page.<a name="example4" id="example4"></a> HTML & XHTML Example that links to a specific location within the current web page. If the above <a> tag is placed somewhere in the current web page, then the following example will link to it. Notice the hash (#) symbol before the id name. When the user clicks on the link, the browser will jump to the marked location. <a href="#example4">Jump to Ten</a> HTML & XHTML Example that links to a specific location within another web page. If the <a> tag is used to mark a specific location on a different web page, then the following <a> tag will link to it. When the user clicks on the link, the browser will go to the web page and jump to the marked location. <a href="example_a4.html#example4">Jump to Ten</a> Note: deprecated in XHTML. |
| rel | The rel attribute is a space-separated list which specifies a relationship between the current web resource and the web resource that is pointed to by the link. The relationship is from the current web resource to the linked current web resource. |
| rev | The rev attribute attribute is a space-separated list which specifies a relationship between the web resource that is pointed to by the link and the current web resource. The relationship is to the current web resource from the linked current web resource. |
| shape | When the <a> tag is used as part of a <map> tag, the shape attribute specifies the shape of the clickable link area. The values for the shape attribute can be either "rect", "circle", "poly", or "default". Use the coords attribute to specify the size of the clickable link area. |
| target | When a user clicks on a link to web page, the new web page will typically open in the current browser window. The target attribute allows an alternate destination to be specified. HTML & XHTML Example to open a web page in a new window. <a target="_blank" href="http://www.littlewebhut.com">Visit Little Web Hut</a>HTML & XHTML If you're in a frame, this example will open the web page in the top original window. <a target="_top" href="http://www.littlewebhut.com">Visit Little Web Hut</a>HTML & XHTML Example to open a web page in an iframe named sample1. <a target="sample1" href="http://www.littlewebhut.com">Visit Little Web Hut</a>Note: This attribute has been deprecated. |
| type | The type attribute specifies the content type of the web resource that is pointed to by the link. |
| id | The id attribute is used to uniquely identify a tag. An anchor, script or style sheet can then reference the tag using its id. The id attribute, when used with the <a> tag, can mark a specific location within an XHTML web page. In HTML, the name attribute is used instead of the id attribute. To be compatible with both HTML and XHTML use the name and id attributes. The following is an example of using the <a> tag to mark a location within a web page. <a name="example4" id="example4"></a> HTML & XHTML Example that links to a specific location within the current web page. If the above <a> tag is placed somewhere in the current web page, then the following example will link to it. Notice the hash (#) symbol before the id name. When the user clicks on the link, the browser will jump to the marked location. <a href="#example4">Jump to Ten</a> HTML & XHTML Example that links to a specific location within another web page. If the <a> tag is used to mark a specific location on a different web page, then the following <a> tag will link to it. When the user clicks on the link, the browser will go to the web page and jump to the marked location. <a href="example_a4.html#example4">Jump to Ten</a> |
| class | The class attribute assigns a class name to a tag. The class name does not need to be unique. More than one tag can have the same class name. This allows style sheets or scripts to reference multiple tags with a single class name. See class Example |
| style | The style attribute specifies styles for the tag. For Cascading Style Sheets (CSS), the syntax is name:value. Each name:value pair is separated by semicolons. See style Example |
| title | The title attribute specifies additional information about the tag. It is common for browsers to display the title when the pointing device stops over the object. See title Example |
| accesskey | The accesskey specifies a shortcut key for a tag. The action that is taken when an access key is invoked depends on the tag and may also depend on the browser. For example, if it is used with an <a> tag, some browsers may follow the link when the access key is invoked and other browsers may give focus to the link. See accesskey Example |
| onblur | The onblur attribute specifies a script to be run when the tag loses focus. See onblur Example |
| onfocus | The onfocus attribute specifies a script to be run when the tag receives focus. See onfocus Example |
| tabindex | The tabindex attribute specifies the tabbing position of the tag. The tabbing sequence runs from lower values to higher values. The valid range of values is between 0 and 32767. See tabindex Example |
| onclick | The onclick attribute specifies a script to be run when the object is clicked with a mouse or other pointing device. See onclick Example |
| ondblclick | The ondblclick attribute specifies a script to be run when the object is double clicked with a mouse or other pointing device. See ondblclick Example |
| onkeydown | The onkeydown attribute specifies a script to be run when a key is pressed down. See onkeydown Example |
| onkeypress | The onkeypress attribute specifies a script to be run when a key is pressed and released. See onkeypress Example |
| onkeyup | The onkeyup attribute specifies a script to be run when a key is released. See onkeyup Example |
| onmousedown | The onmousedown attribute specifies a script to be run when the mouse button, or other pointing device button, is pressed while over the object. See onmousedown Example |
| onmousemove | The onmousemove attribute specifies a script to be run when the mouse, or other pointing device, is moved while it is over the object. See onmousemove Example |
| onmouseout | The onmouseout attribute specifies a script to be run when the mouse, or other pointing device, is moved away from an object after being over it. See onmouseout Example |
| onmouseover | The onmouseover attribute specifies a script to be run when the mouse, or other pointing device, is moved onto the object. See onmouseover Example |
| onmouseup | The onmouseup attribute specifies a script to be run when the mouse button, or other pointing device button, is released while over the object. See onmouseup Example |
| dir | The dir attribute tells the browser whether the text should be displayed from left-to-right or right-to-left. It does not reverse the direction of the characters, like the <bdo> tag does, but it can help the browser to determine if the text should be aligned on the left side or the right side. See dir Example |
| lang | The lang attribute specifies a language. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See lang Example |
| xml:lang | The xml:lang attribute specifies a language for XHTML documents. This attribute can help the browser to correctly display text. This attribute can also be useful for braille translation software, speech synthesizers, dictionary definitions, etc. See xml:lang Example Note: XHTML only. |
| <a> tag example using a text link.<a> tag example using an image link.<a> tag example using a borderless image link.Example that links to a specific location within the current web page.<a> tag example using an absolute address.<a> tag example using a relative address.<a> tag example using a relative address with resource located in a sub-directory named examples.<a> tag example using a relative address with resource located in a directory one level up from the current directory.Example that links to a specific location within another web page.Example to open a web page in a new window.If you're in a frame, this example will open the web page in the top original window.Example to open a web page in an iframe named sample1. |