How to write alt when insrting an image

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

<h2>CatPhotoApp</h2>
<main>
<img src=https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg alt= >"freeCodeCamp logo">


<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.</p>
<p>Purr jamp logo">u"freeCodeCmp eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
</main>
  **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.54 Safari/537.36

Challenge: Add Images to Your Website

Link to the challenge:

1 Like

This is the example you were given:

<img
  src="https://www.freecatphotoapp.com/your-image.jpg"
  alt="freeCodeCamp logo"
>

I added space to make it readable, but HTML doesn’t care.

This is what you have:

<img
  src=https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg
  alt= >"freeCodeCamp logo"
>

Your src doesn’t have quotes around it and you have an extra, phantom “>” after the alt. When I fix those, your code passes for me.

1 Like

The above is what you typed. Unfortunately the syntax is malformed. Syntax is the structure of code.

When we place things between carets <> that tells the HTTP engine that compiles, generates, and displays code in a web browser the carets tell the engine “Code here! Read, compile, and display this. Don’t display what’s in between <>.”.

The alt property produces tooltip text that displays when the cursor is placed over that object or element in a browser. alt="your text" needs to be before the left caret (>).

Example:
<img src="example.website.com/img.jpg" alt="This text appears when cursor is placed over the image.">Text placed here will display as text on the webpage.</img>

You also forgot to put your src target address inside double-quotes. Sometimes it works to exclude using quotes, sometimes it doesn’t. It’s best to always use quotes. In this case, since there’s other attributes (the alt tag) if the image address isn’t placed between double-quotes it will cause an error.

Malformed, incorrect syntax:
<img src=example_image.jpg>

Correct syntax:
<img src="example_image.jpg">

Will cause errors and not display correctly:
<img src=example_img.jpg alt=example text>

Correct, this will display the image and the tooltip popup (alt text) when the user hovers their cursor over the image:
<img src="example.jpg" alt="Example Text">

Thank you i now understand where i am making a mistake

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