HTML <a href> for Hypertext Links

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <a href> Tag in HTML 5

The <a href> tag is used to define a hypertext link. It is one of the tags for interactive content in HTML. If a user clicks on the link, the referenced document will be loaded by the browser or other web client. Only the <a href> version of the anchor tag is described here since the <a name> version is no longer used (see Changes in HTML 5 below)

<a rel="nofollow" href="index.pdf">...</a>

A series of inline hypertext links can be used to create a breadcrumb trail:

This is an actual working demo of the <a href> example code below.

HTML Anchors

Defining the target of a link within a page

The href attribute of the <a> tag can reference the id attribute of one of the HTML tags to link to a specific point within a web page, automatically scrolling the browser window if necessary to make that section of the web page appear in the currently visible area. To specify the target location, include a hash symbol ("#") followed by the id of the target location in the href attribute of the <a> tag. The URLs of bookmarks or favorites can also point to specific locations in a web page.

The tags that are involved in creating the document outline, which include the <section> tag, <hgroup> tag and heading tag would be some examples of good places for HTML anchors:

<section id="main-section-a">
   <h1>Section A</h1>
   ...
   <hgroup id="implied-section-b">
      <h2>Section B</h2>
      <h3>...</h3>
   </hgroup>
   ...
   <h2 id="implied-section-c">Section C</h2>
   ...
</section>

<a name/> and <a id/> anchor tags

The <a/> tag was originally used to define a fixed point (hence the name anchor and element type name a) in a document for the target of a hypertext link. However, starting with HTML version 4 (1997), any HTML element can be used as an anchor simply by including an id attribute on the element start tag or the standalone tag of a void element. From http://www.w3.org/TR/html401/struct/links.html#h-12.2.3:

The id attribute may be used to create an anchor at the start tag of any element (including the A element).

Note that as a result of how the HTML specifications have evolved, the <a> tag should not be used as an anchor, and in order to avoid confusion, probably should not be called the anchor tag.

<link> tag for links to related documents

In addition to the <a> tag for hypertext links, the HTML <link> tag can be used to reference other things, such as profiles of the web page author(s), related to the current HTML web page.

<a href> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <a href="target-URI" ...>
      ... flow content ...
   </a>
   ...
   ... phrasing content expected ...<a href="target-URI">... phrasing content ...</a>...
   ...
</body>

Rules for coding the HTML a element

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the a element for a hypertext link where either flow content is expected or phrasing content is expected.
Begin the a element with a starting <a> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
Code an href attribute with the hash of an id within the same page, a URL of another web page or a URI such as a mailto: link.
Include any other attributes of the <a> tag as appropriate.
Inside the a element, code the text or other phrasing content that is to appear as the hypertext link. If the <a> tag is coded where flow content is permitted, then the inner HTML of the <a> tag may contain flow content also.
End the a element with a matching </a> closing tag.

<a href/> Content Model

Contents of the <a href/> Tag

When coded in flow content

When coded in flow content, the content of the a element can include HTML comments, text content and any HTML tags that can be used in flow content.

When coded in phrasing content

When coded in phrasing content, the content of the a element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

Recommendation

The <a> tag can be combined with many other phrasing content tags, such as:

<abbr>: when the text in the link is an acronym or abbreviation
<cite>: for a link to a web site whose content is being cited, or to a web site related to a creative work being cited
<code>: when the text in the link represents computer code, such as when the pages on this site link to the description and syntax of tags in the tag reference
<img>: when the link is an image rather than text
<kbd>: when the text in the link represents keyboard input
<mark>: when the text in the link represents the search term(s) in search results
<output>: when the text in the link represents computer output
<time>: when the text in the link represents a time, which may be used to link to the full description of an entry in the chronological summary of some type of log or a blog
<var>: when the text in the link represents a variable that is to be replaced with an actual value

When their content is to be applied to the entire link, the <a> tag can be nested inside those tags, if their content model allows phrasing content, or those tags can be nested inside the <a> tag. For tags with no allowable content, such as the <img> tag, those tags must be coded inside the <a> tag. Our recommendation is to always code them inside the <a> tag, since that makes it easier to make changes to the HTML code later. For example:

<p>According to <a href="http://www.AuthoringHTML.com/"><cite>Authoring HTML</cite></a>,
   the &lt;cite&gt; tag should be used for the title of a creative work, not the cited content.
</p>

To make it clear that the citation comes from a book, you would simply need to add the word "book" between the <cite> tag and the ending </a> tag.

<p>According to the <a href="http://www.AuthoringHTML.com/"><cite>Authoring HTML</cite> book</a>,
   the &lt;cite&gt; tag should be used for the title of a creative work, not the cited content.
