Adding Links to Web Pages

One of the primary differentiators between websites and other forms of communication media is the idea of "links", or hyperlinks as they are technically known in web design terms.

In addition to helping to make the web what it is today, links, as well as images, are easily the most commonly adding things on web pages. Thankfully, these items are easy to add (just two basic HTML tags) and they can bring excitement and interactivity to what would otherwise be plain text pages. In this article, you will learn about the (anchor) tag, which is the actual HTML element used to add links to website pages.

Adding Links

A link is called an anchor in HTML, and so the tag to represent it is the A tag. Commonly, people simply refer to these additions as "links", but the anchor is what is actually being added to any page.

Read More

How to Link an Image on Your Website

By Jennifer Kyrnin

When you add a link, you must point to the web page address that you want your users to go to when they click or tap (if they are on a touch screen) that link. You specify this with the attribute.

The href attribute stands for “hypertext reference” and its purpose is to dictate the URL where you want that specific link to go to. Without this information, a link is useless as it would tell the browser that the user should be brought somewhere, but it would not have the destination information available for where that "somewhere" should be. This tag and this attribute go hand in hand.

You can link nearly anything in your HTML page, including images. Simply surround the HTML elements or elements you want to be a link with the and tags. You can also create placeholder links by leaving out the href attribute — but just be sure to go back and update the href information later or the link will not actually do anything when accessed.

HTML5 makes it valid to link block-level elements like paragraphs and DIV elements. You can add an anchor tag around a much larger area, like a division or definition list, and that entire area will be "clickable". This can be especially helpful when trying to create larger, finger-friendly hit areas on a website.

Some Things to Remember When Adding Links

• The final tag is required. If you forget to include it, everything following that link will also be linked, until another link closes the tag.
• Most of the time, it's best to link single images and short spans of text, rather than large blocks of text. Links can add colors and underline styles to your page that can be hard to read. Of course, you can use CSS to change these links styles and edit colors or remove underlines, but it is still good to be mindful of this reality.
• Make sure to check your links so that they don't go bad. Link Rot can make both users and search engines consider your site invalid. Use a link checker regularly to verify the links on your pages. This is especially true when you link out to 3rd party sites (ones that you do not manage) and which may change their pages overtimes, leaving you with dead links. A link checker will find these dead links so you can make any necessary updates.
• Avoid text like "click here" in your link. Remember, people with touch screens can't "click", so that text feels like a product of a past era and really isn't relevant in today's multi-device centric web.

Other Interesting Types of Links

The A element creates a standard link to another document, but there are other types of links that you might be interested in:

• Internal Links or Anchors: These are links to somewhere within a web page, not necessarily the top.
• Image Maps: Image maps let to create links on images that are mapped to specific areas of the image. These can be used for games or creative navigation. You often see them with maps where areas on the map are clickable. Note that image maps are not used on most modern websites, in part because they can cause problems on mobile devices.
• The Element: This element is used to relate other documents and pages to the current one. It won't create a clickable area on your web page, but it's useful to understand.