Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Elena Paraschiv
9,938 Points# sign and #top~ they both go to top.Why?
If I track all the clickable links to the HTML they have in their
<a href="#">. When I click on them on the page they all go to the top of it.
Then in the footer there is a link that says
<a href="#top">Back to top »
I wonder why the teacher did that because if I write instead the same line as
```<a href="top">```Back to top »
```</a>```. (so without the word "top") I get the same result>> it takes me to the top of the page.
Can someone explain this?
3 Answers
Sara Chicazul
7,475 PointsHTML specifications allow you to link to a specific section of a page using the syntax you noticed: a # symbol followed by the id of the element to scroll to. In order for <a href="#top"> to work properly, you should have a tag at the top of your page that includes the attribute id="top". This is useful when the document is very long and doesn't all fit on the same page.
But what if you don't have an element in your page with that id?
I can create a link that says < As per Marcus's comments below, this does nothing!a href="#doesnotexist">, and something has to happen when I click it.
Instead of showing an error if the id is blank, the recommended behaviour is to scroll to the top of the document. (You can read about this in the HTML specifications though it's not the easiest document to understand!)
It's become common to put "dummy links" into HTML so you can rough out all of your links and make sure they look the way you want, even if you haven't made the pages they link to yet. Those are the <a href="#"> tags you noticed. They're useful because they show up as a link and you can click on them, but they don't actually go anywhere or show you an error.
You can use that syntax on purpose to scroll to the top, but it's not as obvious what you intended the code to do. Putting in a target named #top makes it clear that you didn't forget to put a URL there, you really meant to link to the top of the page.
Edited to include corrections by Marcus Parsons!
Marcus Parsons
15,719 PointsSara, it has to be an id not a name. A name is used pretty much exclusively for server side programming to gather data from a form.
Marcus Parsons
15,719 Points<p id="top">Some paragraph text</p>
<!-- some more content here -->
<a href="#top">Back to top</a>
Marcus Parsons
15,719 PointsElena,
To answer your question, you can use those fragment identifiers to link to not only id's on the same page but also an id on a different page. That's actually what's happening with Sara's link if you notice that in the link there is a # sign and then the id for the h4 element that's being used on that W3 specifications page. Once you click on the link, it goes directly to that id.
Marcus Parsons
15,719 PointsAlso, I forgot to mention that if you create something such as
<a href="#doesnotexist">Go to top</a>
it's not going to do anything. You can only use the "#" symbol by itself, or with a valid id, in order to go to somewhere on the document.
Sara Chicazul
7,475 PointsWhoops, you're right Marcus! I keep forgetting the name attribute is ancient and no longer valid. Thanks for clarifying the rest as well!
Marcus Parsons
15,719 PointsName isn't deprecated; it's just used for server side programming. You're welcome, Elena and Sara. Very concise answer, which is why I erased mine. I was too quick to answer! :) Happy Coding you all! :)
Elena Paraschiv
9,938 PointsGot it. Thank you very much for breaking it down so specifically Sarah .Kudos!
Elena Paraschiv
9,938 Pointsgreat. thanks guys!
Elena Paraschiv
9,938 PointsElena Paraschiv
9,938 PointsI see that the code wasnt printed in the message and is not understandable so I will try to rephrase. this is what I mean The last link has the word top in it: <a href="# top">and any other link leads to same result even if they do not have "top" . Then why put "top" if simply "#" gets the same result. I want to know why # in a link tag makes the page go top.