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
picture from deep impact movie

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 HTML Tags HTML <a href> Tag Examples

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

<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: