Connect HTML Pages with the Anchor Element
Now that you are familiar with structural and semantic HTML, you know enough to start fleshing out a website following the guidelines we outlined for organizing files and folder structure. As you add more pages to your website, I bet you are wondering how to connect everything. We can’t very well ask our users to type in a new web address every time they need to visit a new page, so we need to create some sort of site navigation. The anchor element allows us to connect our pages with links. This is easily the most important HTML element, because with a click of the mouse, a link can send you hurtling through the information superhighway. Something this magical has to be complicated, right? Nope. As we will see, there’s almost nothing to it!
We can turn any text or image into a link by simply wrapping it in the <a> tag and giving it the href attribute. The value of the href attribute is the page we want to go to. This can be an absolute or relative path to a file on our server, or a full web address to a completely different site. For these examples, imagine a simple nested folder structure for our website that goes from root (/) to beach (/beach) to ocean (/beach/ocean).
<!-- Relative path from root to ocean -->
<!-- Relative path from ocean to beach -->
<a href="../"><img src="../../img/beach.jpg" /></a>
<!-- Absolute paths -->
<a href="/beach/ocean"><img src="/img/ocean.jpg" /></a>
<a href="http://www.afosfanclub.com">A Flock of Seagulls</a>
Notice that we must include the “http://” when linking to a web address. If we tried to use “www.afosfanclub.com”, the link wouldn’t work. The “www” part, on the other hand, is optional. An anchor element with the href attribute of “http://afosfanclub.com” would work just swimmingly. Sometimes when linking to external websites, you will want it to open in a new window or tab. There are several methods for doing this, but the easiest way is with the target attribute. Setting the target attribute to “_blank” will cause the link to open in a new browser window.
<a target="_blank" href="http://www.afosfanclub.com">A Flock of Seagulls (link opens in a new window)</a>
Links don’t always have to take you to a new page. If you wanted to direct a visitor’s attention to a specific place on your website, you could use the anchor tag to link to an HTML element. The element you are linking to must have a unique id attribute. In your href attribute, the id of the element you want to link to should be preceded by the pound symbol.
<h1>Welcome to the beach</h1>
<p><a href="#sea-shell">Look past the volleyball, squawking gull, and ignore the discarded folderol.</a></p>
<figure><img src="/img/volleyball.jpg" /></figure>
<div class="aves">Squawking Gull</div>
<div id="sea-shell">Sea Shell</div>
Clicking this link will make the browser “jump” down to the sea-shell div, skipping over the volleyball, squawking gull, and discarded folderol. This technique can be used when linking to other pages, too. Say we are in the ocean directory and we’ve heard enough of the sea. We can make a shortcut directly to the sea shell found in our beach directory’s index.html file.
<a href="/beach/#sea-shell">Sea Shell</a>
Every sea shell has a story to tell, if you’re listening. When everything on the top suddenly stops seaming interesting, we can make a link back home.
<a href="/">Go Home</a>