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

General Discussion

Linking

What's the way to linking any element from one local html page to particular section of another page? Say, I clicked on a link in index.html which directs me straight down to the 2nd article on my other page, this means I would end up somewhere at the middle of the page instead of the top which is usually the case in normal main navigation.

4 Answers

Hey Paul,

You can use something like <a href="document2.httml#tips">Visit the Useful Tips Section</a>

and in document 2 somewhere in the middle you can add tag like <a id="tips">Useful Tips Section</a>

Now when user will click on link from document1 he will be moved to tips section of the document 2.

This is also true for same documents.

James Barnett
James Barnett
39,199 Points

That's called using an anchor, <a> can link to either another page or to an section on the same page by using an id.

Exhibit A: http://learn.shayhowe.com/html-css/elements-semantics#hyperlinks

That will link you to the hyperlinks section on the elements-semantics page.


Here's the html you to use:

<a href="#awesome">Awesome</a>
<div id="awesome">Awesome Section</div>

You can read more the various kinds of links over on Shaye Howe's Beginner's Guide to HTML & CSS

Exactly what James said above. If you're trying to link from one page to a particular part of another separate page, then write the link like so:

<a href="http://www.mysite.com/targetpage#pagesection">Here's more info</a>

So you want to link to a particular section. I will expand the answer of @James.

1: You will have to add an ID to it, let's use #content.

<div id="content"> ...content... </div>

2: To link to that div (scroll to it on load), just add #content to the end of a href attribute.

<a href="//example.com/index.html#content">Take a look at this awesome content.</a>

3: Hey, what if I want to scroll to that div when it's on the same page. Then simply put the ID with the # (octothrope).

<a href="#content">Skip to content.</a>