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 svenvanzijl
svenvanzijl
573 Points

Linking to Sections of a Web Page wont link correctly

Dear Teamtreehouse Community,

I`m lost i have to link the follow code

<a href="articles/2017/article.html">Read more</a>

to this section of the page

<article>
    <header>
      <h2>VR Article</h2>
      <p>By: Nick Pettit</p>
      <p>Published: June 19 2017</p>
    </header>

      <img src="../../img/vr-user.jpg" alt="User trying a VR headset">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus urna lacus, ut lacinia elit pretium a. Praesent rutrum ac ipsum vitae rhoncus. Nam non molestie purus.</p>
    <aside>
      <q>This i a pull quote from the VR article....</q>
    </aside>

    <p>Nunc imperdiet, dui in varius eleifend, magna enim imperdiet felis, at ultricies magna metus vitae ante. Nulla in porttitor nibh. Mauris non libero in massa porta varius non sed magna. Donec ac mauris mattis, viverra turpis ac, dictum arcu.</p>
    <p>Vivamus molestie laoreet viverra. Ut ac fringilla ex. Donec at nisl semper, commodo mi maximus, fermentum nisi. Duis bibendum gravida ante sit amet consectetur. Curabitur ac est id justo euismod porta quis ac arcu.</p>
  </article>

where i had to add this id

id="vr-articles"

i have followed the video and added the id to the section

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

      <img src="../../img/vr-user.jpg" alt="User trying a VR headset">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus urna lacus, ut lacinia elit pretium a. Praesent rutrum ac ipsum vitae rhoncus. Nam non molestie purus.</p>
    <aside>
      <q>This i a pull quote from the VR article....</q>
    </aside>

    <p>Nunc imperdiet, dui in varius eleifend, magna enim imperdiet felis, at ultricies magna metus vitae ante. Nulla in porttitor nibh. Mauris non libero in massa porta varius non sed magna. Donec ac mauris mattis, viverra turpis ac, dictum arcu.</p>
    <p>Vivamus molestie laoreet viverra. Ut ac fringilla ex. Donec at nisl semper, commodo mi maximus, fermentum nisi. Duis bibendum gravida ante sit amet consectetur. Curabitur ac est id justo euismod porta quis ac arcu.</p>
  </article>

  <aside>
    <h3>More Articles About VR</h3>
    <ul>
      <li><a href="">Make a VR Game</a></li>
      <li><a href="">Learn VR in Unity</a></li>
      <li><a href="">Build User Interfaces in VR</a></li>
    </ul>
  </aside>

and add the id to this link

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

only wont it go to that section! i dont know if im doing something wrong our have forgot to add some code!

Thx!

2 Answers

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

If you are linking to a section of the current page, then you don't need the file name, only the id preceded by the hash symbol, like this:

<a href="#vr-articles">Read more</a>

If that's not the issue, you could facilitate a complete analysis if you make a snapshot of your workspace and post the link to it here.

svenvanzijl
svenvanzijl
573 Points

Hello Steven,

the video i follow whats me to do it this way but i will try you reply ass well Thx! :)

Nicole Lewis
PLUS
Nicole Lewis
Courses Plus Student 657 Points
Nicole Lewis
Nicole Lewis
Courses Plus Student 657 Points

I had the same problem and figured out that my browser window was too long and already showed all the content from article.html on the screen, so the id anchor had no where to jump to. Try to make your browser window smaller so that the bottom content is cut off and see if it will jump to the articles section.

svenvanzijl
svenvanzijl
573 Points

Hello, thank you for your reply a bit to late but any way thanks!