Link to Internal Sections of a Page with Anchor Elments

HTML-CSS
1

i have a problem writing the correct id attribute

Your code so far


<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>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
  <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
  <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
  
</main>
  
<footer>Copyright Cat Photo App</footer>

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 7.0; TECNO WX3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.111 Mobile Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements/

2

Hey!!
You need to add the same id attribute i.e, #footer to footer element at the bottom also, to let the browser know which element to jump to.

2 Likes
3

What’s the id attribute? how do i write it?

4

it is an attribute you can add, like all others as nameOfAttribute="value", in this case the name of the attribute is id

the id attribute is used to give an unique identifier to an element , and can be used as endpoint of a man anchor element

1 Like
5

from the code in the thread above. im trying to write an anchor code for internal links i need the answer. is this correct?
<footer id="footer"> Jump to Bottom </footer>

1 Like
6

That looks correct to me. If it doesn’t work, try removing the spaces like this:
...">Jump to Bottom</...

7

it didnt work. please can the correct code be written for me?

8

the Jump yo Bottom should be the text of the anchor (a) element, you have changed the text of the given footer element, you shouldn’t (footer has text of “Copyright Cat Photo App”)

9

please i didnt understand and it didnt work. can the correct code be written for me?

10

show your current code, so that we can point to you what to fix, so you can learn better

11

please i get that but i’m also racing against time for an application.
<a href="#footer">Jump to bottom</a><footer id="footer">Copyright Cat Photo App</footer>

12

Elsewhere in your page you should have a link similar to
<a href="#footer">Jump To Bottom</a>
which when clicked will take you to the footer tag,

<footer id="footer">\The bottom of the page or whatever content you want to put </footer>

13

Screenshot_20190818-034323
Screenshot_20190818-034323854Ă—480 116 KB

Still wrong.

14

I really mean your whole code, if you show only what you are changing we can’t know if you did right or not
a footer tag is already existing in the code, as last element, if you created a new one then you are not following instructions

15

Add this to your footer

<footer id="footer"> ... your text in here </footer>