# Learn HTML by Building a Cat Photo App - Step 12

**URL:** <https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-12/704296>\
**Category:** Curriculum Help\
**Created:** [August 3, 2024, 9:43am UTC](https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-12/704296 "2024-08-03T09:43:22Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![cordis](https://avatars.discourse-cdn.com/v4/letter/c/a587f6/32.png) [@cordis](https://forum.freecodecamp.org/u/cordis)\
**Post date:** [August 3, 2024, 9:43am UTC](https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-12/704296/1 "2024-08-03T09:43:22Z")

</div>

### Tell us what’s happening:

How do i nest a new anchor (a) element in this code

See more cat photos in our gallery

[cat photos](https://freecatphotoapp.com)
### Your code so far

```html
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->

<!-- User Editable Region -->

      <p>See more cat photos in our gallery</P>
      <a href="https://freecatphotoapp.com">cat photos</a>

<!-- User Editable Region -->

<a href="https://freecatphotoapp.com">cat photos</a>

      <a href="https://freecatphotoapp.com">link to cat pictures</a>
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
  </body>
</html>

```

### Your browser information:

User Agent is: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36`

### Challenge Information:

Learn HTML by Building a Cat Photo App - Step 12

> **[freeCodeCamp.org](https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-12)**
>
> Learn to Code — For Free

---

<div class="post-metadata">

**Author:** ![Teller](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/teller/32/412338_2.png) [@Teller](https://forum.freecodecamp.org/u/Teller)\
**Post date:** [August 3, 2024, 9:50am UTC](https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-12/704296/2 "2024-08-03T09:50:57Z")

</div>

Welcome to the forum @cordis

Place the opening `anchor` tag before the word `cat` in the `paragraph` element.

Then close the new element by placing the closing `anchor` tag after the word `photos`.

Here is an article explaining how to link text and images inside nested elements you may find helpful.

> **[HTML Link – How to Turn an Image into a Link and Nest Links Inside Paragraphs](https://www.freecodecamp.org/news/how-to-turn-text-and-images-into-links-using-html/)**
>
> There will be times where you will want to nest links inside paragraphs or turn an image into a link. But how do you go about doing that in HTML? In this article, I will show you how to nest links inside paragraphs and how to turn an image

Make sure to remove the second anchor element.

> [@cordis](#):
>
> ```auto
> <a href="https://freecatphotoapp.com">cat photos</a>
> 
> <!-- User Editable Region -->
> 
> <a href="https://freecatphotoapp.com">cat photos</a>
> 
> ```

Happy coding

---

<div class="post-metadata">

**Author:** ![Guided](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/guided/32/414883_2.png) [@Guided](https://forum.freecodecamp.org/u/Guided)\
**Post date:** [August 3, 2024, 9:51am UTC](https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-12/704296/3 "2024-08-03T09:51:58Z")

</div>

To make something into a link/anchor, surround it with the opening and closing anchor tags.

Example:  
(This is an example not the answer)  
This code has no links

```auto
<h1>Welcome to the page</h1>
<p>An example of creating links within an existing page</p>

```

This code creates links from existing content

```auto
<h1>Welcome to the <a href="someWebsite1.com">page</a></h1>
<p>An <a href="someWebsite2.com">example of creating</a> links within an existing page</p>

```

The word ‘page’ in the header is a link  
The words ‘example of creating’ is another link

---

<div class="post-metadata">

**Author:** ![nanjalika](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nanjalika/32/369086_2.png) [@nanjalika](https://forum.freecodecamp.org/u/nanjalika)\
**Post date:** [August 3, 2024, 2:22pm UTC](https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-12/704296/4 "2024-08-03T14:22:17Z")

</div>

LOOK AT MY CODE, TRY TO UNDERSTAND THE DIFFERENCE AND REDO ON YOUR PAGE.

[![A cute orange cat lying on its back.](https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg)](https://freecatphotoapp.com)

😃

---

<div class="post-metadata">

**Author:** ![hbar1st](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/hbar1st/32/372649_2.png) [@hbar1st](https://forum.freecodecamp.org/u/hbar1st)\
**Post date:** [August 3, 2024, 2:23pm UTC](https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-12/704296/5 "2024-08-03T14:23:05Z")

</div>

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

---

<div class="post-metadata">

**Author:** ![nanjalika](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nanjalika/32/369086_2.png) [@nanjalika](https://forum.freecodecamp.org/u/nanjalika)\
**Post date:** [August 3, 2024, 2:25pm UTC](https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-12/704296/6 "2024-08-03T14:25:01Z")

</div>

ah okay, I did not know so.  
my apologies

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 3:34pm UTC](https://forum.freecodecamp.org/t/learn-html-by-building-a-cat-photo-app-step-12/704296/7 "2025-01-08T15:34:08Z")

</div>


