<a>


HTML <a> Tag

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<a href="//m.sbmmt.com">访问php中文网!</a>

</body>
</html>

Run Example»

Click the "Run Instance" button to view the online instance


Browser Support

1000.png

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.

AttributesValueDescription
charsetchar_encoding HTML5 is not supported. Specifies the character encoding of the target URL.
coordscoordinatesHTML5 Not supported. Specifies the coordinates of the link.
downloadNewfilenameSpecify download link
hrefURLSpecifies the target URL of the link.
hreflanglanguage_codeSpecifies the base language of the target URL. Only used if the href attribute is present.
mediaNewmedia_querySpecifies the media type of the target URL. Default value: all. Only used if the href attribute is present.
namesection_nameHTML5 Not supported. Specifies the name of the anchor.
relalternate
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.
revtextHTML5 Not supported. Specifies the relationship between the target URL and the current document.
shapedefault
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 NewMIME_typeSpecifies 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="//m.sbmmt.com">
<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="//m.sbmmt.com/" 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