From the course: HTML Essential Training

Links - HTML Tutorial

From the course: HTML Essential Training

Start my 1-month free trial

Links

“

- The link. Let's talk about how to make links on the web. These days, we take linking for granted. Of course we know we have navigation bars, menus of links, teaser cards, pages of article titles all begging us to click to see more, click to go elsewhere, it's normal. But back in the 1980s, people who were inventing new ways for computers to help us do our work were obsessed thinking about and talking about the link. Obsessed with hypertext, hypermedia, hyperlink. The very idea that there could be a special zone on a page that would be magically activated to teleport you to another place, another page. It was groundbreaking. It actually took over 20 years of theorizing and experimenting from the mid 1960s to the early 1990s before we ended up with the web. Even the fact that it's called the web is because of this obsession with how different parts link to other parts, creating a web. The code for creating a link is fairly simple. The way that the link transformed computing information and everything about our modern world is profound. To make a link, we use the A element. A stands for anchor. On the opening tag, we need an href attribute. H-R-E-F equals quote quote. This points to where we want the link to go. Href stands for Hypertext Reference. A nerdy phrase that's a throwback to all those conversations back in the 80s and 70s. Between the opening and closing A tags, put whatever it is that you want to be clickable. Usually text or an image or both, we start simple. With some words. Here, we can see the results. The phrase, this is a link, is now a link. If we click on it, it goes to the website at example.com. By default, the A element is an inline element. And it easily goes in the midst of the flow of some text, like this. You can see here, here's a paragraph with the link element wrapped around the words with a link. We can wrap links around anything, not just text. Here's a link wrapped around the image element. We could format our code to make it a little easier to understand. Now, if I click on this image, it also goes to example.com. You can also put a link around more complex content like a teaser card. We can wrap it A element around several other elements creating a whole group of things that all become linked. That's how the A element and the href attribute work. Now, let's look a little more deeply into the URL that we put into the href attribute. I was just using HTTPS://example.com. Let's talk about the wide variety of what can go in there. If you are linking to something out on the web someplace or some other website, you can create the link by putting the whole URL in the slot. It doesn't actually matter whether you include the trailing slash or not. Some URLs point to the home page of a site. Others point to content deeper in. All of these are what's called an absolute URL. You point to a specific place on the web, an absolute place. You must include the HTTP or the HTTPS in an absolute URL. When we use a modern browser these days, we can get away with just typing example.com up in the URL bar and the browser will fill in the rest. But when we make a link as a developer or someone adding content to the website, we need that HTTPS:// or HTTPS:// part. HTTP stands for Hypertext Transport Protocol. Another nerdy phrase from the 1980s. This is a way that everything on the web talks to everything else. The protocol, the rules of the communication system. It's one of the most important things that got invented when the web was invented. So what's the difference between HTTP and HTTPS? Well the S stands for Secure. Originally, all web addresses were HTTP. Today, all the experts agree every website should be using HTTPS instead. That's how to make a link using an absolute URL as your path.

Contents