Mail Matters

Intro To Email

The Microsoft Outlook LogoThe Gmail LogoThe Apple Mail Logo

Gmail, Outlook, Apple Mail, using these everyday is a major part of the Communications industry and we trust it to do its job well, but how much do we know about how email itself works. To begin with, emails are separated into two distinct parts: the message header and the message body. Firstly, the message header, this contains all the data related to the transit of the email, so here you'd find the From, To & Reply-To email addresses, you'd also find the subject and dates of the send. In addition to these attributes which would be visible to the sender before sending, the header also contains the methods by which the email gets from the origin to the destination as well as any security checks that have been performed on the email while in transit and to authenticate that these are valid for delivery. The body of the email, which is what we'll be primarily concerned with, contains the content that's present when a recipient opens this email, which would generally be in either plain-text or in HTML code which we'll dive into in more detail below.

HTML And Email

When you're working in Communications, and you want to pass along the latest news and updates in your organization, you want to do so in an eyecatching and appealing way, rather than simply sending a large block of text. So what's the solution, why HTML-based email of course, allowing you to put structure to your emails including images, video and your own branding! So what is HTML-based email?


What you see above is a very simple table made in HTML and rendered by the browser you're using to view this page and what you'll see below is the code underlying that very same table:


     <table style="height:100px;width:100px;border:1px solid #000000; margin:10px auto; border-collapse:collapse;">
                            <tr>
                                <td style="border:1px solid #000000;"></td>
                                <td style="border:1px solid #000000;"></td>
                            </tr>
                            <tr>
                                <td style="border:1px solid #000000;"></td>
                                <td style="border:1px solid #000000;"></td>
                            </tr>
                        </table>
                    

When it comes to HTML-based email, the code works exactly the same way and whether you're coding it yourself or using a template made by a designer or one of the various online communications platform, they all work on this same code. While our browsers are built to handle this code without issue, when it comes to emails being rendered, there are some things to be aware of depending on the email clients you use and that's what you'll find covered on our Specifics page.