We have implemented some changes so that BDP better supports HTML in email preamble, having a consistent approach in the following widgets:
- Business Rules (automated emails)
- Email Templates
- Multi Property Email
- Property Detail Email
The following table outline the HTML tags supported.
| HTML | Trigger Event | Target | Example Preamble |
| <div> | A block-level container for other HTML elements. | Used to group content, but <table> is preferred for layout in emails. | May not always behave consistently across email clients, use sparingly. |
| <a href=""> | Creates a hyperlink. | Used to link text or images to URLs. | Make sure to add a target="_blank" for better user experience. |
| <p> | Defines a paragraph of text. | Used for text content. | Ensure proper margins and spacing are maintained with inline CSS. |
| <span> | A container for inline elements or text. | Useful for applying inline styles without affecting layout. | Ideal for styling specific text within a larger block. |
| <img src=""> | Embeds an image. | Used for images in emails. | Ensure images have alt text and use inline styles for width/height. |
| <b> | Makes the enclosed text bold. | Commonly used for emphasis in text. | Widely supported but consider using <strong> for semantic emphasis. |
| <strong> | Adds emphasis (usually bold) to text. | Preferred for bold text with semantic meaning. | Use for important text rather than purely visual <b>. |
| <i> | Italicizes the enclosed text. | For emphasis or stylized text. | <i> For emphasis or stylized text. |
| <em> | Adds emphasis to text (usually visualised as italicized). | For semantic emphasis in text. | Visual output is same as <i> but conveys meaning. Screen readers prefer <em>. |
| <u> | Underlines the enclosed text. | For underlined text. | May interfere with default link styles, use sparingly. |
| <li> | Defines a list item in <ul> or <ol>. | For individual items in lists. | Ensure proper styling to maintain spacing and bullets/numbers. |
| <ul> | Creates an unordered (bulleted) list. | For listing items without specific order. | Ensure proper spacing as list styles may not be fully supported. |
| <ol> | Creates an ordered (numbered) list. | For listing items in a specific order. | Style may need inline CSS for consistent rendering across email clients. |
| <hr> | Creates a horizontal rule (divider). | For breaking text into multiple lines without creating a new paragraph. | If this is used, BDP converts to a new line when saved. |
| <br /> | Inserts a line break. | For breaking text into multiple lines without creating a new paragraph. | If this is used, BDP converts to a new line when saved. |
| <h1/> to <h6/> | Define HTML headings from largest (<h1>) to smallest (<h6>). | Provides heading hierarchy and visual distinction. | May not render consistently in all email clients; inline styling may be needed. |
| <table> | Defines a table structure. | Critical for layout structure in HTML emails. | Use for structuring content due to reliable support across email clients. |
| <tr> | Defines a row in a table. | Used in conjunction with <td> to create table rows and <th> to create table headers. | Tables should be carefully structured for layout control. |
| <th> | Defines a header cell in a table. | Used in tables for column headers. | Requires inline styles for consistent appearance. Should be in a <tr>. |
| <td> | Defines a table data cell. | Used within tables for content placement. | Inline styles may be required to control cell width, padding, and alignment. Should be in a <tr>. |
Important Notes:
Email Client Compatibility: Different email clients may strip or modify certain HTML tags. To ensure consistent rendering, test your email in multiple clients like Gmail, Outlook, Yahoo, etc.
Inline CSS: Inline styles are recommended for ensuring consistent design across various email clients.
Tables for Layout: Please note that Outlook often encounters issues with HTML emails due to its use of MS Word as the rendering engine, it often adds extra margin or padding in unpredictable ways that is not present in the code.
This table provides a solid foundation of HTML elements that work well in most email clients while pointing out areas that may require extra attention or alternatives for better compatibility.
BDP Add-in for MS Outlook