Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

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
216,148 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

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
216,148 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
216,148 Points

See the comment added to my answer.