HTML <a> Anchor Tag Examples

Examples of the <a href> tag in HTML 5
<a href="#">back to top</a>Example Only</a>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>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 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>
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>
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.
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>
<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><  ...<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>
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 &quot; in an attribute value, and the e-mail address enclosed in angle brackets (<...>), which must be encoded with the HTML character entities &lt; and &gt;.
    •