---
title: "Mark up the message with meaning · Agent Wranglers"
url: https://agentwranglers.se/playbook/email/layout-and-accessibility/semantic-structure
updated: 2026-10-20
licence: "All rights reserved"
---

# Mark up the message with meaning

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)
- Rule: Use headings, paragraphs and lists, and mark every layout table with `role="presentation"`, so screen readers announce content and not table cells.
- How: Use one `h1` for the main subject and `h2` for sections. Put `lang` and `dir` on the `html` element and on the main wrapper, because some clients drop the `html` element. Give every table used only for layout `role="presentation"`. Keep the reading order the same as the visual order.
- Check: Open the test send with a screen reader such as VoiceOver or NVDA. It reads headings as headings and never says "table" or "row" for layout.

Example:

```html
<html lang="en" dir="ltr">
<body>
  <div lang="en" dir="ltr" role="article" aria-roledescription="email" aria-label="Your order has shipped">
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
      <tr><td>
        <h1>Your order has shipped</h1>
        <p>Order 1042 left our warehouse today.</p>
      </td></tr>
    </table>
  </div>
</body>
</html>
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers email playbook: https://agentwranglers.se/playbook/email/layout-and-accessibility/semantic-structure`.

- Next: [Describe every image](https://agentwranglers.se/playbook/email/layout-and-accessibility/image-alt-text)
- [Layout and accessibility](https://agentwranglers.se/playbook/email/layout-and-accessibility)