The 101 of Email Code: How to Navigate Email HTML as a Beginner
Seeing code spill out in front of you can feel incredibly intimidating, and sometimes frustrating. I promise you, from marketer to marketer, that it’s way easier than it looks. Plus, being able to navigate email HTML is an incredibly valuable skill.
Don’t get me wrong; I don’t think you have to be an expert coder. But being able to make simple changes to existing emails without looping in an email developer can help significantly speed up your email production. You don’t need to ping a developer every time you’d like to swap out a link, fix a typo, or update a UTM parameter.
I’ll walk you through the absolute basics you’ll need to keep your email engine running so you can make little changes yourself—and get your next campaigns out the door, faster.
What’s HTML and CSS?
HTML and CSS work together like a house. HTML is the sturdy foundation and walls while CSS adds the paint and fixtures you need to make it look beautiful. A basic HTML link looks like this:
<a rel="noopener" target="_blank" href="http://wonderblum.com">Wonderblum</a>
The green section between the quotation marks, you see the link you’re sending people to. The white copy at the end right before the closing </a> tag is the copy that you’re linking from. It’s that simple.
Updating the link or the text is easy, as long as you don’t change anything about the structure of the HTML. Swap out the link, change the copy, but don’t remove a “>” or delete a quotation mark. When you’re ready to make a change to an object, the first step is to find where the HTML for that object lives in your email.
Flip on Grid View in Litmus Builder and click the area you want to update to jump to that section in the code. If you’re not using Builder, try the Find function in your code editor to pinpoint your link. Hit Find, then paste in the link you want to update to locate it in the code.
Change a link
Updating a link is one of the most common pre-send tasks, and luckily it’s one of the easiest things to do in HTML.
Here’s a chunk of code used to build a pretty green CTA, you might find your links living in batches of code like this. That’s ok, updating the link will not affect the way the button looks or performs.
<a class="button" rel="noopener" target="_blank" href="http://wonderblum.com" style="background-color: #26DE81; border-top: 18px solid #26DE81; border-bottom: 18px solid #26DE81; border-left: 28px solid #26DE81; border-right: 28px solid #26DE81; border-radius: 100px; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none;">Get your seeds</a>
We’re looking for: rel="noopener" target="_blank" href=”“. To change this code, highlight the URL and paste your new URL in to replace or simply type it in. Don’t change anything about the formatting—the link needs to stay right between those quotes and after the equals sign.
Rewrite copy
Need to change what your CTA says? Don’t get freaked out by the magic button. It’s easy to swap out the words as long as you know where to look.
<a class="button" rel="noopener" target="_blank" href="http://wonderblum.com" style="background-color: #26DE81; border-top: 18px solid #26DE81; border-bottom: 18px solid #26DE81; border-left: 28px solid #26DE81; border-right: 28px solid #26DE81; border-radius: 100px; color: #ffffff; font-size: 14px; font-weight: bold; text-decoration: none;">Get your seeds</a>
For this example, we want to only change the white text that lives at the very end of this code snippet right before the “</a>” and after the “>”. Think about it like a safety net for your words, just don’t disturb the edges of the net “>” and “<” and your text will update easily.
See (and test) changes in real-time
Want to double-check that your changes look right? We get it!
When you work in Litmus Builder, every change you make to your code will update the live preview in the preview pane on the right. Check if your copy update looks right and click the links to see if they now lead to the right landing page. Plus, you can also see how your email looks in 90+ email clients, right within Litmus Builder.
Want to see all of this in action? Watch our video walk-through of how to make simple changes in Litmus Builder:
Take your email skills to the next level
Is all this code talk inspiring you to learn more? We have so many resources including a thriving community of emailers who live and breathe email code.
- Sign up for our in-person workshop “The Basics of Email Design and Development” at Litmus Live Boston or San Francisco
- Listen to episode #5 of our Delivering Podcast where we dive into the question “What’s email design really?”
- Learn more about Litmus Builder with our Litmus Builder Essentials series. Start with the basics on Getting to Know Our Email Builder
- Learn How Litmus uses Litmus Builder to Test and Troubleshoot Emails
Lyla Rozelle
Lyla Rozelle was a Senior Customer Marketing Manager at Litmus
Blog 