[SalesForce] Converting Email Templates from Classic to Lightning with “Not Allowed” errors

We are trying to convert some of our Classic email templates to Lightning email templates, but when we try to save our custom HTML into the source, we are receiving the following errors. The content is fully functional in Classic, and I'm unable to find documentation to explain the errors, or how to work around them (if possible). Please advise?

The element "head" is not allowed.

The element "meta" is not allowed.

The element "title" is not allowed.

The element "style" is not allowed.

The attribute "topmargin" on the element "body" is not allowed, or has a value that is not allowed.

Thoughts?

Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0">    <!-- So that mobile webkit will display zoomed in -->
<meta name="format-detection" content="telephone=no"> <!-- disable auto telephone linking in iOS -->

<title>Email Header</title>
<style type="text/css">   
    #outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
    /* Resets: see reset.css for details */
    .ReadMsgBody { width: 100%; background-color: #ebebeb;}
    .ExternalClass {width: 100%; background-color: #ebebeb;}
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;}
    body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;}
    body {margin:0; padding:0;}
    table {border-spacing:0;}
    table td {border-collapse:separate;}
     /*table.container{border:1px solid #dddddd;}*/ /* Remove star and slash from either side to add border*/
    .yshortcuts a {border-bottom: none !important;}

    .h1{
        color:#3CB6CE;
        font-family:Arial;
        font-size:22pt;
        font-weight:bold;
        line-height:100%!important;
        margin-top:0;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        text-align:left;
    }

    .h2{
        color:#3CB6CE;
        font-family:Arial;
        font-size:20pt;
        font-weight:bold;
        line-height:100%!important;
        margin-top:0;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        text-align:left;
    }

    .h3{
        color:#22505F;
        font-family:Arial;
        font-size:14pt;
        font-weight:bold;
        line-height:100%!important;
        margin-top:0;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        text-align:left;
    }

    .h4{
        color:#22505F;
        font-family:Arial;
        font-size:12pt;
        font-weight:bold;
        line-height:100%!important;
        margin-top:0;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        text-align:left;
    }
    .h6{
        color:#22505F;
        font-family:Arial;
        font-size:10pt;
        font-weight:bold;
        line-height:100%!important;
        margin-top:0;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        text-align:left;
    }
    .container-padding{
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
        padding-bottom:10px;
        background-color: #ffffff; 
        font-size: 10pt; 
        line-height: 140%!important; 
        font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif; 
        color: #333;
    }

    .container-padding a, .col a{
        color:#22505F;
        font-weight: normal;
        text-decoration: underline;
    }

    .col{
        background-color: #ffffff; 
        line-height:140%!important; 
        font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif; 
        color: #333;
        font-size: 10pt; 
    }

    sub, sup{
        line-height:70%!important;
    }

    #main{
        padding-right: 10px;
        font-size: 10pt;
    }

    #sidebar{
        padding-left:10px;
        font-size: 9pt;
    }

    #footer{
        font-size:10px;
        font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif; 
        padding-top: 10px;
        padding-bottom: 10px;
        background-color:#F2F2F2;
        text-align: left;
    }

    #footer a{
        color:#333;
        font-weight: normal;
        text-decoration: underline;
    }

    img[class=header-image]{
        max-width:600px;
        width:100%;
        height:auto;
    }
.auto-style1 {
    text-align: left;
}
.auto-style2 {
    text-align: center;
}
</style>
</head>
<body style="margin:0; padding:10px 0;" bgcolor="#ebebeb" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
</body>
</html>

Best Answer

Those tags you mentioned were not allowed, but they are now, with the Winter '20 release. http://releasenotes.docs.salesforce.com/en-us/winter20/release-notes/rn_sales_productivity_email_templates_full_mode.htm

Related Topic