Linking to pages within your own site is probably the most common use of the anchor element, while links are fairly simple to create.
You do have to understand how they’re resolved in order to create your links properly.
how to create internal links within a site.
Check directory structure before we begin creating links, so we understand which pages we’re going to try to link to other pages.
That’s going to require us to understand how to resolve a link from one file to another.
It’s pretty common for websites that have multiple directories and subdirectories. So a lot of times, you’re going to have to code a link to go from one page to another page even if it’s up or down through separate directories. So it’s nice to understand kind of how all that works.
I have my anchor tag. In order to resolve a link, I need a href attribute. So after the anchor tag character, I’m going to create a href attribute. And for this one, I’m going to go to the same.htm.
linking from one page to another in the same directory
When you’re linking from one page to another in the same directory, you don’t need anything other than the name of that file.
title attribute. And I want you to get into the habit of using a title. The title should be a descriptive text about where this link is going to go. That way, any time there’s a screen reader or another assistive technology device, it can actually give a little bit more information about the link. So that the user knows, whether or not they want to click that.
Go up a directory
find the info directory. Go inside of that. Inside that, find the extras directory and go inside of that. And now, I can tell it to find the individual page. So when we’re drilling down, we use the name of the directory, a forward slash and then the name of the page. In this case, we’re going down two directories. All right. I
. All right. So I’m on the about.htm page. And this time, it’s asking me to link back to the links page first and then to the resources page. Now links page presents me with an interesting problem. When I go down into a directory, all I have to do is name the directory and then pass a forward slash to let it know that I want to go inside of it. But what if you want to go up a directory? That’s a little bit different in terms of syntax.
So, let’s go ahead and create an anchor element. Let’s do an href and what I’m going to do is I’m going to do, dot, dot, forward slash. So dot, dot, forward slash essentially tells the browser or user agent, I want to go up one directory and find something. In this case, I’m just going to go up a directory outside of the info into the parent directory of the 05 underscore 01. And there, I’m going to find links.htm. All right, after that, I’m going to do a title. And that title’s going to be up one directory.
So I’m really just not being descriptive of the page, which I would normally do in a title. Here I’m being descriptive of the links to sort of reinforce the document relative path that we’re taking. Save that. And now resources, you probably have a good idea as to how this one needs to be resolved. So for resources, I’m going to do href attribute and then we need to go into the extras folder. So I’m going to do extras forward slash resources.htm. I’ll do another title here and this title will be down one directory. Don’t forget to wrap the entire thing in an anchor tag.
We have a setting in contrast here. One is going up a directory, dot, dot, forward slash. The other one is going into the extras directory, looking inside of that for the page resources.htm. And both of those are relative to the about page, which is sitting in the info directory. Now finally, we’re going to go to resources. Resources are what we called a bottom-level page. Meaning, it’s in the deepest nested directory. So any link that’s going outside of its directory at all, it needs to go up first. What we’re going to do is well first go to the about.htm page.
And here, we’re going to do an a href. And remember, we need to go up a directory so that’s dot dot forward slash. And in this case, we’re just going to go up and choose the about.htm. So we don’t have to name the directory at all. We’re just going up one directory and then find the file inside of it. We’ll give that a title attribute. And I’m going to say up one directory. Okay. That’s pretty easy, we did that earlier. And I gotta wrap both an opening and closing anchor tag there. But what about going up two directories? So in the case of links, I have to go up into the info directory and then up one more into the 501 directory.
So what do I do then? Well, you can chain together as many of those dot dot forward slashes as you need to. So in this case, I can do dot dot forward slash, dot dot forward slash. And then finally, fine links.htm. We’ll do a title. And for that we’ll say, up two directories. And then finally, we’ve got to remember to close the anchor element. So I’m going to go ahead and save that. Now, it’s not uncommon to need to go up and down. So if I needed to go up a couple directories and then find another directory and drill back down, that’s perfectly acceptable.
Anytime that you’re resolving the path of a link, you can go in to directories and up directories in whatever order that you need in order to get to the page from where you are currently at. All right. So if I save this and go in the browser, now we’re in our resources page. I can see that clicking on links, takes me up two directories into the links page. I can see that clicking on resources, takes me down into the folders. And you can actually see that up in the URL. You can see the folder structure. 05 01 info extras. If I go to the about page, you can see.
Again, I’m going up a directory and links. I go yet, up one more directory. So overall, link syntax is pretty easy to grasp. Now, it’s worth noting that you can wrap these anchor elements around almost any HTML content. Here we did single page names. What we could an entire passage, if we wanted to. If we needed to wrap it around something like an image to make the image a clickable link, that is fine. Now prior to HTML5, we actually needed to keep the anchor tag within block level elements. Meaning, the anchor had to sit within a paragraph or within a heading, something like that.
But in HTML5, the specification was actually changed to allow anchor tags to wrap around block level elements as well. So you could have the same link wrap around a heading one, for example and a paragraph. Now in theory, this is supposed to allow us to create these sort of large clickable sections of content. However, implementation across browsers is a little uneven. And typically, with your CSS styling which we’ll talk about a little bit later. You get some really unexpected visual rendering, when you use these, what they call block level lengths.
So, my advice would be to approach that particular technique carefully.