Hi there! Can you please help me to understand why these attributes are used here (below)?
<h2>CatPhotoApp</h2>
<main>
<a href="#footer">Jump to Bottom</a>
<img src=“https://bit.ly/fcc-relaxing-cat” alt=“A cute orange cat lying on its back.”>
<p>one</p>
<p>two.</p>
<p>three</p>
</main>
<footer id=“footer”>Copyright Cat Photo App</footer>
I mean HREF and ID ones. I can suppose that href links to the exact reference (a webpage bottom), but the id…?
Thank you in advance!
href="#footer" means when this is <a> clicked navigate to the part of the page with id="footer"
Thank you! But why <footer id=“footer”>Copyright Cat Photo App</footer> in the end is used with ID attribute? What does it mean?
It’s linking to the same page.
So a user will be able to click a link and have the page automatically scroll to a specific section (here footer). To do this, you need to give a name to the target (create id for footer, or other section of your page), after that you can create the link to desired target.
About id
id is an attribute that you can put on an element to uniquely identify it. There should only be one element on the page with any particular id. You can use id to select an element for css styling or to act on it with javascript or to indicate the target of a hyperlink.
About <a href="something">
<a> is for making hyperlinks.
<a href="www.google.com">Go to Google</a> would make a link to navigate to Google.com
About <a href="#something">
The hash # in href indicates that the link is actually a place on the same page. So, when clicked the part of the page with a matching id is scrolled to the top.
<a href="#table_contents">Table of Contents</a>
Putting it together
How does the hash link know where to go? It looks for an element on the page with an id that matches the href=
So
<a href="#table_contents">Table of Contents</a>
creates a link to an element on the same page with an id of table_contents like
<div id="table_contents" >
Thank you for a detailed explanation!