Whether you are a web developer debugging a newsletter layout, a cybersecurity enthusiast inspecting a suspicious link, or simply curious about how a beautifully designed promotional email was constructed, viewing the raw HTML source code of an email is an invaluable skill. While traditional desktop email clients like Outlook make this fairly obvious, Google hides this developer-friendly feature deep within the Gmail web interface.
Understanding the “Original Message” Format
When you ask Gmail to show you the source code, it does not just show you the raw HTML tags (like <table> or <div>). It shows you the entire MIME (Multipurpose Internet Mail Extensions) structure of the email. This includes the routing headers (showing the exact path the email took to reach your inbox), authentication records (like SPF and DKIM), and the raw payload of the message, which often includes both a plain-text version and the HTML version encoded in base64 or quoted-printable formats.
How to View the Source Code in Gmail
You can only access the full source code using the desktop web version of Gmail; this feature is not available in the mobile app.
- Open your web browser and navigate to gmail.com.
- Click on the specific email you want to inspect to open it.
- In the top-right corner of the email itself (next to the “Reply” button), click the More icon (the three vertical dots).
- From the drop-down menu, select Show original.
Navigating the Source Code Window
A new browser tab will open displaying the “Original Message” view.
- The Summary Table: At the very top, Google provides a clean, easy-to-read table summarising the message ID, creation time, and the results of crucial security checks (SPF, DKIM, and DMARC). This is extremely useful for identifying phishing emails.
- The Raw Code: Below the summary table is a massive block of raw text. This is the actual code of the email.
If you are looking for the HTML layout, press Ctrl + F (or Cmd + F on a Mac) and search for the phrase Content-Type: text/html. The code immediately following this declaration is the HTML structure that renders the visual layout of the email you see in your inbox.
Exporting the Code
If you want to analyse the code in a dedicated text editor (like VS Code or Notepad++), simply click the Download Original button at the top of the screen. This will save the entire email block as an .eml text file, which can be opened by any text editor or desktop email client.