HTML Cheat Sheet

Links

Overview

Hyperlinks or just "links" are connections between documents. Clicking on a link usually takes you somewhere. There are three different kinds of links:

We create links using a tags and a href attribute.

External

External links take you to another site on the internet. The link below will take you to Google. Note the 'http://' out the front of the link, this is required as otherwise your browser will be looking for a page called google.com

HTML

<a href='http://google.com'>To Google</a>

RESULT

To Google

Internal

Internal links take you to a page on your site, the link below will take you to a html page called page1. You can link to images or any sort of file this way, not just other HTML pages.

HTML

<a href='page1.html'>To Page 1</a>

RESULT

To Page 1

Inline

Inline links take you to a place on your page, there's a few things we need for this to happen. We firstly need somewhere to jump to, we need to give an element an 'id' attribute so we can identify it.

HTML

<h6 id='your leader'>Jump to me</h6>

RESULT

Jump to me

Now we need to make our link, we make it in the same way as before, with an a tag and a href attribute, but we have to add a hash/pound sign symbol to the front of it so your browser knows to look for an id.

HTML

<a href='#your leader'>Take me to your leader</a>

RESULT

Take me to your leader

Now if you click on our link it will scroll your browser to the heading 6 with the id of 'your leader'. This will only be obvious if the place you're jumping to isn't on your screen. For a better example try clicking the 'to top' link below, or a link in the 'contents' section at the top of this page.