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
Daniel Stepanenko
2,376 Points# in href attribute
I'm having a hard time understanding what the purpose of the # sign in the href attribute is when linking to an id'ed element on the same page.
<a href="#some_text">
<p id="some_text">
5 Answers
dylanpardee
Courses Plus Student 8,740 PointsThe ‘#’ represents a link to an element based on its ID.
If you had a <div> element with the ID of “header” at the top of your page and you would like to create a “Back to Top” link. You would create a link like this.
<a href="#header">Back to Top</a>
Now lets say you had a basic website for a business, with a contact page. And on that contact page you had a <div> element with with the ID of “directions”(Google Map/Business Location). If you would like to link directly to the directions section of the contact page from a different page you would create a link like this.
Relative Link
<a href="contact.html#directions">Get Directions</a>
Absolute Link
<a href="http://www.example.com/contact.html#directions">Get Directions</a>
The first part is the link to the page and the second is the link to a location on that page. The second part is only used by the client to direct them to a point on the page.
"http://www.example.com/contact.html" "#header"
The ‘#’ represents the beginning of the second part, without this the web server would attempt to serve this file.
"contact.htmlheader"
Hope this helps :)
Aurelian Spodarec
7,369 PointsWell ,
ID is # and a class is a dot ( . )
You know how you style in CSS?
You pick ID or a class and take an # for ID or . for a class.
Look at this code
Notice how i have div and then ID ?
so header would go on right where is gallery but lets change it to header and here we go .
Got it?
Daniel Stepanenko
2,376 PointsThanks Aurelian, that was helpful.
Aurelian Spodarec
7,369 PointsHi, i sugest to re-watch the video .
In noe word .
You make an id to an element like a link that goes to Home page .
You make a back button and assign it same id that home page has but you put # and its now connected with Home Page . So if you click it, it will take you there.
I hope this is clear explanation . if not, tell me i will write a paragraph about it : p not a long one.
Hope this helps ^^
Daniel Stepanenko
2,376 PointsI understand the concept of identifying the element and referring to it using the href attribute. What I don't understand is the purpose of the # as syntax. In other words why is it written href="#some_text" and not simple href="some_text"?
Kris Phelps
7,609 PointsHey Daniel,
The syntax exists so the browser knows exactly what you want to do. So, your example is this:
href="#some_text" and not simple href="some_text"
By omitting the "#" symbol, the browser will simply think you're trying to go to another document (relative to your current location) within the same directory. For example, if you were looking at http://example.com/page1.html and there was a link on the page coded as: <a href="some_text">Some Text</a>
If you clicked that link, the browser would try to take you to http://example.com/some_text
It's called a relative link, and it's perfectly acceptable. That's why you can make an image with a src like this: <img src="img/numbers-01.jpg"> you didn't have to provide the whole URL, like this: <img src="http://example.com/img/numbers-01.jpg">
This relative linking is why you can't create the link the way you describe. The # symbol tells the browser to look for an element with that ID on the page. Similarly, you can also link to another element on a different page: http://example.com/page2.html#SomeID
That link will take you to page2.html and down to an element with the ID of SomeID. I hope this helps clarify. I know it's kind of long-winded, but I wanted to address your question thoroughly.
Aurelian Spodarec
7,369 PointsHi,
Im not saying Dylan is wrong but, you mentioned it in one way .
In one way , the id # is a selector of of id .
You can do it like you said but you use # to make something unique , with classes you are more flexible.
Basicaly if you want to style something , lets say header, you put it in # or class , and in css you get it by #header and say { what you want to do , how to style }
Its like a pointer to point something specific.
You don't need an id , but if you want to style e.g. a navigation bar and you just put nag, it will take all navigation bar . Instead with id or class, if you selec with id , you will select only the one you want, the specific one .
Also you can do as Dylan said , but in terms of styling , its different.