List of supported CSS and HTML attributes

With SendPulse, you can add and edit your email templates using the HTML editor. In this article, we'll look at what HTML tags and CSS properties can be used in email templates.

On this page

Supported HTML Tags

The table lists the HTML tags you can use in your email templates.

Tag Function Attributes
Template elements
head Stores service information, such as styles or page title

dir — sets the text direction;

lang — sets the template text language
p Defines a paragraph

align — sets the horizontal text alignment;

class — sets the style class;

dir — sets the text direction;

id — specifies the element identifier;

style — sets the element style
span Defines an inline element

class — sets the style class;

id — specifies the element identifier;

style — sets the element style
h1, h2, h3, h4, h5, h6 Define 1-6 level headings

align — sets the horizontal text alignment;

class — sets the style class;

dir — sets the text direction;

id — specifies the element identifier;

style — sets the element style
img Inserts an image

align — sets the horizontal image alignment;

border — sets the border width around the image;

class — sets the style class;

height — sets the image height;

hspace — sets horizontal margins;

id — specifies the element identifier;

src — sets the image path;

style — sets the element style;

usemap — connects the image and image map (element <map>);

vspace — sets vertical margins;

width — sets the image width
a Adds a link

class — sets the style class;

href — sets the link address;

id — specifies the element identifier;

style — sets the element style;

target — determines where to open the linked document
hr Creates a horizontal line

align — sets the horizontal line alignment;

size — sets the line thickness;

width — sets the line width
br Sets a line break

class — sets the style class;

id — specifies the element identifier;

style — sets the element style
Text formatting
b, strong Makes a text bold

class — sets the style class;

id — specifies the element identifier;

style — sets the element style
i Italicizes a text

class — sets the style class;

id — specifies the element identifier;

style — sets the element style
u Underlines a text

class — sets the style class;

id — specifies the element identifier;

style — sets the element style
s, strike Applies the strikethrough formatting

class — sets the style class;

id — specifies the element identifier;

style — sets the element style
label Specifies a text label for the input tag

class — sets the style class;

id — specifies the element identifier;

style — sets the element style
font Specifies font styles

class — sets the style class;

color — sets the text color;

face — sets the text font;

id — sets the element identifier;

size — sets the font size;

style — sets the element style
small Decreases the font size by one compared to plain text

class — sets the style class;

id — specifies the element identifier;

style — sets the element style
List
li Creates a list item

class — sets the style class;

dir — sets the text direction;

id — specifies the element identifier;

style — sets the element style;

type — sets the marker type
ol Creates a numbered (ordered) list

class — sets the style class;

dir — sets the text direction;

id — specifies the element identifier;

style — sets the element style;

type — sets the marker type
ul Creates a bulleted (unordered) list

class — sets the style class;

dir — sets the text direction;

id — specifies the element identifier;

style — sets the element style
Table
table Creates a table

align — sets the horizontal table content alignment;

bgcolor — sets the table background color;

border — sets the border width around the table;

cellpadding — sets the distance between the cell border and its content;

cellspacing — sets the spacing between table cells;

class — sets the style class;

dir — sets the text direction;

frame — determines how to display the table outer border;

id — specifies the element identifier;

rules — determines how to display the borders between table cells;

style — sets the element style;

width — sets the table width
tr Defines a table row

align — sets the horizontal row content alignment;

bgcolor — sets the background row color;

class — sets the style class;

dir — sets the text direction;

id — specifies the element identifier;

style — sets the element style;

valign — sets the vertical row content alignment
td Defines a table cell

abbr — sets a short description of the cell contents;

align — sets the horizontal cell content alignment;

bgcolor — sets the background cell color;

class — sets the style class;

colspan — sets the number of cells merged horizontally;

dir — sets the text direction;

height — sets the cell height;

id — specifies the element identifier;

lang — sets the cell text language;

rowspan — sets the number of cells merged vertically;

scope — defines how the cell is associated with the header;

style — sets the element style;

valign — sets the vertical cell content alignment;

width — sets the cell width
th Defines a table header cell

abbr — sets a short description of the cell contents;

align — sets the horizontal cell content alignment;

background — sets the background cell image;

bgcolor — sets the cell background color;

class — sets the style class;

colspan — sets the number of cells merged horizontally;

dir — sets the text direction;

height — sets the cell height;

id — specifies the element identifier;

lang — sets the cell text language;

scope — defines how the cell is associated with the header;

style — sets the element style;

valign — sets the vertical cell content alignment;

width — sets the cell width

Some email clients use their own style sets, so we recommend using the standard attributes for the <table>, <tr>, <td>, and <th> tags.

Supported CSS Properties

Note that all properties must be written inline using the style attribute.

Property Function
Background
background Sets the background style properties
background-color Sets the background color
Borders
border Sets all border style properties at once
border-color Sets the border color
border-width Sets the width of all borders
border-style Sets the line style for all borders
border-bottom Sets all style properties of the bottom border at once
border-bottom-color Sets the bottom border color
border-bottom-style Sets the bottom border line style
border-bottom-width Sets the bottom border line width
border-left Sets all style properties of the left border at once
border-left-color Sets the left border color
border-left-style Sets the left border line style
border-left-width Sets the left border line width
border-right Sets all style properties of the right border at once
border-right-color Sets the right border color
border-right-style Sets the right border line style
border-right-width Sets the right border line width
border-top Sets all style properties of the top border at once
border-top-color Sets the top border color
border-top-style Sets the top border line style
border-top-width Sets the top border line width
Element
display Specifies the element output and visual display on the page
height Sets the element height
width Sets the element width
Font
color Sets the text color
font Sets all font style properties at once
font-family Sets the text font family
font-size Sets the font size
font-style Sets the font style, for example, normal or italic
font-variant Determines how lowercase letters should be represented, i.e., whether to leave them unmodified (normal) or apply small caps (small-caps)
font-weight Sets the font weight
List
list-style-type Sets the marker type for each list element
Table
table-layout Sets the width of the table cells based on the content
Text
letter-spacing Sets the letter spacing in text
line-height Sets the line spacing in text
text-align Sets the horizontal text alignment
text-decoration Specifies the text decoration, such as underlining, strikethrough, or blinking
text-indent Sets the indent size before a line in a text block
text-transform Converts text to uppercase or lowercase characters, for example, turns all characters in the text or the first character of every word in a sentence to uppercase
vertical-align Sets the vertical text alignment

For the <table>, <tr>, <td>, and <th> tags, we recommend duplicating the style styles with the appropriate attributes. In the example below, in addition to the style styles, the align, width, bgcolor, cellpadding, cellspacing, and border attributes are specified.

<table align="center" width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; width: 100%; max-width: 600px; margin: 0px auto; padding: 0px; border-collapse: collapse; border-spacing: 0; border: 0 none;">

Inserting a background image

You can insert a background image in the HTML editor like in example bellow:

<td style=" background-image: url('//www.spcdn.org/title-green-bck.png')" />

If you need to set additional options, such as indentation and alignment, use this example:

<tr style=" background-image: url('//www.spcdn.org/title-green-bck.png'); padding:0; text-align:center; vertical-align:top">

Where url('//www.spcdn.org/title-green-bck.png') is a path to your image.

Last Updated: 09.09.2024

    Rate this article about "List of supported CSS and HTML attributes"

    User Rating: 5 / 5 (7)

    Previous

    How to work with HTML editor

    Next

    How to add social media buttons to email templates

    Popular in Our Blog

    Try SendPulse email service for free