HTML Links
Links are found on nearly every web page. They let users click their way from one page to another.
HTML Links - Hyperlinks
HTML links are hyperlinks. You click a link to jump to another document, and when you move the mouse over a link the pointer turns into a little hand.
Note: A link does not have to be text. It can be an image or any other HTML element.
HTML Links - Syntax
The <a> tag defines a hyperlink. Its most important attribute is href, which sets the link's destination. The link text is the visible part the reader clicks to go to that address.
By default, an unvisited link is underlined and blue, a visited link is underlined and purple, and an active link is underlined and red.
Tip: Links can be styled with CSS to look different.
Example
A link to PromptCookbook.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Link</title>
</head>
<body>
<a href="https://prompt-cookbook.com">Visit PromptCookbook!</a>
</body>
</html>
Link syntax
The shape of a hyperlink.
<a href="url">link text</a>
HTML Links - The target Attribute
By default a link opens in the current window. The target attribute changes where the linked document opens. Its values are: _self (the default, same window or tab), _blank (a new window or tab), _parent (the parent frame), and _top (the full window).
Example
A link that opens in a new tab with target="_blank".
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Target Blank</title>
</head>
<body>
<a href="https://prompt-cookbook.com" target="_blank">Visit PromptCookbook!</a>
</body>
</html>
Absolute URLs vs. Relative URLs
An absolute URL is a full web address, like https://www.w3.org/. A relative URL points to a page within the same website and leaves out the https://www part.
Example
A page with both absolute and relative links.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Relative</title>
</head>
<body>
<h2>Absolute URLs</h2>
<p><a href="https://www.linkedin.com">Linkedin</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="PromptCookbook.jpg">HTML Images</a></p>
<p><a href="/html/html-intro">HTML Tutorial</a></p>
</body>
</html>
HTML Links - Use an Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag.
Example
An image that works as a link.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Link</title>
</head>
<body>
<a href="https://prompt-cookbook.com">
<img src="/sites/default/files/html/HtmlLinks/smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
</body>
</html>
Link to an Email Address
Use mailto: inside the href to make a link that opens the user's email program with a new message.
Example
A link that starts a new email.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Link</title>
</head>
<body>
<a href="mailto:[email protected]">Send email</a>
</body>
</html>
Button as a Link
To make a button act as a link, add a little JavaScript that runs when the button is clicked and changes the page location.
Example
A button that navigates like a link when clicked.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Link</title>
</head>
<body>
<button onclick="document.location='https://prompt-cookbook.com'">HTML Tutorial</button>
</body>
</html>
Link Titles
The title attribute gives extra information about an element, usually shown as a tooltip when the mouse moves over it.
Example
A link with a tooltip from its title attribute.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Title</title>
</head>
<body>
<a href="https://prompt-cookbook.com" title="Go to PromptCookbook HTML section">Visit our HTML Tutorial</a>
</body>
</html>
More on Absolute URLs and Relative URLs
You can link with a full URL, a path relative to the domain, or a path relative to the current page's folder.
Full URL
A link using a full web address.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Full</title>
</head>
<body>
<a href="https://prompt-cookbook.com">HTML tutorial</a>
</body>
</html>
Relative to domain
A link to a page in the html folder of the current site.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Domain</title>
</head>
<body>
<a href="/html/html-intro">HTML tutorial</a>
</body>
</html>
Same folder
A link to a page in the same folder.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Link Folder</title>
</head>
<body>
<a href="/html/html-intro">HTML tutorial</a>
</body>
</html>
Chapter Summary
To recap: use the <a> element to make a link, the href attribute to set its address, and the target attribute to set where it opens. Put an <img> inside an <a> to use an image as a link, and use mailto: in the href to open the user's email program.
HTML Link Tags
The main tag here is <a>, which defines a hyperlink.