</p>

<a href> Tag Attributes

Attributes of the <a> tag

global attributes	In addition to the personal attributes of the <a> tag below, any of the common HTML attributes can also be coded.
href="target-URL" href="#placemark" href="any-URI-ref"	URL of target page, a hash symbol and fragment identifier for another location within the current page or any other URI reference (or IRI reference depending on the `encoding`) such as a `mailto:` link Use percent escape codes as explained in the URL Encoding Tutorial for any special characters in the URI reference. If the value of the `href` attribute resolves to an HTTP URI, it may contain any of the following components: protocol scheme, typically `http:` or else `https:` username, followed by an "@" host name or IP address port number, which defaults to 80 for the `http` scheme and 443 for the `https` scheme absolute or relative path search query, indicated by "?" fragment identifier, indicated by "#" If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash `/...`, it is an absolute path from the document root directory (AKA "web root") on the server. A relative path will be resolved relative to the base of the current document. A URI with a "#" but no fragment identifier points to the top of the document.
hreflang="xx" hreflang="xx-XX" for example: hreflang="en-US"	ISO 639 country code with optional ISO 3166 country code
media="screen" media="print" media="handheld"	whether the target URL is designed for desktop web browsers, printer-friendly or designed for mobile devices
ping="http://ClickedLink.com/"	If a user clicks on this link, the URLs in the `ping` attribute will be sent asynchronous notifications of the event. The list of URLs to be notified are separated by spaces. Each of the URLs will be notified via a HTTP POST request. The address of the current document will be sent in a `Ping-From` header, and, if the target is from the same domain, in a `Referer`[sic] header also. The target URL of the hypertext link from the `href` attribute will be sent in a `Ping-To` header.
rel="acquaintance" rel="alternate" rel="archives" rel="author" rel="bookmark" rel="child" rel="co-resident" rel="co-worker" rel="colleague" rel="contact" rel="crush" rel="date" rel="external" rel="feed" rel="feed alternate" rel="first" rel="friend" rel="help" rel="icon" rel="index" rel="kin" rel="last" rel="license" rel="me" rel="met" rel="muse" rel="neighbor" rel="next" rel="nofollow" rel="noreferrer" rel="parent" rel="pingback" rel="prefetch" rel="prev" rel="search" rel="sibling" rel="sidebar" rel="spouse" rel="stylesheet" rel="sweetheart" rel="tag" rel="up"	The `rel` attribute specifies the purpose of the link. It may contain a single keyword, or a list of rel attribute keyword values separated by spaces. `rel` attribute values for hypertext links acquaintance The person described by the document containing the link considers the person described by the referenced document to be an acquaintance. alternate The referenced document is an alternate representation of the document containing the link. This should only be used when the referenced document has content similar to the current document but published in an alternate form, such as a syndicated feed for a list of blog posts (see rel="feed alternate"). If the document has been translated into other languages, the language of the translation should be indicated in an `hreflang` attribute (not the `lang` attribute). archives The referenced document is a list of previously created versions of related documents, such as the archives of a blog. author The link references a resource about the author of the document. For search engine optimization, Google recommends using a link to the author's Google Profile or a page about the author on the same domain as the link. It could also be a link to another type of resource, such as a `mailto:` link to the email address of the author. See the rel="author" Tutorial. bookmark Provides a permanent link to the document or to a section within the document. child The person described by the referenced document is a child of the person described by the document containing the link. co-resident The person described by the referenced document lives in the same place as the person described by the document containing the link. co-worker The person described by the referenced document works for the same company or organization as the person described by the document containing the link. colleague The person described by the referenced document works in the same field of employment as the person described by the document containing the link. contact The person described by the referenced document is someone who might be contacted by the person described by the document containing the link. crush The person described by the document containing the link has a crush on the person described by the referenced document. date The person described by the document containing the link has been dating the person described by the referenced document. external Indicates that the link is to a external resource on a different web site. feed For feed autodiscovery, links to a syndicated feed channel for the document or the web site. Do not use or include `rel="alternate"` unless the current document and the feed are alternate forms of the same content; if the current entry is a subset of the feed, such as a single blog post, use `rel="feed"` without `"alternate"` in the attribute. feed alternate Used when the referenced document is the syndicated feed for the current content, such as the feed for a list of blog posts in an HTML page (but not a single blog post, which would be an <entry> or <item> in the feed rather than the entire feed). first Links to the first document in a series of articles. friend The person described by the document containing the link considers the person described by the referenced document to be a friend. help Links to a document that provides helpful information related to the content of the document containing the link (not a general help page). index Links to a table of contents or index document that includes the document containing the link as well as others in the same collection of documents. kin The person described by the document containing the link and the one described by the referenced document are members of the same extended family. last Links to the last document in a series of articles. license Links to a document that describes the copyright license that applies to the document(s) in which the link to the license page appears. me The person described by the referenced document is the same person as the one described by the document containing the link. They are two pages describing the same person. met The person described by the document containing the link claims to have met the person described by the referenced document. muse The person described by the referenced document provides inspiration to the person described by the document containing the link. neighbor The person described by the referenced document lives near the person represented by the document containing the link. next In a series of documents, the referenced document is the next one in sequence following the document containing the link. parent The person described by the referenced document is a parent of the person described by the document containing the link. pingback Used in a link that provides the URL of the resource to handle a pingback for the document containing the link. prev In a series of documents, the referenced document is the previous one in sequence prior to the document containing the link. search New Links to a document that provides information that can be used by search engines. This could be an XML file conforming to the OpenSearch Description Document specification. sibling For a pair or siblings; the person described by the referenced document is a brother or sister of the person described by the document containing the link. sidebar Indicates that the referenced document should be loaded into the web browser's sidebar if the link is activated by the user. spouse The person described by the referenced document is the husband or wife of the person represented by the document containing the link. sweetheart The person described by the document containing the link considers the person described by the referenced document to be their sweetheart. tag Specifies a URI that is a "tag", which describes the subject of a page. The tag may be a URL, which leads to a web-accessible page, or just a standalone identifier. up Links to the document at the next higher level in a tree hierarchy. The value `up` may be specified more than once: `rel="up"` points to the parent document, `rel="up up"` points to the grandparent, and so forth. This can be used to create a breadcrumb trail, for example. `rel` attribute values for links to external resources prefetch Indicates that the referenced document should be automatically preloaded into cache. `rel` attribute values for annotations nofollow Indicates to search engine crawlers and other robots that they should not follow the link to the referenced resource and process the document there. This can be used to indicate that the linked document should not be considered to be a recommended resource when determining the search engine rank for the linked page. This may help the page where the link appears from being penalized for "recommending" less desirable pages, such as for links to an affiliate site. noreferrer Indicates that the user agent should not identify the referring page to the server handling the request for the target page. If this value is omitted or ignored, the URL of the page containing the link will most likely be included in the `Referer`[sic] header of the HTTP request for the referenced page.
target="_blank" target="_top" target="_parent" target="_self"	the window where the target url specified by the href attribute is to be displayed
type="media-type" for example: type="text/html"	RFC 2046 MIME media type and subtype

