As an analogy to the human body, HTML creates the body. CSS, on the other hand, is styling the body with clothes.
6 Places Where HTML and CSS are Used in Digital Marketing
There are cases where HTML and CSS are used in digital marketing. Learning them is liberating, in some cases even rewarding. With some patience and practice, applying them is as easy as learning how to use a spreadsheet.
#1 – Tweak landing pages
The most direct use of HTML/CSS is changing elements to optimize landing pages.
Most landing pages are plug and play and don’t require getting into code. But in some cases, you’d face some level of technicality.
Having a knowledge of HTML/CSS for landing pages is similar to using Adobe Creative suite products and knowing the HEX color codes when choosing a color. You’d be more efficient if you know the “raw” stuff.
Example 1: I styled my contact us form on my WordPress theme fast. I could have done this in the drag and drop builder, but I needed the change sitewide without having to redo the change. I added a minor code
and got the job done.
CSS code snippet:
border: solid 1.5px gray;
Example 2: You can change web pages on the web browser without getting into the “back-end”. This helps efficiency with content and design ideas, as well as wireframing.
Apply the exercise above in other landing page builders that have “HTML editors” to change code.
#2 – Fine-tune email marketing campaigns
Email marketing campaigns require some knowledge of HTML/CSS because the emails are coded.
Like the landing page, it does have a plug and play user interface, but there are be cases where going under the hood is required when the campaign is customized.
Example: Klaviyo, which is a Shopify email marketing tool, can fine-tune email campaigns with some code changes. You might change the font styling of texts for more clarity to your audience.
The exercise above can be done with other email marketing campaigns also like Mailchimp that also have “HTML editors” to change code.
#3 – Install tracking codes
How many times have you read these instructions?
- “Paste this code as high in the <head> of the page as possible”
- “Additionally, paste this code immediately after the opening <body> tag”
- “Paste this code into the <head> of every page you wish to track visitors and collect feedback. And then verify your installation.”
Knowing HTML leads to learning the markup semantics. Placing tracking code is not as hard as it looks when you learn HTML. Learn the opening and closing HTML tag so you know where to add the tracking code without breaking the website.
Example: Implementing Google Analytics tracking code on a website. In case there’s no web developer around, you can add the tracking code on the theme or template on your own.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
<script> window.dataLayer = window.dataLayer || ;
gtag('js', new Date());
Note that the tracking code above is for Google Analytics version 3, not Google Analytics 4.
#4 – User tracking in Google Tag Manager
A benefit of learning HTML/CSS is tracking things on web pages. Many of tracking is based on HTML elements and CSS selectors. You can pretty much a good chunk of work when you know HTML/CSS and Google Tag Manager
#5 – Run website A/B tests
Running A/B tests in tools like Google Optimize requires some HTML/CSS knowledge. The visual editor is enough to do simple changes. But doing more comprehensive tests require knowledge of HTML/CSS.
Knowing HTML/CSS helps navigate through the tool. You’ll also have precision in your tests if you know which HTML element to target and what kind of style changes you want to do.
Example: Use the “Edit HTML” function on Google Optimize and change the simple designs and content on a page. There’s are more ways how to run A/B testing in Google Optimize and HTML changes are a glimpse of it.
#6 – Check click data on heatmaps
This is a personal favorite. User feedback tools like Hotjar collect clicks on a webpage and turn it into a visualized heatmap. Since it collects click data from a webpage, the data is pretty much just HTML/CSS markup.
In the case of Hotjar, it has raw data from the aggregated clicks it gathered. The HTML clicks from the heatmaps are the HTML markup the landing page has.
You uncover user insights with this data since you have that “technical eye”. What, where, and why questions are answered and are a critical part to know more about your customers.
FREE! resources to learn HTML and CSS
FreeCodeCamp.org is one of the best resources out there to learn HTML/CSS. They have an interactive console so you’ll get instant feedback when you’re going through the lessons.
They have a certification on “Responsive Web Design” that teaches an entire curriculum. Best of all, it’s FREE!. I took their interactive courses and it’s fantastic.
Another great resource is YouTube. FreeCodeCamp has complete courses there as well. Brad Traversy’s crash courses help get your feet on HTML and CSS. YouTube has overabundant of tutorials and it’s up to you which plays to your learning style.
Conclusion – learn HTML and CSS even just a little bit
There’s a knowledge gap between soft skills and hard skills. Filling the gap in the middle is where the value comes in. Getting a higher understanding of business is essential, yes. But there’s also value in “checking under the hood”.
Learning HTML/CSS shouldn’t be a problem if you can learn menial tasks in Excel. HTML and CSS are not programming language so it’s easy enough to pick up. A little bit of coding skills goes a long way (like building a personal website).
Coding may not be part of your job description and is not required in digital marketing, but it’s a way to level up your skills. You can’t deny it if learning new things that fill a wide knowledge gap is very valuable, especially if it solves business problems.