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

HTML HTML Basics Going Further with HTML Linking to Sections of a Web Page

Posted by Umar Ijaz
Umar Ijaz
Courses Plus Student 7,278 Points

"Read more" links in index.html take me to the article page (article.html) but NOT to VR Article section.

Hello All, I've set the id attribute to ' vr-article ' for <article> in article.html and added the corresponding ' #vr-article ' to the end of the file paths in the href attributes for both <a> around 'Read more' in index.html.

However, when I click on both of the Read more links in index.html the article.html page opens up in a different tab (as intended since the target attribute is set to _blank) BUT I am still at the top of the page in article.html and NOT in the VR Article part of the page.

The relevant part of my code in article.html is shown below: ...

<article id="vr-article"> <header> <h2>VR Article</h2> <p>By: Nick Pettit</p> <p>Published: June 19, 2017</p> </header> ...

The relevant part of my code in index.html is shown below: ...

<a href="Articles/2017/article.html#vr-article" target=_blank>Read more</a> <footer>Published: June 12, 2017</footer> ...

The article.html file is in the 2017 folder which itself is in a folder named Articles (with a capital A).

Any help would be appreciated. Thanks in advance.

5 Answers

Nebojsa Knjur
Nebojsa Knjur
682 Points
Nebojsa Knjur
Nebojsa Knjur
682 Points

It is because Article page is not big enough, and your browser window is tall enough to show whole page without scrolling down. Resize browser window and try again.

Umar Ijaz
Umar Ijaz
Courses Plus Student 7,278 Points

This does it. Thank you!

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points
Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points

Hello Umar,

I am not sure if this is the problem but one thing I am noticing in your code where you are saying "target=_blank"...

I believe you need to put the "_blank" in quotes like this.

<a href="Articles/2017/article.html#vr-article" target="_blank">Read more</a>

If this doesn't fix it, maybe you could take a snapshot of your code and paste the link in this thread. There is a camera icon in the top right corner of the workspace where you can generate a link to a workspace so others can check out your code.

Hope this helps. Happy Coding! Heidi

Umar Ijaz
PLUS
Umar Ijaz
Courses Plus Student 7,278 Points
Umar Ijaz
Umar Ijaz
Courses Plus Student 7,278 Points

Hello Heidi, Thanks for responding. I noticed this problem as well and fixed it, but it doesn't solve my original problem that I posted about above.

How do I share my code via the snapshot?? I was able to take a snapshot but don't know how I can share it.

Thanks for your help thus far.

Heidi Fryzell
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points
Heidi Fryzell
.a{fill-rule:evenodd;}techdegree seal-36
Heidi Fryzell
Front End Web Development Treehouse Moderator 25,178 Points

Hi Umar,

After you take the snapshot, it should give you a link. That you can paste into your reply.

But I also have another idea. Try this instead:

<a href="Articles/2017/article.html/#vr-article" target="_blank">Read more</a>

I think you might need a "/" before the "#vr-aticle".

Hope this helps you solve it! Heidi