The Yahoo Mail client automatically removes the href attribute from anchor tags

Here is the snippet of code for an email template that is sent in a mail:

<a href="https:&#x2F;&#x2F;someurl.net&#x2F;reset-password?passwordResetToken&#x3D;Qlc9CFIj8NziJEFuDFXv0uDHZTlzhMbj" style="font-family: 'arial',sans-serif; color: #fff; text-decoration: none; padding: 10px 10px;">TROQUE SUA SENHA</a>

yahoo displays as (missing href)

<a rel="nofollow" style="font-family:'arial', sans-serif;color:#fff;text-decoration:none;padding:10px 10px;">TROQUE SUA SENHA</a>

gmail displays correctly as:

<a href="https://someurl.net/reset-password?passwordResetToken=OwNWeKbhoK8TaklFdJRIQWTi7dmCI93A" style="font-family:'arial',sans-serif;color:#fff;text-decoration:none;padding:10px 10px" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://someurl.net/reset-password?passwordResetToken%3DOwNWeKbhoK8TaklFdJRIQWTi7dmCI93A&amp;source=gmail&amp;ust=1588314607785000&amp;usg=AFQjCNEjn0R1PYzmZsDWVFxNzvIhjWG8_A">TROQUE SUA SENHA</a>

Are there any specific anchor tag attributes that need to be set to render the <a> tag in the Yahoo client?

htmlcssyahooyahoo-apiyahoo-mail

Answer №1

After troubleshooting, I found a solution by changing the html entity hex in the href url from "/" to "/".

