<a> Links

The <a> anchor tag is used to create hyperlinks.



<a href="https://www.tech-academy.co.uk">Tech-Academy</a>


The text between the tags is displayed as the link.


Default colours for links, will be applied by the browser unless styled separately:

  • Unvisited link = underlined, blue
  • Visited link = underlined, purple
  • Active link = underlined, red


Attribute Description Value
href Hypertext reference; Target URL "https://www.site.com" or relative URL "/images/logo.png"
target Where to display contents "_blank" new page

"_top" same window

"_parent" same window

"_self" default; new page, current window

name Creates a label on the page user defined
id Creates a label on the page user defined
event Script trigger onmouseover, etc
title Tooltip user defined
accesskey Keyboard shortcut Alt, or Ctrl key plus user defined key



Images can be used as links between the tags:


<a href="https://www.tech-academy.co.uk"><img src="logo.png"></a>



Email links can also be created using mailto: followed by the target email address in the href attribute. Optionally, a subject can be included by following the email address with a question mark ? and assigning your chosen subject value to the subject keyword. Also, a message can be included by assigning your chosen message text to the body keyword.


<!DOCTYPE html>
		<title>My Document Title</title>
		<a name="top">
			<h1>Top of the page</h1>
		<a id="nearTop"><p>A paragraph of text</a>
		some more text.</p>
		<h2>Another heading</h2>
		<p>Another parapgraph of text.</p>
		<a href="https://www.tech-academy.co.uk" target="_blank" title="Opens in a new window">Home</a>
		<a href="mailto:support@tech-academy.co.uk?subject=test&body=My message">Would you like to know more?</a>
		<a href="#nearTop" style="position:relative; top:2000px;">Link to nearTop</a>
		<a href="#Top" style="position:relative; top:2020px; padding-bottom:50px;">Link to Top</a>

Leave a Reply