The text goes missing after adding <ul> tag in span

August 12, 2023

I am a new learner for Html designing email templates. I need to add text in front of a symbol and make sure the text remains aligned for the next line. I am using tag to properly align the text after the symbol. But for some reason it doesn’t seems to be working.

After adding the tag the text is not displaying, it disappears. if i remove

the text appears again. I am not sure what is the reason for this behavior. Any help would be very much appreciated. Thanks in advance.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

 <div class="b opaf v" style=font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%>
                            <table cellpadding=0 style=border:none;vertical-align:top width=100%>
                                <tr>
                                    <td align=left class=x style=font-size:0;word-break:break-word>
                                        <div style=text-align:left>
                                          <p style=margin:0;text-align:left><span style=font-size:12px;font-family:Arial,sans-serif;font-weight:400;color:#54565b;line-height:14px><span style=color:inherit;font-weight:inherit;font-family:inherit;font-size:65%;vertical-align:4px;line-height:0>&sect;</span><span><ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li></ul></span>
                                            </span>
                                           </p>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                        </div>
  <script src="script.js"></script>
</body>

</html>

>Solution :

I was thinking some of basic HTML structure is not followed. I believe so this is excepted output.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
  <title>Browser</title>
</head>

<body>
  <div class="b opaf v" style="font-size: 0; text-align: left; direction: ltr; display: inline-block; vertical-align: top; width: 100%;">
    <table cellpadding="0" style="border: none; vertical-align: top; width: 100%;">
      <tr>
        <td align="left" class="x" style="font-size: 0; word-break: break-all;">
          <div style="text-align: left;">
            <ul style="margin: 0; padding-left: 20px; list-style-type: "&sect;;">
              <li style="font-size: 12px; font-family: Arial, sans-serif; font-weight: 400; color: #54565b; line-height: 14px; position: relative;">
                <span style="color: inherit; font-weight: inherit; font-family: inherit; font-size: 65%; vertical-align: 4px; line-height: 0;">&sect;</span>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </li>
            </ul>
          </div>
        </td>
      </tr>
    </table>
  </div>
  <script src="script.js"></script>
</body>

</html>