A member asked how to create anchors within a page. An anchor is an HTML element that provides a specific location within a page that can be linked to. I show some examples of anchors and demonstrate how to create them.
Select the link below to watch a high definition version of this video
[S3VIDEO file=’public/liveanswers/LA1-23-11a-page-anchors.mp4′ bgimage=’https://www.byobwebsite.com/wp-content/uploads/2012/10/LA1-23-11a-page-anchors2.jpg’ displaymode=’overlay’]
But let’s talk about anchors for just a moment because I think it’s a great opportunity to talk about one of those… that subject. I have anchors myself if you are… let’s see, let’s just go to subscribe here. Subscribe. You know, you look at my subscribe page and if you click on one of these things, it takes you down to the section on the page where that is being described, right? So if you want to see access to the live recorded Q and A sessions, it drops you back down here. Now the way it does that is that is an anchor and we’re familiar with anchors as when they go from page to page and we call those anchors links. But you can also have an anchor as an internal link or a link that’s on a specific page and all you do is you give it a name and so I’m going to show you right now what this page looks like. Oh shoot, I can’t show you what this page looks like because it’s not… okay what we’re going to do instead of that is we is going to just go over to w3schools and then I’ll demonstrate it. W3schools and HTML and let’s see, links.
Okay so… and this is essentially the tag and so w3schools says that you know, you can use this anchor tag or this tag in 2 ways. One it to create a link to another document by using the href attribute and the other is to create a bookmark inside a document by using the name of the attribute. And so you’re familiar with the href but if you’re… instead of doing it as an href, if you do it as a link, then within the document or a bookmark inside the document, then all you would do is say, a name = tips and then you would… inside or down near the… or where you want it to link to, you would have a href = and then the pound sign tips.
So what we’re going to do is we’re going to go over to my… we’re going to look at that in a practical way. Let’s see…categories byobwebsite.com. And let’s see… let’s just go ahead and log in. And then, let’s see, where do we go? So we go to a page… actually, let’s do that on a post because I think I have a whole bunch of posts in here. So let’s go down to say, sweet cherry 2. Okay and so here’s going to be the… oh let’s go to HTML version or view. Now if we come down to this and say, a href = and then we are opening quotation marks, pound sign, and then let’s just call it test. And then closing and then that’s closing.
So a href = test and then if we come up here to the top and say “Here is our test link” and then select that quick link and then I believe… actually, that’s right. Let’s go back to visual for a second here. So we would… yeah, that was my mistake, pardon me. I got those kind of mixed up. This is just going to be a # test. Let’s just double check this here real quick. Oh that’s it. Name=test. That was what I was doing wrong. Name=test. And then up here, we are going to “here is our link test”, we draw our link, and then that is… let’s just double check the syntax real quick. Href = and then it’s just that right here tips. So we come back… whoops. Come back over to this, here is our link, our test link. Pound sign test, say okay. Let’s just update that. We’ll go view the post here in a second. Okay, view post. So now as we scroll down here, it says, “here’s our link test”. Did I fail to fix that? Oh, I’ve got this thing right here somehow it ended up with that. Update, refresh. It’s the fun of doing this live.
The fun of doing this live is it doesn’t always work exactly the way you want it. Href tips, this is the useful tips section… okay, this is what we’ve got. Name, tips, useful tips section…okay. So I did want that a there but I just want it in a different spot. Let’s just do it right here. And then just for grants, let’s give ourselves, cut more paragraphs of text. Update, refresh. We’ll refresh again unless we have a caching issue here. I’ve got something funny going on, don’t I?
Let’s see, sweet cherry 2. We’re looking at the same blog called Sweetheart cherry 2, okay. It’s not taking me to the right spot. So I still don’t have the syntax right. Okay name =… we’re just going to do… we’re just going to steal this. Name = tips, so copy. Okay, show them my link. Reference must be wrong. A = pound sign, href… copy there. Now it’s… it was the http: bit. That was the problem.
Here you go. The… take you to the… interesting. So there’s an interesting little issue with the new bar because the new bar hides that anchor location since it takes you right to top of the page. When it jumps you to the anchor, it jumps you to the location of the anchor and that anchor location is at the top of your page. So if we come back up to mine and we look at let’s see… members only forum, it takes you… you know, access to the members only forum is at the top of your page.
But because I currently have my bar… WordPress 3.1 bar up… if we log out for just a moment, we’ll just go back to this and we’ll go back to sweet red cherry. Oh no, we want let’s see… go to cherries. Yeah, I think it must be this one here, sweet red cherry. It’s not that one. Let’s go to sweet red cherry 1, it’s not that one either. And since I don’t have a blog page up here, I just can’t… sweetheart cherry. That’s what it was. It’s not sweet red cherry, sweetheart cherry. So then if we hit this… now that’s the top of the page. So that answers Bryan’s question… that answers Bryan’s 2 questions. But it brings us to… Bryan asks, “Shouldn’t that be a relative link and not an absolute link?” Well, it is relative and not absolute in the context of that it starts off with a pound sign.
Any link that begins with a pound sign is linked to the current page wherever that current page happens to be. And so because it’s #test, it links to the anchor link text on this page.