HTML <a> Anchor Tag Examples

Examples of the `<a href>` tag in HTML 5

<a href="#">back to top</a>
<a href="#target-within-page">link within document</a>
<a href="another-page.html">another page</a>
<a href="/another-section/">another section</a>
<a href="http://www.ExampleOnly.com/">Example Only</a>
<a href="http://www.HTML-5.com/tags/a-tag/#examples#">Examples of using the <a> tag</a>

The example link with href="#target-within-page" shows how to direct a link to another place in the same document. The target of the link is specified by coding an id attribute on any HTML element at the target location (not an <a name/> or <a id/> element, which have been deprecated):

<p id="target-within-page">This paragraph is the target of the example link within document above.</p>

To keep the link text from breaking to wrap onto a separate line, include the white-space: nowrap style:

<a href="another-page.html" style="white-space: nowrap">another page</a>
<a href="/another-section/" style="white-space: nowrap">another section</a>

HTML Link With Target

Open Link in New Window

To open the page that a link references in a new window or tab rather than replacing the current page, add the target attribute. This can be used to allow a user to view pages from another site without leaving the current site.

<a href="http://www.ExampleOnly.com/" target="offsite">Example Only</a>

HTML Link Without Underline

To suppress the underline that indicates a hypertext link created by an HTML a element, add a style="text-decoration: none" attribute to the starting <a> tag.

<a href="http://www.ExampleOnly.com/"
   style="text-decoration: none"
>Example Only</a>

Example of a breadcrumb trail

(see <a href> breadcrumb trail demo above)

<nav>
   <a rel="up up" href="../../">HTML 5</a>&#160;&gt;&#160;
   <a rel="up" href="../">HTML Tags</a>&#160;&gt;&#160;
   <b>HTML &lt;a&gt; tag</b>
</nav>

Example of an `id` attribute for the target of a link

<p id="examples">This paragraph is the target of a hypertext link.</p>

