Links and Attributes

Contents

1. Anchors
2. History
3. Attributes
4. The "id" attribute
5. The "href" attribute
   • Internal Links
   • External Links
6. The "target" attribute

Anchors

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 kinda made 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.

History

HTML was invented before the internet. That means that anchor tags—and many other HTML features—were designed before anyone knew how web pages would work. Since there was no internet yet, no one thought of linking to other pages on the internet. Instead, anchor tags were designed for linking 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, the page will automatically scroll to the appropriate section and then stop... like a boat dropping an anchor, I guess. 🙄

Attributes

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:

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:

1. The first attribute is called 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!
2. The second attribute is 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.
   • If you don't set any target, the default is that the new page replaces the old page. This is good for links that lead "forward" on your web site. People would have to click the "back" arrow to get back to the original page.
   • Alternatively, if you set this attribute to exactly 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.