What is a target element?

HTML-CSS
1

Hello,
It’s asking me to:

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’m trying to understand what a target attribute is, how to use it, and how to install it with instructions given. Any help would be greatly appreciated.

  **Your code so far**


<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <h2>Cat Photos</h2>
    <!-- TODO: Add link to cat photos -->
    <p>Click here to view more <a href="https://freecatphotoapp.com">cat photos</a>.</p>
    <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/101.0.4951.67 Safari/537.36

Challenge: Step 13

Link to the challenge:

2

Hey there!
So first off, target is an attribute not an element. An element is a… like an object within the HTML. An attribute is something that modifies and helps define something about that object.

Now the target attribute decides were to open the link that the anchor tag you clicked is pointing to. If you click the link, were does it open in your browser? And _blank tells it to open it in a new tab.

You can add just like any other attribute in an element. It sits inside the elements opening tag:

<element attribute="value">
  content
</element>

Make sense?

For more info here’s the documentation on it:

3

I understand what you’re saying, but I’m still unclear how to input this into the anchor line. Do I actually type in " ?

4

Technically speaking quotation marks are only needed when an attribute’s value has spaces in it:

<div class="one two">

But it’s best practice to include them always anyway.

So in short, yes. You do actually type the quotation marks around _blank. :slightly_smiling_face:

Could you share what your anchor tag looks like right now?

5

This is what I have so far:

Click here to view more <a href="https://freecatphotoapp.com">cat photos.

6

So here, you’d add a space after your href="https://freecatphotoapp.com", and then add a new attribute for target in the same way.

something like:

<element attribute1="value1" attribute2="value2">
                           /
   space between attributes

as a real example of this, I could give a paragraph element both a class and id:

<p class="paragraph" id="special-paragraph">
  some text that would be in a paragraph
</p>
7

Following this example now you only have to understand the difference of elements and attributes. Where element put your anchor <a>. The href in your code is an attribute. Meaning it modifies your element which is the anchor. And as we see it;s included in the opening tag.

All in all that’s something fundemental to understand. Hope it helps. :slight_smile:

8

Tried this and it didn’t work:

Click here to view more cat photos.

9

It looks like you didn’t format your code, and so the forums rendered it as HTML.

To share your code here copy past between two rows of three back ticks. That will keep the forums from trying to render it. Like this:

```
your code here
```

10

…

Click here to view more cat photos.

....
11

…

Click here to view more cat photos.

…

12

Guess I’m not getting it…

13

Close, but not quite. Not sure were you’re based but on most American keyboards backticks are right above the tab key, and left of the 1.

You can also click the button on top of your post that looks like this </>
I’ll share a screenshot in a moment.

14 
  <p>Click here to view more <a href="https://freecatphotoapp.com" a href2="_blank">cat photos</a>.</p>
1 Like
15

Looks like you got it :100:

hmm. Looks like you’ve got an extra “a” between attributes (don’t need that, you only need the first “a”) and you used href2 instead of target. Though it looks like you’ve got the right idea.

In your anchor tag:

                        Remove this a
                                     \
<a href="https://freecatphotoapp.com" a href2="_blank">
                                         /
                    change this to (target)
1 Like
16

Okay that got it. Wow…that’s uber complicated. Wish they’d explain that better. Thank you for your time!

1 Like
17

That is art my friend. wow :astonished:

2 Likes
18

Just takes a little getting used to :slightly_smiling_face:

Once you get the basic flow down it gets pretty easy. Just remember how an element tag is formed. It name, and then each of its attributes separated by a space:

<element_name attribute="value" attribute="value">
19

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.