The fragment identifier is examples. The browser should automatically scroll to that location on the page if a hypertext link includes a hash symbol (#) with the fragment identifier:

<a href="http://www.HTML-5.com/tags/a-tag/#examples#">Examples of using the <a> tag</a>

Examples of the <a> tag with other protocol schemes

<a href="tel:+18775543210">Call our feedback line at +1-877-554-3210</a>

Example of link with an image using the HTML <img> tag

<p style="text-align: center">Click this image to view the &lt;video&gt; tag demo<br/>
   <a href="../video-tag/#examples#">
      <img src="/media/deep-impact-movie.png" width="160" height="120"
         alt="picture from deep impact movie"
      />
   </a>
</p>

This example uses the <img> tag to put an image inside an <a> tag that links to the HTML 5 <video> demo. Also shows how to resize an image; in this case the size of the image is changed from 320x240 to 160x120.

Click this image to view the <video> tag demo

Search Engine Friendly Breadcrumb Trail Example

Some search engines, particularly Google, may include a breadcrumb trail in their search engine results if the links include microdata properties for a breadcrumb trail.

Search Engine Results

HTML <a href> Tag

Description, syntax, usage, attributes and examples of the HTML <a href> tag.

www.html-5.com

To code the breadcrumb trail microdata the breadcrumb trail list of links must include some microdata properties:

elements with itemscope="itemscope" (a boolean attribute) and itemtype="http://data-vocabulary.org/Breadcrumb" identifying each link in the breadcrumb trail
an a href element with itemprop="url" indicating the target URL of each breadcrumb link
an element with itemprop="title" that provides the text for each breadcrumb link

<ul class="breadcrumb-trail">
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" rel="up up up" href="/">
         <span itemprop="title">HTML 5</span>
      </a>
   </li>
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a class="nobr" itemprop="url" rel="up up" href="/tags/">
         <span itemprop="title">HTML Tags</span>
      </a>
   </li>
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" rel="up" href="./">
         <span itemprop="title">HTML <a href> Tag</span>
      </a>
   </li>
   <li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" href="#examples#">
         <span itemprop="title">Examples</span>
      </a>
   </li>
</ul>

<a href> tag with a `mailto:` link

<body>
   <p>By <address>
      <a href="mailto:John.Doe@ExampleOnly.com">John Doe (contact the author)</a>
   </address></p>
   ...
</body>

<article>
   <h2>April Fools!<h2>
   <p>Published: Friday, April 1, 2011<br/>
      By: <address>
         <a href="mailto:John Doe &lt;John.Doe@ExampleOnly.com&gt;">John Doe (contact the author)</a>
      </address>
   </p>
   <p>Today's blog entry is an April Fool's Day joke....</p>
</article>

The <a href> tag is coded inside an address element indicating that the address is for the author of the content. The value of the <a href> attribute starts with the mailto scheme followed by a semicolon (:). The "To" address follows it and can be coded as:

the e-mail address
a display name, which may include special characters if enclosed in quotes ("), which must be encoded as " in an attribute value, and the e-mail address enclosed in angle brackets (<...>), which must be encoded with the HTML character entities < and >.

Changes in HTML 5 - <a> Tag

What's new in HTML 5

The media attribute has been added for consistency with the <link> tag.

The target attribute has been resurrected in HTML 5. It really did not exist in either HTML 4 or XHTML, although it was the easiest way to open a web page in a new window. As a result, it was used on many web pages, which therefore would fail validation.

In HTML 5, you can put the <a> tag around block elements in addition to inline elements. This means that links can appear where they couldn't before. For example, you can turn a whole HTML table row into a link:

<table>
   <tr><td>Label:</td><td>Data...</td></tr>
   ...
   <tr onclick="location=this.getElementsByTagName('a')[0]">
      <a href="new-row.html"/>
      <td colspan="2">Add a Row</td>
   </tr>
</table>

Differences between HTML 5 and earlier versions of HTML

The <a> tag with a name or id attribute is no longer used as a placemark for the target of a hypertext link. Most HTML tags may now include an id attribute for that purpose. Therefore, whenever there is an <a> tag with an id or name attribute but no href attribute, the value of the attribute should be coded as the id attribute of the tag following it:

<a id="whats-new"/>
<p>New features of HTML 5 include ....</p>

<p id="whats-new">New features of HTML 5 include ....</p>

<p>See <a href="#whats-new">What's New in HTML 5</a> above.</p>

An <a> tag without an href attribute is now only a placeholder that may later be turned into a hypertext link via dynamic JavaScript code.

The following attributes should not be coded on the <a> tag because they either have been deprecated or were never officially supported:

name - if the tag is being used for both a hypertext link and the target of a reference from somewhere else, use the id attribute instead; if it's not a hypertext link, code the id attribute on a different tag at the target location as shown above
charset
coords
ref
shape

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the a element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5

HTML <a href> for Hypertext Links

Wednesday, August 13, 2014