Netlify is changing my 's into a \

Support
1

Hey everyone,

I apologize if this has been figured out already, but I’m pretty new at coding and cannot seem to get this fixed. This is my Netlify build site: https://jessica-boll-portfolio.netlify.app/

This is in relation to the title when hovering over a navigation link at the top and bottom of the pages. Anytime I use an 's and then push my build to Netlify and it publishes, it turns my 's into a \ and then ends the line.

For instance, the issue I’m having has to do with my navigation link at the top and bottom of each page that says “Work”. I want my site to be accessible so I always add titles and when you hover over the “Work” link, it reads Jessica\ and nothing else. However, on my live server from VS Code, it shows Jessica’s Work when I hover over the same link.

When I go to inspect the page, it shows: title="Jessica" s work’

I assume this is something I may not be aware of so I’m really hoping a seasoned veteran can provide insights into what I need to change.

Thank you all!

2

@ItsmeJessMarie I doubt that Netlify is changing anything, what you’re seeing will be the output of your build and how the browser interprets it.

In your deployed source the HTML for that element is defined as:

image
image892×49 14.6 KB

If you take just:

<a class='nav-link' href='/work' title='Jessica\'s Work'>Work</a>

Put it in an index.html and then serve it with npx serve, you will see exactly the same end result, which is that hovering over the link shows a tooltip of Jessica\

Viewing it in in the browser devtools you can see how the browser has interpreted it:

image

If I were you, I just wouldn’t be defining the attributes with single quotes.

So use:

<a class="nav-link" href="/work" title="Jessica's Work">Work</a>

Which will work perfectly fine.

If you don’t want to do that, you could use HTML entities as explained in this Stack Overflow:

2 Likes
3

Thank you for that insightful information!

I appreciate it,
Jessica