<a>
HTML <a> Tag
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn">访问php中文网!</a> </body> </html>
Run Example»
Click the "Run Instance" button to view the online instance
Browser Support
All major browsers support the <a> tag.
Tag definition and usage instructions
What does a tag mean?
<a> tag defines a hyperlink that is used to link from one page to another. The most important attribute of the
<a> element is the href attribute, which specifies the target of the link.
In all browsers, the default appearance of links is as follows:
Unvisited links are underlined and blue
Visited links are underlined and colored purple
Active links are underlined and colored red
Tips and Notes
Tips: If the href attribute is not used, the hreflang, media, rel, target and type attributes cannot be used.
Tips: Usually the linked page is displayed in the current browser window, unless other targets are specified.
Tip: Please use CSS to change the style of the link.
Differences between HTML 4.01 and HTML5
In HTML 4.01, the <a> tag can be either a hyperlink or an anchor. In HTML5, the <a> tag is a hyperlink, but without the href attribute, it is just a placeholder for the hyperlink.
HTML5 has some new attributes, and some HTML 4.01 attributes are no longer supported.
Attribute
New: New attribute in HTML5.
| Attributes | Value | Description |
|---|---|---|
| charset | char_encoding | HTML5 is not supported. Specifies the character encoding of the target URL. |
| coords | coordinates | HTML5 Not supported. Specifies the coordinates of the link. |
| downloadNew | filename | Specify download link |
| href | URL | Specifies the target URL of the link. |
| hreflang | language_code | Specifies the base language of the target URL. Only used if the href attribute is present. |
| mediaNew | media_query | Specifies the media type of the target URL. Default value: all. Only used if the href attribute is present. |
| name | section_name | HTML5 Not supported. Specifies the name of the anchor. |
| rel | alternate author bookmark help license next nofollow noreferrer prefetch prev search tag | Specifies the relationship between the current document and the target URL. Only used if the href attribute is present. |
| rev | text | HTML5 Not supported. Specifies the relationship between the target URL and the current document. |
| shape | default rect circle Poly | HTML5 is not supported. Specifies the shape of the link. |
| target | _blank _parent _self _top framename | specifies where to open the target URL. Only used if the href attribute is present. |
| #type New | MIME_type | Specifies the MIME type of the target URL. Only used if the href attribute is present. Note: MIME = Multipurpose Internet Mail Extensions. |
Global attributes
<a> tag supports HTML global attributes.
Event attributes
<a> tag supports HTML event attributes.
Try it out - Example
Create a hyperlink
This example demonstrates how to create a link in an HTML document.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>我使用了外部样式文件来格式化文本 </h1> <p>我也是!</p> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance
Use images as links
This example demonstrates how to use images as links.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 图像作为链接: <a href="http://php.cn"> <img border="0" alt="w3cschool" src="logo.png" width="100" height="100"> </a> </p> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance
Open link in new browser window
This example demonstrates how to open a page in a new window so that visitors do not need to leave your site.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <a href="http://www.php.cn/" target="_blank">访问php中文网!</a> <p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance
Create Email Link
This example demonstrates how to link to an email. (This example can only work after installing the mail client program.)
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p> 这是一个电子邮件链接： <a href="mailto:someone@example.com?Subject=Hello%20again" target="_top"> 发送邮件</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body> </html>
Run Example»
Click "Run Example" button to view online examples
Create email link 2
This example demonstrates a more complex email link.
Instance
<!DOCTYPE html> <html> <body> <p> This is another mailto link: <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">Send mail!</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly. </p> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance
Use anchors to jump to different locations on the same page
This example demonstrates how to use the id attribute of the anchor to jump to different locations on the page (HTML5 does not support the name attribute).
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h2><a id="top">这是标题，底部链接可以链接到这</a></h2> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <p>php中文网 - php中文网<br><br><br><br></p> <a href="#top">链接到标题</a> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance
Related Articles
HTML Tutorial: HTML Links
HTML DOM Reference Manual: Anchor Object
