HTML 3: Links

One of the most useful HTML tags is <a>, which allows you to turn text or even images into links. To specify the destination of the link, you use the href (hypertext reference) attribute as follows:

<a href="destinationURL">Link Text</a>

You can write a full URL (e.g. href="http://www.website.com/") or a local link (e.g. href="pagename.html") if you are linking to a page within your website. For instance, if your website is http://www.website.com and you want to write a link to http://www.website.com/pagename.html, you could use a local link to pagename.html and not worry about the http://... part.

You can control the color, hover color, and more with CSS (see CSS tutorials). Based on my CSS, this link appears as:

Link Text

By default, a link opens in the same tab or window. For the best user experience, you want links to pages within your website to open in the same tab and links to outside pages to open in a new tab. You can control if the link opens in the same tab or a new tab with the target attribute.

<a href="URL" target="_self">Opens in same tab/window (default)</a>
<a href="URL" target="_blank">Opens in new tab/window</a>

If you have a long webpage, it may be useful to link to a specified point in the same webpage (e.g. "Return to top"). First, you need to create a bookmark at the link destination using the id attribute. You can name it how you like.

<p id="bookmark">Position</p>

Then you can write your link to the bookmark:

<a href="#bookmark">Return to Position</a>

To turn an image into a link, replace the link text with an image. The next tutorial will cover the <img> tag.

<a href="URL"><img src="image1.jpg" alt="Image 1"></a>

HTML 2: Text Effects HTML 4: Images


Social Media
YouTube @anna10116 | Twitter @annaneo | Instagram @perkdoingwerk | deviantART theanimeaxis | LinkedIn Anna Perkins
History

This website in its early days (circa 2006) was a Neopets fansite - hence the domain name. I taught myself how to code because I wanted to customize my Neopets profile, which as I grew older turned into a desire to make pretty websites and learn graphic design. Though heavily modified in 2018, I originally created this website layout in 2012 as a challenge to create a layout without images; thus all of the elements are pure code. Of course all of my artwork on here has to be in image format, but I am proud that the structure is HTML5, CSS, and a dash of php.

© 2006-2025 AnnaNeo/Anna Perkins Art