One of the most important tags is the a tag. This tag creates links to other pages, but it's much more complicated than the others we've seen so far. You can see that there's a bunch of stuff inside the angle brackets in the opening tag. I'll put a simple example in the page so you can see it clearly:
<a href="http://example.com"> ... </a>
The href stands for Hypertext REFerence. This is how you control which page the link should lead to. There must be an equals sign after href, followed by a destination inside quotation marks. There are three different kinds of links:
http://
part, it can link to any page on the internet. For example, here's a link to the Wikipedia entry on HTML.
http://
and the domain name to link to another page on the same web site as the current one. For example, here's a link to this tutorial page on MetaPage.
id="..."
to assign a name to another tag. I've put a bunch of empty space below this list, and below all that is another paragraph with an id. Try clicking this link to scroll down to that paragraph.
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
The p tag for this paragraph contains id="bottomParagraph"
so that you can link to it with href="#bottomParagraph"
. This is useful for linking to subsections of a large document, like the table of contents in a Wikipedia article.
So far, we've discussed two of these special tag attributes: href and id. If you've been paying attention, you probably also noticed another attribute in the link tags called target. It's optional, but if you set it to exactly target="_blank"
, then when you click the link, the page will be opened in a new tab or window. This is convenient if you think people who clicked your link will eventually want to return to your page when they're done looking at the other page.
However, if the link leads "forward" on the same web site, like this link to the next → lesson in the tutorial, then you should not set a target. By default, the page will open in the same tab, and this will let your reader use the back and forward buttons in their browser to decide for themselves if they want to return to previous pages.