Trouble with Step 14- Building a CatPhotoApp

Tell us what’s happening:

I’m having a hard time answering step 14. I have tried searching “Adding a target attribute using html”. I don’t know if I am looking up the right thing. I just started this today, so I am at the very beginning level. The step is: “Add a target attribute with the value _blank to the anchor (a) element’s opening tag, so that the link opens in a new tab.” I don’t understand the task. Thanks

Your code so far

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

<!-- User Editable Region -->

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

<!-- User Editable Region -->

      <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 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 14

Welcome to the forums.

Adding a target attribute is just like adding the href attribute. You use the same pattern:

name="value"

Replace name with the name of the attribute (target in this case) and value with the value you want the attribute to have (_blank in this case). Add this to the opening a tag just like you did the href attribute. Just be sure to leave a space between them.

Look at the img element below for a reference. Notice how you have already added two attributes to it (the src attribute and the alt attribute).

1 Like

That can happen when you are not quite familiar with the terminology used. Here’s a diagram that might help to understand in a visual way:

+--------------- Element -------------+
|                                     |
+--- Start tag --+         End tag +--+
|                |                 |  |
<p class="saying">live and let live</p>
   |    ||       ||                |
   |    ||       |+-----Content----+
   |    |+-------+
   |    |Attribute
   +----+  Value
 Attribute
    Name

Notice what an attribute is and where is located. It always goes in the starting tag of an element.
With that in mind, let’s read the task again.

Add a target attribute with the value _blank to the anchor (a) element’s opening tag, so that the link opens in a new tab.

And here’s what it is given to you in the exercise

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

I think you might now be able to locate the <a> (starting tag) and write an attribute named target with a value of _blank using the equal sign between.

1 Like

Thank you so much, that was very helpful.