Adding links
Links are what the web is made of. A link lets you move from one location on the web to another. It's the 'hyper' in hypertext. The tag that we use for links is called an anchor, and it looks like this:
<a href="http://www.google.com"> Click here to search the web </a>
As with all other tags, it has an opening and closing part - the <a> and the </a>, and similar to the image tag it has an attribute in the opening tag called href (which stands for Hypertext REFerence), which tells the browser where the links should go. Like most tags (although not the image tag), you wrap it round the thing that you want it to apply to. In this case the text, "Click here to search the web", but it could have been an image or many other things. So let's add a link to our page:
<html>
<body>
<h1>
Hello, I've just had a really big idea!
</h1>
<p>
Here's a picture of it:
</p>
<a href="frankenstein.html">
<img src="images/my_big_idea.jpeg"
style="width:100px;
height:100px;
border: 2px solid red;">
</img>
</a>
</body>
</html>
In this case, I have applied the link to the image, and it points to another page. (Notice how the anchor tag wraps round the image tag - that's proper nesting for you!). Of course, if you were to click on the linked image you wouldn't go anywhere, because I haven't created a file called frankenstein.html yet. But you can do that next!
Top tips
- HTML tags tell the browser how to format the document. Tags can have attributes, which give the browser extra information about that particular bit of your page, for example, the size of an image, or the target of a link
- Remember to close all your tags. Think of the tags wrapping round your content
- Remember to nest your tags properly. Sets of tags should enclose each other like Russian Dolls; you should close the set you most recently opened before moving onto the next set
- If your page doesn't display in a browser properly, carefully check you haven't made any mistakes copying the code here. A missing > or " could be enough to confuse your browser. Or have a look at our troubleshooting section
- Annoyingly, most browsers will actually let you get away with quite a few mistakes before they give up rendering your page. But it's best to get it right first time to avoid more complicated problems arising later on
