I mentioned at the beginning of this chapter that one of the most important features of HTML is the ability to link 🔗 to other pages. You can write your own links using an <a> tag, which stands for... “anchor”. ⚓
“Wait”, you might be thinking, “why anchor?” All the other tag names so far kinda make sense, but what do anchors have to do with links? As you practice making web pages, you’ll have to get used to the fact that some things just don’t make much sense, at least not anymore. The world is constantly changing, but we still use things that were invented a long time ago.
HTML was invented before the internet. That means that anchor tags—and many other HTML features—were designed before anyone could even imagine how web pages might work! So anchor tags were originally designed to just link to specific places on the current page. For example, the table of contents at the top of this page has links to each section of this page. If you click on one of these links, your screen will automatically scroll down this page, sailing to the appropriate section and then stopping... like a boat dropping an anchor, I guess. 🙄
“So every time I click a link to go to a different page, I’m using something that was intended for scrolling the current page?” Yep! Welcome to the evolution of computer languages! Honestly, they’re not so different from natural languages. For example, in English, the phrase “posting a message” literally comes from attaching a piece of paper to a wooden post so people who walk by would see it, but we now use the phrase to mean sharing messages on the internet. We repurpose words to mean new things all the time, and computer languages are also full of these strange terms that you’ll just have to learn as you go.
Anchor tags are a lot stranger than the other tags we’ve seen so far. Frankly, these are some of the weirdest tags you’ll ever need to use, but it’s important to get used to them. When writing a link, you need to put some extra stuff inside the opening tags besides the letter “a”, called attributes. I’ll put a simple example in the page by itself so you can see it clearly:
<a href="#destination"> This is how to write a link! </a>
The things in there are called attributes, and they provide more detail about how tags should work. There must be an equals sign after the name of each attribute, followed by something inside the quotation marks. I’m using a couple different attributes in these links:
href. The href attribute controls where the link should lead to, and the destination goes in the quotes. You can copy a full web address—including the https:// part—and paste it inside the quotation marks to link to any page on the internet. The name href is hard to remember, but it might help to know that it stands for Hypertext REFerence. Notice how href, http, and html all start with the same letter? Whoever came up with these names must’ve been really hyper!
target. This whole attribute is optional, so you don’t have to remember it if you don’t want to, but it changes where the new page is opened when someone clicks it.
target="_blank" then the new page will be opened in a new tab or window. This is good for linking to other websites where people might get lost in more links. If they want to return to your page when they’re done, they can just close the new window because your page will be waiting for them in the original window.
Links may be weird, but they are not the only tags that have attributes inside of them. Let's look another example on the next page.