Home How to use escape characters in an alt attribute inside an img element in HTML?

Questions

How to use escape characters in an alt attribute inside an img element in HTML?

January 26, 2022

Is this the right way to use escape characters in alt attributes for alt text of an img element?

I have the below code:

<h3>Option 1</h3>
<img src="image.jpg" 
     alt='Version of "Whistler\'s Mother" in cubist style'>

<br><br>

<h3>Option 2</h3>
<img src="image.jpg" 
     alt="Version of \"Whistler's Mother\" in cubist style">

Either of the two options above do not work properly as the alt text. The alt text that I wanted to display is:

Version of "Whistler's Mother" in cubist style

>Solution :

No, use the HTML entity instead. E.g. ' or ":

<h3>Option 1</h3>
<img src="image.jpg" 
     alt='Version of "Whistler&apos;s Mother" in cubist style'>

<br><br>

<h3>Option 2</h3>
<img src="image.jpg" 
     alt="Version of &quot;Whistler's Mother&quot; in cubist style">