rawTemplate.replace(/&#x2F;/g, '/')

I noticed that the email client for Gmail supports both the html entity hex (&#x2F;) and slash (/), so the anchor link displayed correctly after rendering.

However, the email client for Yahoo only recognizes slash (/) during rendering, requiring manual replacement.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with Alignment in Bootstrap 3 Form

I'm currently facing an issue with aligning a form group in Bootstrap 3. My goal is to have them aligned vertically, but I am struggling to achieve this. Any help would be greatly appreciated! Please refer to the screenshot below for reference: Her ...

csstwitter-bootstrap-3

Guide to dynamically adding two CSS files in a single component in Angular 8

Within this component, there is a form that needs to support two languages, each with its own unique CSS style - one for left-to-right (ltr) direction, and the other for right-to-left (rtl) direction. Is there a way to conditionally apply two different CS ...

cssangulartypescriptformsangular8

Unable to display Bootstrap 5 modal

I am currently in the process of constructing a basic webpage that includes a navigation bar and a table. The table rows are being dynamically generated through a simple JavaScript script that fetches data asynchronously from a database. I opted to utilize ...

javascripthtmlbootstrap-modalbootstrap-5

Generating unique identifiers for ng-model in AngularJS

Issue - ng-model is not generating dynamically. I have dynamic input boxes and I am attempting to create ng-model dynamically like test[1], test[2], etc. However, when inspecting the form with Firebug, all input elements only show - test[shiftnumber]. HT ...

javascripthtmlangularjsangular-ngmodel

Developing a JSP page by coding in html and css

Being a web designer, I find myself working on JSP pages to modify HTML and CSS for web application projects. However, I often feel confused by the JSP tags that I don't understand. Has anyone experienced this before? If so, how do you manage to edit ...

htmlcssjsp

Issue with left-aligned navigation in Bootstrap

Having some trouble getting my logo to align correctly on the top navigation bar. It looks fine in a small view, but when I stretch it out, the logo shifts to the right. I want the logo to stay all the way to the left regardless of screen size. I've ...

htmlcsstwitter-bootstrap

Whenever I navigate to a new page in my NEXTJS project, it loads an excessive number of modules

I am currently working on a small Next.js project and facing an issue where the initial load time is excessively long. Whenever I click on a link to navigate to a page like home/product/[slug], it takes around 12 seconds to load due to compiling over 2000 ...

javascripthtmlreactjstypescriptnext.js

Creating interactive panorama hotspots with THREE.js SphereGeometry and DOMElements

After creating a WebGL 3D Panorama application using a SphereGeometry, PerspectiveCamera, and CanvasTexture, I am now trying to enhance the scene by adding "HotSpots" over specific areas of the SphereGeometry. However, I am facing difficulty in updating th ...

javascriptcssthree.js

What is the best way to ensure that my website's elements adjust automatically to different screen sizes?

Recently, I encountered a small snippet of HTML code with the main focus being an h2 element. #top-warning{ justify-content: center !important; display: flex; width: 100%; margin-top: 5vw; letter-spacing: 3px; font-family: "Penguin Regular ...

htmlcss

Enlarging the current division while reducing the size of the others when hovering

Currently, I am working on a school project that involves creating a slideshow on a webpage. However, I have reached a point where I am unsure of how to proceed. Here is the progress I have made so far: body { background-color: #252525; } #wrapper { ...

javascripthtmlcss

Showcasing articles in an XML feed according to specific keywords found in the headline

I'm currently working on designing a website for a client and I want to minimize my involvement in its maintenance. I am considering using RSS feeds to automate the process by having content posted on Blogger and then feeding it to the site. However, ...

javascripthtmlwebrssfeed

Using a function on a singular element

I'm currently working on my portfolio and I would like to organize my projects in a menu similar to this felipestoker.com When you click on Works, it displays a menu with my projects categorized. However, when I click on a category, all of them appea ...

jqueryhtmlcss

Is there a way to export the HTML table content to an Excel sheet that is compatible with browsers such as Internet Explorer, Mozilla Firefox, and others?

Welcome to my HTML Page! <html> <head> <title>Table </title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script> </script> </head> <body> <table ...

javajavascriptjqueryhtmlexcel

Obtaining search engine results from a webpage without using an API

In my attempts, I tried the following: $url = “http://www.howtogeek.com”; $str = file_get_contents($url); However, this code displays the entire website instead of the content from the URL specified in $url. The website I want to retrieve data from ...

phphtmlsearch-engine

Using jQuery and Flask-WTF to achieve live word count in a TextAreaField - a step-by-step guide!

I am interested in adding a real-time word count feature to a TextAreaField using jQuery. I found an example that I plan to use as the basis for my code: <html lang="en"> <head> <script src= "https://code.jquery.com/jquery ...

javascripthtmljquery

Utilize PHP for loop to output form values into XML format

Hey there, I'm currently facing an issue with setting up a for loop in PHP to transfer the content of an HTML form into an XML file. It works perfectly fine without the for loop, but throws errors when included. Can anyone provide some insights? It&ap ...

phphtmlxml

Add formatting to a particular element without affecting elements within another element

Consider the following scenario: <input type='text' /> <br /> <iframe> <input type='text'> </iframe> With the style defined as: input[type='text'] { border: 1px solid black; } If you w ...

htmlcss

Can someone assist me in collapsing one element while expanding another in Bootstrap 4?

Incorporating four div cards functioning as buttons to collapse and expand information beneath the card row has resulted in unexpected behavior. Clicking on one card should expand its information while collapsing the previously expanded card, but the imple ...

javascripthtmlcssbootstrap-4

Change the css code to override the color of the background material

Hey there, I'm facing an issue with overriding the background color of a material element. I've tried several methods but can't seem to get it to change. After inspecting the element on the web browser, I found the CSS code that controls th ...

cssmaterial-ui

Using php variable to pass data to jquery and dynamically populate content in jquery dialog

I am facing challenges trying to dynamically display MySQL/PHP query data in a jQuery dialog. Essentially, I have an HTML table with MySQL results. Each table row has an icon next to its result inside an anchor tag with the corresponding MySQL ID. echo &a ...

javascriptphpjqueryhtmlmysql