Email Header, Body & Footer
This is one of the most common layouts in HTML email. It helps structure your content into clear sections: a Header for branding, a Body for your message, and a Footer for links or legal info.
This layout is easy to build, easy to read, and easy to adapt for different types of emails—like newsletters, promos, and announcements.
✅ Why Use This Layout?
| Section | What It’s For |
|---|---|
| Header | Logos, navigation, or a short intro |
| Body | Main content: images, text, CTAs |
| Footer | Unsubscribe links, contact info, social icons |
It keeps your email content organized and visually clean across devices.
🔧 Sample Structure (Table-Based Layout)
See the Pen Untitled by Email Code Camp (@EmailCodeCamp) on CodePen.
Layout Tips
- Keep your header simple—just a logo or short headline is enough
- Make sure your body has good spacing to keep content readable
- Use a lighter background in the footer to separate it visually
- Stick to a 600px max-width layout for safe rendering across clients
🧰 Use Cases
- Company announcements
- Blog digests
- Ecommerce promotions
- Product launches