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

Jie-Chung Chang
Jie-Chung Chang
4,881 Points

Why should I set different id (id='vr-article') for article section in article.html with article section in index.html

Why should I set different id (id='vr-article') for article section in article.html with article section in index.html?

Does it make sense that I just use unique id='article' once in my entire web documents? Because it did not work when I use id='article' in article.html while I already used id='article' in index.html.

Thanks!

2 Answers

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Id's are unique to a page and can only be used once. Therefore you can not have more than one element with the same id name.

In the teachers example, he used the Id "articles" on his articles section element, not article without an "s" like how you described you used in your question.

<a href="#articles">Articles</a>

<section id="articles">
    The content of the section..
</section>

With this id, the teacher replaced the href value in his nav's article anchor element with "#articles". With a href value like this, once clicked on, the browser is instructed to find the element on the page that has this id of "articles" and take the user to it.

The second example the teacher gave, is that he has shown you how you can link to a specific section of another page using the id attribute with his read more anchor elements.

He replaced the value of those two read more anchor elements to the path of his article.html followed by the hash sign and the Id name of vr-article. Which he defined that id name "vr-article" within his article.html page.

Index.html

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

If you use my example above, remember to replace the pathtoarticle.html With your location of your article.html file.

Article.html

<article id="vr-article">
    The content of the article...
</article>

With this second example, the browser is instructed to take the user to the new page and take them directly to the top of the element that has the Id attribute value of "vr-article"

Remember, ids can only be used once per page.

Hope this helps clear things up.

Jie-Chung Chang
Jie-Chung Chang
4,881 Points

Thanks! It's very clear and useful me.

So it's fine I use the same id in "different" page right?.

For example: I use one id='article' in index.html and one in article.html.