Creating Hyperlinks in HTML: A Complete Guide to Tags

Master the art of creating hyperlinks in HTML using the `` tag. This tutorial covers basic link creation, customizing appearance with CSS, and controlling where links open (same tab or new tab) using the `target` attribute. Essential for web development!

Creating Hyperlinks in HTML

Understanding HTML Links

HTML links, also known as hyperlinks, are the foundation of navigation on the web. They allow users to click on text, images, or other elements to jump to another page on the same website or a different one entirely. When you hover your mouse over a link, the cursor usually changes to a hand icon.

HTML Link Syntax

The basic HTML link is created using the <a> tag (anchor tag). The most important attribute is href, which specifies the URL of the target page. The text between the opening and closing <a> tags is the visible link text.

Example:

HTML

<a href="https://www.w3schools.com">Visit W3Schools</a>

Link Styles and the target Attribute

By default, browsers display unvisited links in blue and underlined, visited links in purple, and active links in red. You can customize this using CSS. The target attribute controls where the linked page opens:

  • _self (default): Opens in the same window/tab.
  • _blank: Opens in a new window/tab.
  • _parent: Opens in the parent frame (if applicable).
  • _top: Opens in the full browser window.

Example (opening in a new tab):

HTML

<a href="https://www.w3schools.com" target="_blank">Visit W3Schools</a>

Absolute vs. Relative URLs

URLs can be absolute (the full web address) or relative (relative to the current page's location). Relative URLs are useful for linking to pages within the same website.

Examples:

HTML (Absolute URLs)

<a href="https://www.w3.org">W3C</a>
<a href="https://www.google.com">Google</a>
HTML (Relative URLs)

<a href="images/image1.jpg">Image</a>
<a href="page2.html">Page 2</a>

Images and Email Links

You can use an image as a link by placing the <img> tag inside the <a> tag. To link to an email address, use the mailto: scheme in the href attribute.

Examples:

HTML (Image Link)

<a href="page2.html"><img src="image1.jpg" alt="My Image"></a>
HTML (Email Link)

<a href="mailto:someone@example.com">Send Email</a>

Buttons as Links and Link Titles

You can use JavaScript to make buttons act like links. The title attribute adds tooltip text to a link when the mouse hovers over it.