Today, digital marketers are expected to be highly-creative, analytical and data-driven, and tech-savvy, but is learning HTML and CSS a must-have skill for digital marketers?
Our answer: of course!
This doesn’t mean you should go back to school to become a full-stack developer, but having a working knowledge of HTML and CSS does much more than add a few catchy buzzwords to your resume.
Understanding the basics of HTML and CSS will equip you with the tools to understand how a website is created, how it works, and how to manipulate the code behind it.
To be a viable digital marketer, you should be comfortable adding tracking to a website (better yet, figuring out what’s wrong with your analytics tracking), making design changes to landing pages, editing email designs, and making on-page SEO optimizations.
Essentially, knowing a little bit of code can save you a lot of time, effort, and money.
To help you get started, this quick guide will give you a basic understanding of what HTML and CSS are, how they work, and the most common formatting functions. Here’s an overview of what we’ll cover:
Let’s get started!
HTML (Hyper Text Markup Language) is a computer language used to create web pages and web apps. HTML involves using tags–which are the shortcodes you’ll type into a text-file–which your browser will read and present visually. Basic HTML looks something like this:
HTML allows you to manipulate structure the content of your webpage. You can structure your paragraphs and sections, delete unnecessary spacing, reformat embedded images, add hyperlinks, fix broken lists and tables, and much more.
To create an HTML file, use one of these text editors: Notepad (for Windows) or TextEdit (for Mac). Click here to learn how to create an HTML document using Notepad and TextEdit.
In addition, many content management systems have a built-in text editor that allows you to edit a page’s HTML.
HTML has elements, which are made of a start tag, end tag, and the content in between them. Altogether, an element will look like this:
In the above example, the <p> is the start tag, </p> is the end tag, and “My first paragraph.” is the element’s content. In other examples that you’ll see in this guide, you’ll notice that you can nestle elements within other elements, like a <p> tag within a <body> tag.
In addition, elements can also have attributes, which provide additional information about an element. For instance, the <img> tag denotes an HTML image, but adding the attribute “src” displays the source of the image.
Now that we understand the structure of HTML elements, here are a few elements and attributes every digital marketer should be familiar with. For a deeper look into HTML, we’ll provide some additional resources you can reference towards the end of this post.
Let’s start from the top with….
Heading tags are used to structure your headings, which are often used divide text into digestible sections. Headings also indicate what information is important to search engines.
There are 6 levels of heading tags and they’re ranked by levels of importance, from <h1> to <h6>. The <h1> heading tag should contain the most important information on the web page, like a title and primary keywords. Slightly less important information and keywords can go in <h2> tags and so on.
Note: A header tag is not the same as a <Head> tag.
A head tag (<head>) is used to display information about the webpage itself. Within the head tag, you can include information like the title of the web page (<title>), styles (<style>), meta information, and more.
As we mentioned a moment ago, meta information is included within a head tag. Meta tags (<meta>) provide metadata about the web page that is not visibly displayed and is also read by search engines.
Here are a few common examples of meta tags:
You’ll also notice in the example below that there are different attributes commonly associated with a <meta> tag, like “name”, “content, and “property”. Click here to learn more about attributes of <meta> tags.
The body tag (<body>) is used to indicate the web page’s body, where text, links, images, tables, and other content is displayed.
You’ll commonly see these tags within a body tag:
To create a table within a web page, you’ll begin by using the Table tag <table> with one or more of the following elements: <tr> to indicate a row within a table, <td> to indicate information within a cell within the table, and <th> for the table’s header.
In the example above, I’ve indicated the headers of two rows in the table–”Weekly Spending” and “Weekly Budget”–then filled out the cells in the second row with the appropriate data. When published, my table will look something like this:
In HTML, there are two types of lists: ordered (numbered) and unordered lists. The <ol> tag indicates an ordered list, which displays information in alphabetical or numerical order. The <li> tag indicates an individual item on your list. For instance, here’s how my to-do list is displayed in HTML:
The final product will look like this:
In contrast, if I want to display a list of items in no particular order, I will use the <ol> tag to create an unordered list, which will display my items in a bullet-point format. Here’s how my to-do list will look like in an unordered list:
Here’s what the final product looks like:
Ever wondered how social media platforms are able to display a preview of your content when you include a link in a post?
Introducing Open Graph meta tags. These are social meta tags that are recognized by the most popular social media platforms, including Facebook, LinkedIn, and Google Plus. (Note that this process uses different meta tags for Twitter cards. Click here for more information.)
Unlike other HTML elements, like <head> or <table>, open graph meta tags are attributes attached to the <meta> tag.
Here are the Open Graph tags you’ll likely encounter:
CSS (Cascading Style Sheets) is a programming language that allows you to change the look overall look of HTML elements of a webpage by editing its color, layout, and fonts.
With HTML, you’ll have to create an HTML document using a text editor. But how do you apply CSS to that document? To style your web page, you’ll have to apply a CSS file (known as a stylesheet) to your HTML document. There are four ways to apply CSS to your HTML code.
The first method is an external style sheet. This is a separate plain text file that contains all of the CSS styles you want to apply to your entire website. Once the stylesheet is created, it should be saved with a .css extension.
In order to link to this stylesheet with your HTML web pages, you’ll insert the following line in between the <head> tags. The end result will look something like this:
Internal (also referred to as Embedded) styles allow you to add elements of your stylesheet directly into an HTML document using <style> tags within <head> tags. This option is used when you want a unique style on a single web page, like a landing page.
Another option is to use an inline style to edit a single element on a page. That means I can change the header of a section on a web page, without affecting any other headers on the page or on the rest of the website.
To do so, simply add the <style> tag behind a specific element (in this example my <h1> tag) without brackets. Then specify the properties and values you’d like to change about that element.
The final option is to import an external CSS stylesheet using the @import rule within your <style> tags. This option is great if you have a large website that requires a lot of CSS styling and multiple stylesheets. It would look something like this:
CSS syntax contains two major components: the selector and the declaration block. The selector indicates which HTML element you’d like to style. In the example below, the selector is “p”, meaning that I would like to style a paragraph.
The declaration block is all of the text within the curly brackets. Each declaration can contain one or more declarations, and each declaration has a property and a value. In the example below, the text in red is the property and the text in green is the value. Also, note how each declaration is separated by a semicolon.
Now that you have a grasp of how to write CSS code, let’s jump right into some CSS syntax!
With CSS, we can change the color, style, line spacing, alignment, and much more with the text on our website.
Let’s begin with text aligning. This involves aligning my text to the left, right, centered, or justified (where every line is stretched to have the same width). To align text, use the “text-align” property.
If I want to center a paragraph, for instance, the CSS syntax will look something like this:
To indent the first line of a paragraph, use the “text-indent” property.
To adjust the spacing between letters in headers or paragraphs, use the “letter-spacing” property to make necessary adjustments.
If you’d like to adjust the spacing between each line of text, use the “line-height” property.
To adjust the color of the text on your webpage, use the “color” property to indicate a color name, HEX code, or RGB value.
For this beginner’s guide, we’ll focus on three CSS font properties: font families, font style, and font size.
In a CSS declaration block, you may see two types of font families. If you see “Times New Roman” or “Arial” in the declaration block, those are specific font families. If you see “Serif” or “Sans-serif”, those are considered generic families.
To use the “font-family” property, begin with the font family of your choice, followed by a generic family, like in the example below.
The “font style” property is mainly used to distinguish normal text from italicized text. For normal text, the value will be “normal”, like in the example below.
Similarly, to display italicized text, the value will be “italic”.
For this guide, we’ll focus on using the “font-size” property to adjust the size of your text with pixels and percents.
For context, the default size for text within a paragraph is 16px. If you want to increase the size of the paragraph text, simply use the “font-size” property, followed by the number of pixels as your value.
Alternatively, you can increase of all of the text within a <body> tag using percents. Remember, the default size for paragraph text is 16px, which is equal to 100%. Here’s what it would look like if I wanted to increase the body text size to 120%.
When published, the text will look like this:
In CSS, the “margin” property allows you to create empty space around an element. You’ll most likely see one of these four margin properties:
To specify the space of your margins, you’ll most likely see px as the value, but pts, cm, and % values are also commonly used.
We should note that you may also see a shortened version of this code. Instead of a developer using 4 different “margin” properties, they can shorten it simply using “margin” as the property. Therefore, the example above can be re-written as:
In this shortened code, the first value belongs to the top margin, the second belongs to the right margin, the third belongs to the bottom margin, and the fourth belongs to the left margin.
Phew! That was a lot of information, but there’s still so much to learn about HTML and CSS. As promised, here are additional resources that can help take your HTML and CSS skills to the next level.
Sign up to our newsletter to stay up to date with all the latest movements in the field.
More from Ladder Blog
The art world is being disrupted by generative AI, and artists aren’t happy. Generative AI models like DALL-E, Midjourney, and Stable Diffusion were trained by scraping millions of images from the internet, without permission. Artists claim this violates copyright, while the companies training these models argue this falls under fair use.
Read More →In the world of digital marketing and data-driven decision-making, creative testing is a pivotal tool in achieving business growth. Gone are the days of relying on gut feelings or guesswork; now, business decisions are powered by data-validated insights, meticulously collected, analyzed, and validated. This transformative process empowers businesses of all sizes, from established enterprises to budding startups, to thrive in an ever-evolving digital market. This article looks at the practical applications, challenges, and innovative transformations associated with creative testing, offering you valuable insights and actionable strategies to implement in your own digital marketing efforts for achieving growth and success.
Read More →
