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:
- What is HTML?
- What does HTML do?
- How do I create an HTML file?
- How do I write HTML code?
- What is CSS?
- How does CSS work?
- How do I write CSS code?
- Additional Resources
Let’s get started!
Basic HTML Every Marketer Should Know
What is HTML?
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:
What does HTML do?
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.
How do I create an HTML file?
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.
How do I write HTML code?
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.
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.
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:
- <meta name=”description”> is used to describe the contents of the page.
- <meta name=”author”> is used to identify the author of the webpage.
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:
- The <p> indicates a paragraph within the body text.
- The <img> indicates an image within the body of a web page. You may also see them with two attributes: src and alt. The src attribute indicates the URL of the image and the alt indicates the alt text assigned to the image.
- The <a href> tag is used to hyperlink text and images.
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:
Ordered and Unordered List Tags
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:
- Buy eggs
- Pick up dry cleaning
- Clean the kitchen
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:
- Buy eggs
- Pick up dry cleaning
- Clean the kitchen
Open Graph Meta Tags
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:
- Similar to the <title> tag, the “og:title” attribute is the title that the social media platform will display in your post. If you don’t indicate an “og:title”, then it’ll probably use the information in the <title> tag instead.
- Also like its <meta name=”description”> counterpart, the “og:description” attribute allows you to describe the contents of your webpage and will be displayed underneath the title of your social media post.
- The “og:image” attribute allows you to select an image you’d like to be displayed in your social media post. Note that in many content management systems, this photo will be the “featured image”, but in the event that a social media platform accidentally scapes another photo from the page or, even worse, doesn’t display an image at all, you can quickly fix it with the “og:image” attribute.
- The “og:type” attribute describes the type of content presented on your webpage. You’ll commonly see “website” as the value, but you can use other values like “article”, “author”, “video”, “book”, etc.
Basic CSS Every Marketer Should Know
What is CSS?
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.
How does CSS work?
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.
1. External Stylesheet
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:
2. Internal/Embedded Styles
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.
3. Inline Styles
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.
4. Import Styles
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:
How do I write CSS code?
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:
- “Margin-top” – this adjusts the margin above the element.
- “Margin-bottom” – this adjusts the margin above the element.
- “margin-right” – this adjusts the margin to the right of the element.
- “margin-left” – this adjusts the margin to the left of the element.
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.