Question

I am coding an html email template. I want to make it fully legal under XHTML rules. There is a button in my code made it with <table> tag and it is linked, of course, to an URL. For that reason I added an <a> tag before the <table>. The W3C validator tool says I cannot nest these elements. I added the code to make it more understandable.

Do you have any suggestion to avoid this issue?

I appreciate your help.

<a style="text-decoration:none; color:#660eaa; font-size:13px; line-height:125%;" href="http://google.com/" target="_blank" >
    <table id="templateButton" style="font-size:15px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;" bgcolor="#ffd700" align="center" cellspacing="0" cellpadding="0" border="0">
        <tr>
            <td align="center" style="padding:16px 10px"><strong>Go to Google!</strong></td>
        </tr>
    </table>
</a>

Answer 1

You can't use an a tag like this.

The proper way is:

<table id="templateButton" style="font-size:15px; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px;" bgcolor="#ffd700" align="center" cellspacing="0" cellpadding="0" border="0">
   <tr>
      <td align="center" style="padding:16px 10px">
         <a style="text-decoration:none; color:#660eaa; font-size:13px; line-height:125%;" href="http://google.com/" target="_blank" ><strong>Go to Google!</strong></a>
       </td>
   </tr>
</table>

You would style your a tag as a button, not the containers (td or table)

Also, make sure your HTML email is going to look the same or similar in the email clients you want to support. For example the border-radius you have set, will not work in a lot of email clients.

I encourage you to check out this site for more information regarding HTML email: https://www.campaignmonitor.com/dev-resources/will-it-work/

EDIT: You can style the table and td by adding a background color.

<a> tag nested with a tag is not valid in XHTML

1 个答案: