{"id":3654,"date":"2019-09-19T00:00:00","date_gmt":"2019-09-19T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/101-email-code-navigate-email-html-beginner\/"},"modified":"2023-08-14T17:01:37","modified_gmt":"2023-08-14T21:01:37","slug":"101-email-code-navigate-email-html-beginner","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/101-email-code-navigate-email-html-beginner","title":{"rendered":"The 101 of Email Code: How to Navigate Email HTML as a Beginner"},"content":{"rendered":"

Seeing code spill out in front of you can feel incredibly intimidating, and sometimes frustrating. I promise you, from marketer to marketer, that it\u2019s way easier than it looks. Plus, being able to navigate email HTML is an incredibly valuable skill.<\/span><\/p>\n

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.<\/span><\/p>\n

I\u2019ll walk you through the absolute basics you\u2019ll need to keep your email engine running so you can make little changes yourself\u2014and get your next campaigns out the door, faster.<\/span><\/p>\n

What\u2019s HTML and CSS?<\/span><\/h2>\n

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:<\/span><\/p>\n

\n<a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/wonderblum.com\">Wonderblum<\/a>\n<\/code><\/pre>\n
The green section between the quotation marks, you see the link you\u2019re sending people to. The white copy at the end right before the closing <\/a> tag is the copy that you\u2019re linking from. It\u2019s that simple.<\/span><\/p>\n
Updating the link or the text is easy, as long as you don\u2019t change anything about the <\/span>structure<\/span><\/em> of the HTML. Swap out the link, change the copy, but don\u2019t remove a \u201c>\u201d or delete a quotation mark. When you\u2019re ready to make a change to an object, the first step is to find where the HTML for that object lives in your email.<\/span>
\n<\/span><\/p>\n
Flip on <\/span>Grid View in Litmus Builder<\/span><\/a> and click the area you want to update to jump to that section in the code. If you\u2019re 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.<\/span><\/p>\n
Change a link<\/span><\/h3>\n
Updating a link is one of the most common pre-send tasks, and luckily it\u2019s one of the easiest things to do in HTML.<\/span><\/p>\n
Here\u2019s a chunk of code used to build a pretty green CTA, you might find your links living in batches of code like this. That\u2019s ok, updating the link will not affect the way the button looks or performs. <\/span><\/p>\n
\n<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>\n<\/code><\/pre>\n
\"\"<\/figure>\n
We\u2019re looking for: rel=\"noopener\" target=\"_blank\" href=”<\/span><\/span>“. To change this code, highlight the URL and paste your new URL in to replace or simply type it in. Don\u2019t change anything about the formatting\u2014the link needs to stay right between those quotes and after the equals sign.<\/span><\/p>\n
Rewrite copy<\/span><\/h3>\n
Need to change what your CTA says? Don\u2019t get freaked out by the magic button. It\u2019s easy to swap out the words as long as you know where to look.<\/span><\/p>\n
\n<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>\n<\/code><\/pre>\n
For this example, we want to only change the white text that lives at the very end of this code snippet right before the \u201c<\/span><\/a><\/span>\u201d and after the \u201c<\/span>><\/span>\u201d. Think about it like a safety net for your words, just don\u2019t disturb the edges of the net \u201c>\u201d and \u201c<\u201d and your text will update easily.<\/span><\/p>\n
See (and test) changes in real-time<\/span><\/h3>\n
Want to double-check that your changes look right? We get it!<\/span><\/p>\n
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.<\/span><\/p>\n
Want to see all of this in action? Watch our video walk-through of how to make simple changes in Litmus Builder:<\/span><\/p>\n