We recently discussed whether digital marketers should learn to code.
Today, we will be breaking down these terms and defining them in the simplest way possible.
But before we talk about that, let’s explain how browsers interact with web content.
When someone opens a web page, browsers such as Chrome or Safari examine the HTML, CSS and programming languages, and translate them into the views (web pages) that end users see and can interact with.
Now that we understand how web browsers interpret different computer-based languages, we can explore the three main languages in use today.
Now, let’s break down the code.
HTML is the foundational language of the web.
Think of it like a skeleton. Without a skeleton, you and I would be boneless and flopped on the floor, unable to function.
Similarly, without HTML a web page wouldn’t have a structure, layout or any basic content.
This is what basic HTML looks like:
‘<h1>’ stands for the main or primary header. In this way, h2 is the second, h3 is the third, h4 is the fourth header etc.
‘<p>’ stands for the beginning of a paragraph and ‘<body>’ means the beginning of the body text. Similarly, ‘</p>’ means the end of a paragraph and the same rule applies for every HTML tag.
Here is an example of HTML images:
The image file name comes after ‘src=’ (short for source or where the file lives on server, logical huh?) and‘alt=’ is the image alt text. These terms help search engines to understand your image content and the alt text is also what is indexed in search results.
If you want to learn basic HTML, check out Lrn a mobile app that teaches HTML using interactive quizzes.
If HTML is the skeleton and bones of a web page, then CSS is the skin and clothes of a web page. In other words, CSS determines the look and feel of a web page.
While HTML determines the structure of individual pages, CSS determines the design elements across a website. This is where the term cascading comes from... cascading elements across a website.
CSS controls design elements such as fonts, colours, images and menus without altering content that is unique to individual pages.
This is what basic CSS looks like:
As you can see, the CSS code is inline with the HTML tags. Within the h1 tag, style=”color:<insert color>" ; is the CSS code that determines the colour of the h1 header. In this example it's blue.
Here is an example using CSS fonts:
Changes are made to the main header and paragraph HTML tags using the ‘<style>’ tag. Pretty straight forward, the font-family determines the font type and you can adjust the font size using the font-size: tag.
If you want to learn more about CSS, Codecademy has free and paid courses available.
This results in the light bulb being able to be on or off depending on which button you click.
If nothing else, it will help you have better conversations with developers and enable you to be able to make basic changes to code, without calling for help.
With EDMs, landing pages, CTAs and practically every other form of digital marketing utilising one or more of the above languages... it makes sense that you learn how to use HTML and CSS at the very least.
If you want to progress as a marketer, it’s all about up-skilling and increasing your abilities.
Luckily, there are countless resources and training modules available online - many of which are free.
Do yourself a favour and up-skill in HTML and CSS.
Images were sourced from: W3school