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

Alexandra Cianciara
Alexandra Cianciara
2,465 Points
Posted by Alexandra Cianciara
Alexandra Cianciara
2,465 Points

Trying to link to different sections but it's not working

What am I doing wrong, trying to link About to About section and so on and followed exactly whats in the video but not working: https://teamtreehouse.com/workspaces/38720062#

<!DOCTYPE html> <html> <head> <title>Experience VR</title> </head>

<body> <div> <header> <h1>Experience VR</h1> <p>A <em>simple blog </em> about virtual reality experiences</p> <nav>
<ul> <li><a href="#">Home</a></li> <li><a href="about">About</a></li> <li><a href="articles">Articles</a></li> <li><a href="contact">Contact</a></li> </ul> </nav> </header>

          <div>
            <img src="Img/featured.jpg" alt="Virtual reality user"> 
            <p><strong>Virtual relaity</strong> is becoming well known as a form of entertianment, but it's also finding its way into fields like education, industrial design, healthcare and so much more.</p>
            <a href="https://teamtreehouse.com/vr?category=news" target="_blank">Start Your VR Journey</a>
          </div>

        <main>
                  <section id="about">
                  <h2>About this site</h2>
                    <p><span>Lorem ipsum dolor sit amet </span>, consectetur adipiscing elit. Suspendisse vehicula metus in bibendum laoreet. Aenean libero est, egestas eu eros pretium, sodales iaculis est.</p>
                    <figure>
                       <img src="Img/vr-space.jpg" alt="User experiencing space in VR">
                      <figcaption>
                    Virtual reality users can explore faraway places and feel as though they are right in the middle of the action
                      </figcaption>
                    </figure>
                  </section>

                  <section id="articles">
                      <h2>Latest VR Articles</h2>

                    <article>
                      <header>
                          <h3>How Schools Use Virtual Reality to Improve Education</h3>
                          <p>By: Nick Pettit</p> 
                        </header>
                          <p>Lorem ipsum dolor</p>
                          <a href="articles/2017/Article.html">Read More</a>
                      <footer>Published June 12, 2017</footer>
                 </article>  

                    <article>
                       <header>
                          <h3>The Advantageso of VR Simulation</h3>
                         <p>By: Author McAuthor Face</p>
                       </header>  
                          <p>Lorem ipsum dolor</p>
                          <a href="articles/2017/Article.html">Read More</a>
                      <footer>Published June 19, 2017</footer>
                    </article>
                  </section>

                    <section id="contact">
                    <h2>Contact</h2>
                      <p><strong>Email </strong> coolvrexperience@gmail.com</p>
                      <p><strong>Phone</strong> 555-123-444</p>
                      <p><strong>Address:</strong></p>
                      <adress>
                      Experience VR<br>
                      2017 Virtual Way<br>
                      City, State 33437  
                      </adress>
                    </section>
       </main> 

        <aside> 
            <h3>Top VR Resources</h3>

            <ol>
              <li> <a href="#">Learn to create educational experiences in VR</a></li>
              <li> <a href="#">Virtual Reality in Entertainment</a></li>
              <li> <a href="#">Interact with Building and Products in VR</a></li>
              <li> <a href="#">Use VR for teleconferencing and social media</a></li>
            </ol>

          <hr>

          <blockquote>
          Virtual reality was once the dream of science fiction. But the internet was also once a dream, and so were computers and smartphones. The future is coming. 
            <footer>
            - <cite> <a href="https://www.facebook.com/zuck/posts/10101319050523971">Mark Zuckerberg</a></cite>
           </footer>
          </blockquote>
        </aside>


        <footer>
        <p><small>&copy;2017 Experience VR, The Blog</small></p>
        </footer>
  </div>

</body> </html>

3 Answers

Alexandra Cianciara
Alexandra Cianciara
2,465 Points
Alexandra Cianciara
Alexandra Cianciara
2,465 Points

I now done the relative links, but it's still not working, not sure if this is something to do with orders of my folders?

<header> <h1>Experience VR</h1> <p>A simple blog about virtual reality experiences</p> <nav>
<ul> <li> <a href="/">Home</a></li> <li> <a href="/#about">About</a></li> <li> <a href="/#articles">Articles</a></li> <li> <a href="/contact">Contact</a></li> </ul> </nav>

Steven Parker
Steven Parker
230,995 Points
Steven Parker
Steven Parker
230,995 Points

When linking to specific elements, the element id should be preceded with a hash symbol ("#").

For exmampe:

          <li><a href="#about">About</a></li>

And for future postings, you can't share a direct URL to your workspace, it's temporary and only exists while you are using it.

But you can use the snapshot function in the workspace and provide the link to that.

Alexandra Cianciara
Alexandra Cianciara
2,465 Points
Alexandra Cianciara
Alexandra Cianciara
2,465 Points

Thanks but this is in here to link to sections back in the Index.html (from Article.html). The videos showed to do this: <li> <a href="../../Index.html">Home</a></li> Add. ../../

<header> <h1>Experience VR</h1> <p>A simple blog about virtual reality experiences</p> <nav>
<ul> <li> <a href="../../Index.html">Home</a></li> <li> <a href="../../Index.html#about">About</a></li> <li> <a href="../../Index.html#articles">Articles</a></li> <li> <a href="../../Index.html#contact">Contact</a></li> </ul> </nav> </header>

Do you know what am I doing wrong?

Thank you Alexandra

Steven Parker
Steven Parker
230,995 Points
Steven Parker
Steven Parker
230,995 Points

You can't share a direct URL to your workspace, it's temporary and only exists while you are using it.
But you can use the snapshot function in the workspace and provide the link to that.

But in the meantime I can say that a root-relative path to have a file name instead of a ID location:

 <li> <a href="/#about">About</a></li>      <!-- so instead of THIS -->
 <li> <a href="/about.html">About</a></li>  <!-- I would expect something like this -->
Steven Parker
Steven Parker
230,995 Points
Steven Parker
Steven Parker
230,995 Points

See the comment added to my answer.