Beginner's Guide to HTML and CSS

A Digital Marketer’s Quick Guide to HTML and CSS


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!

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:

An example of basic HTML code

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.

Writing HTML code in text editor

In addition, many content management systems have a built-in text editor that allows you to edit a page’s HTML.

Text Editor in WordPress

Back to the Top

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:

The structure of an HTML Element

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.

An HTML Attribute within an Element

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

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.

Using Heading Tags in HTML code

Note: A header tag is not the same as a <Head> tag.

Head Tags

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.

Head Tag in HTML

Meta Tags

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.

Meta Title And Meta Description in HTML

Back to the Top

Body 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.

Body Tags in HTML code

Table Tags

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.

Table Tags in HTML

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:

Table created with HTML

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:

Ordered List in HTML

The final product will look like this:

  1. Buy eggs
  2. Pick up dry cleaning
  3. 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:

Unordered List in HTML

Here’s what the final product looks like:

  • Buy eggs
  • Pick up dry cleaning
  • Clean the kitchen

Back to the Top

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.

Open Graph Meta Tags in HTML

Back to the Top

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:

Internal CSS Style Sheet

Back to the Top

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.

Internal/Embedded CSS Styles

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.

CSS Inline Styles

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:

Import Style - CSS

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.

How to write CSS code

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.

The declaration block of CSS syntax

Now that you have a grasp of how to write CSS code, let’s jump right into some CSS syntax!

Back to the Top

Text Formatting

With CSS, we can change the color, style, line spacing, alignment, and much more with the text on our website.

Text-align  

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:

Using text-align in CSS

Text-indent

To indent the first line of a paragraph, use the “text-indent” property.

Text-indent CSS command

Letter-spacing

To adjust the spacing between letters in headers or paragraphs, use the “letter-spacing” property to make necessary adjustments.

Letter-Spacing CSS Property

Line-height

If you’d like to adjust the spacing between each line of text, use the “line-height” property.

Line-height CSS property

Color

To adjust the color of the text on your webpage, use the “color” property to indicate a color name, HEX code, or RGB value.

CSS "Color" Property

Back to the Top

Font Formatting 

For this beginner’s guide, we’ll focus on three CSS font properties: font families, font style, and font size.

Font families

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.

CSS font families

Font style

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.

CSS normal font size

Similarly, to display italicized text, the value will be “italic”.

CSS Italic font style

Font size

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.

CSS Font size

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%.

Font-size using percents in CSS

When published, the text will look like this:

Font-size property in CSS
Photo Credit: KyleSchaffer.com

Margins

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.

Margins in CSS

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:

Margins - Shortened CSS Element

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.

Back to the Top



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.

Learn to Build Websites from Scratch – CodeAcademy

Make an Interactive Website – CodeAcademy

HTML5 Tutorial – W3schools.com

CSS Tutorial – W3schools.com