Semantic tags (<h1>, <h2>, <h3> and <p> etc.) help subscribers using screen reading software, such as JAWS
and VoiceOver, distinguish headings, and different levels of heading from paragraphs of text.
Semantic heading and paragraph
<h1>Heading</h1>
<p>Paragraph of text.</p>
|
Styling semantic headings
On headings, apply their styling inside each opening <h> tag. Add mso-line-height-rule:exactly; to maintain the line-height on Microsoft Outlook, and margin:0; to reset the margin.
<h1 style="font-family:Arial, sans-serif; font-size:40px; line-height:45px; mso-line-height-rule:exactly; color:#ee0000; margin:0;">Heading</h1>
|
Styling semantic paragraphs
On paragraphs, first apply their styling inside the opening <td> tag of the table cell that contains them, as follows:
<td style="font-family:Arial, sans-serif; font-size:14px; line-height:21px; color:#666666;">
|
Then apply a style of margin:0; inside each opening <p> tag.
Troublesome Tags
While semantic tags provide a greater understanding of the hierarchy of an emails content, they’re often avoided, as some email and webmail clients apply their own styling to these elements, resulting in poor rendering
margin is one particular style that tends to be applied to semantic tags, resulting in bloated spacing, particularly around headings. The way to fix this is to reset the style by applying margin:0; inside the opening tag.
|
|