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> >  <a rel="up" href="../">HTML Tags</a> >  <b>HTML <a> 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 <video> 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.
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 ExamplesTo code the breadcrumb trail microdata the breadcrumb trail list of links must include some microdata properties:
- elements with
itemscope="itemscope"
(a boolean attribute) anditemtype="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 <John.Doe@ExampleOnly.com>">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>
.