Tutorials on Creating Links in HTML

Using the Anchor Tag

The way to create links in HTML is to use an anchor tag with an href attribute to the destination URL as described in these tutorials ...

  • Relative and Absolute links
  • Creating links and named anchors
  • Sitepoint HTML reference on href attribute
  • Creating various links: relative, absolute, mailto, image links, jump links
  • Reference to various attributes of the a tag
  • w3.org reference on links

If you are using Dreamweaver, it will generate that type of code for you as described in these tutorials....

  • Create Text-Based Links in Dreamweaver

Creating Image Links

You can make an image clickable and link to another URL by wrapping the anchor tag around the image tag. This is useful for creating graphical buttons or banner ads. If you don't want the link border around the image make sure you use the attribute border="0" on your image tag. Here are some tutorials...

  • Image links without border
  • Image Links as explained by Lissa

Creating Email links

You can create links that opens up your user's default email client with the email address filled it. They are also done with anchor tags, but using the mailto command in the href attribute.

  • Email Links with the mailto command
  • Email links with body and subject pre-populated

Creating Links opening in New Window

The anchor tags has various additional attributes that you can use. The target attribute as in

target="_blank"

is very often used to create a links that open up in a new window. See tutorials listed here ...

  • Creating Links using the target attribute
  • Target attribute reference

The only problem with that the target attribute is no longer used in valid web pages that are doctyped as HTML 4.0 strict. So if you want to open a link in a new window in standard-compliant way, you have to use the rel attribute along with some javascript as described in the Sitepoint article New-Window Links in a Standards-Compliant World.

Creating User-Friendly and Accessible Links

You can use other attributes such as tabindex and accesskey to make your links more user-friendly. Also add the title attribute to provide more textual information to screen readers. See tutorial on Accessible Links by HTMLDog.