+

HTML & CSS for Marketers

and Marketing Teams
A comprehensive guide from HubSpot and Codecademy
Table of Contents
Introduction

Chapter 1
What is HTML?

Chapter 2
What is CSS?

Chapter 3
HTML vs. CSS

Chapter 4
HTML Elements to Know

Chapter 5
How to Update Your CSS

Chapter 6
HTML & CSS: What to Avoid

Chapter 7
Courses, Articles, and Resources

Conclusion
Introduction
Introduction

HTML is the foundation of all web pages. It defines the structure of a page, while CSS
defines its style. HTML and CSS are the beginning of everything you need to know to build
simple websites.

For marketers and marketing teams, knowing what’s possible with HTML and CSS
empowers teams to be more creative, analytical, and data-driven. Understanding HTML
and CSS means being able to edit websites and landing pages, work with content
management systems (CMSs), and craft eye-catching emails. Behind the scenes, it helps
you create SEO-friendly content, measure the success of your marketing campaigns, and
ensure the accessibility of your site.

4
With basic knowledge of HTML and CSS, teams can respond quickly to marketing
opportunities and troubleshoot issues, without having to rely on the help of a
developer. And if you do work with developers or a development team, understanding
HTML and CSS can lead to more effective communication across technical and
non-technical teams.

To help you get started, this guide introduces the most common HTML and CSS
applications for marketers and marketing teams. We’ll review the fundamentals of each
language, explore the difference between the two, and provide resources, tools, and
additional training to help you get started.

5
 Chapter 1

What is HTML?
HTML stands for HyperText Markup Language. It determines what elements are displayed
on a web page. HTML helps you organize content, make web pages easier to read, and tell
search engines what the most important keywords are using heading tags.

Here’s an example of what HTML looks like for hyperlinked text:

<a href=”https://www.codecademy.com”>Visit Codecademy</a>

Here’s how it would appear on a web page: Visit Codecademy

Most HTML elements have an opening tag, such as <a>, and a closing tag, such as </a>.
The tags define what HTML element is being displayed.

HTML is most often used in web pages, emails, and blog posts. Many content
management systems (CMSs) have two ways that you can edit content. One way is using a
drag-and-drop editor to add or modify content on a page. The other way is using an HTML
editor to directly modify a page’s source code. You can also write HTML using a standalone
text editor.

Later, we’ll go over common HTML elements that every marketer and marketing team
should know.

7
 Chapter 2

What is CSS?
CSS stands for Cascading Style Sheets. It describes how HTML elements are displayed,
adding colors, fonts, spacing, alignment, and more to create great-looking web pages.
CSS helps you create layouts that adapt to different screen sizes, and style web pages to fit
the look and feel of your brand.

There are a couple ways to add CSS to your web page. You can add inline CSS to modify a
single HTML element, use an internal style sheet to format an entire web page, or link to an
external style sheet that might be used to modify one or more web pages.

Here’s an example of an internal style sheet applied to some text (in a handy test editor
where you can try out some code!).

The CSS selector indicates where the style will be applied (in this case, to the paragraph
element). The declaration background-color: Tomato; describes how the element will be
styled. In this example, the paragraph element will have a tomato-colored background.
You’ll also find CSS written this way in external style sheets.

Here’s another example of HTML and CSS together, this time with inline styling. The syntax
for inline CSS is slightly different than the syntax for a CSS style sheet.

<h1 style=”color:red”>Hello World</h1>

The selected element is an <h1> heading element. It includes a color attribute that styles
the heading as red text.

9
10
 Chapter 3

HTML vs. CSS

Think of HTML as the technical backbone of a web page. It provides the basic structure,
with elements like paragraphs, headers, links, and images. CSS provides the style and
layout, describing how HTML elements are displayed using a variety of colors, fonts,
backgrounds, margins, and more.

In fact, HTML was originally created to distinguish between the structural elements of a
web page using an.html file. Since it was lacking in design functionality, CSS was
developed to serve as the design code, often as a separate .css file.

Now, HTML and CSS work hand in hand to deliver beautifully designed web pages that are
both functional and aesthetically pleasing.

12
 HTML vs. CSS: Here are the main differences

HTML CSS

1. Defines the structure of a web page 1. Defines the style of web pages

2. Modifies a single element on a web 2. Modifies one or more web pages

page
3. Syntax typically consists of selectors
3. Syntax typically consists of an opening followed by declarations or declaration
and closing tag that surrounds a piece of blocks
content
4. More technical to learn
4. Easy to learn
5. Does not have functionality on its own
5. Can function without CSS
6. Does not always display consistently
6. Can be displayed on any browser across different browsers

7. Creates static content, with limited 7. More style and formatting options than
dynamic capabilities HTML

8. Free, with lots of community support 8. Free, with lots of community support
and resources and resources

13
 Chapter 4

HTML Elements to Know

Here is a list of HTML elements that you’ll commonly come across as a marketer. You’ll find
these elements used within web pages, emails, blog posts, website templates, and more.

Here is the basic layout for an HTML document:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Main Heading</h1>
<p>A paragraph of content.</p>
</body>
</html>

The first element we see is a <!DOCTYPE html> document type declaration, which tells the
browser that this is an HTML document. The <html> HTML element will contain all of the
contents of your document.

The <head> head element houses information about your web page that isn’t displayed
on the page itself, including the site title, links to external style sheets, analytics codes, and
other types of metadata. The <body> body element contains all of the content that will be
displayed on the web page. In this case, the page will display a main heading and a
paragraph of text.

15
Common HTML elements for marketers

<h1>-<h6> Heading Elements: There are six different levels of heading elements, ranging
from the highest <h1> to the lowest <h6>. <h1> is used for the main heading, and all
other heading levels are used for subheadings.

Headings are important for blog posts. They help structure your posts and draw attention
to different sections. Headings are also helpful for on-page SEO purposes. That’s because
search engines typically give more weight to keywords that are in your headers.

<h1>This is a Main Heading</h1>

<h2>This is a Subheading</h2>

<p> Paragraph Element: Separates a block of text into paragraph format.

<p>This is a paragraph of content</p>

<span> Span Element: Groups short pieces of text or other HTML elements for styling
purposes. It’s typically used inline to separate content without changing the surrounding
formatting.

<p><span>This text</span> can be styled differently than the surrounding text.</p>

Text Formatting:

<strong> Strong Element: Highlights important text. Browsers typically render this text as
bold by default.

<strong>This text is important!</strong>

16
<em> Emphasis Element: Emphasizes text. Browsers normally render this text in italics by
default.

<em>This text is emphasized.</em>

For other text styling—including fonts, font sizes, and line height— CSS styling is used.

<br> Line Break Element: Adds a line break, and can be used to move text to the next line.
It requires only an opening tag and should not have a closing tag.

<h1> Your heading that is really long and <br> needs to be separated into two lines </
h1>

Lists:

<ul> Undordered List Element: Creates a list, where each item is outlined with a bullet point.

<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>

<ol> Ordered List Element: Creates a list, where each item is numbered by default. This is
a great option for listing steps in a process or for ranking items.

<ol>
<li>Step one</li>
<li>Step two</li>
<li>Step three</li>
</ol>

17
Lists help break up and organize content. You can use CSS to change the style of bullet
points, numbers, or alignment within the list.

<img> Image Element: Embeds images into a document or web page. The <img> tag
requires an attribute called src, which indicates the location of an image in the same
directory or as a URL. The <img> tag is self-closing, which means it doesn’t require a
closing tag.

The <img> element also contains an alt attribute, for displaying alternative text if an image
fails to load in a browser. The text is also read aloud if screen reading software is used for
accessibility purposes. A description of the image can also play a role in improving SEO,
by helping search engines index the image.

<img src=”image.png” alt=”A description of the image”>

<a> Anchor element: Creates hyperlinks to other web pages, a location on the same page,
or any other URL. The href attribute determines where the element points to.

<a href=”https://www.codecademy.com”>Link text</a>

<title> Title Element: Defines the title of an HTML document, it’s usually displayed on the
browser’s title bar or tab. The <title> element can only be contained inside a document’s
<head> element.

<title>Title of Web Page</title>

For a more comprehensive list of HTML elements, check out this Learn HTML Cheatsheet,
which accompanies Codecademy’s Learn HTML course, or HubSpot Academy’s Web
Development free courses and lessons.

18
 Chapter 5

How to Update Your CSS

There are a few ways to update your CSS. Most developers recommend using an external
style sheet (a file ending in .css). External style sheets make web pages easier to maintain
and update. To change the visual style of an element across multiple web pages, you only
need to edit the .css file, instead of adjusting each HTML document individually.

Though not recommended, CSS can also be styled with inline CSS or using an internal
style sheets. These tend to be more time consuming methods that can leave room for error
and inconsistency across your site. But they can be helpful occasionally for styling
individual elements or pages.

Tip: Inline styles have priority over style sheets, and will overwrite any styles that are
defined in an internal or external style sheet.

20
Inline CSS

Inline CSS typically modifies a single page element. To style an HTML element, add the
style attribute to the opening tag. Then add the CSS style(s) you want to apply to that ele-
ment.

Inline CSS looks like this:

<h1 style=”color:red”> Hello World </h1>

Here, the heading element has inline styling which sets the text color to red. Inline styling
allows you to customize a single HTML element, without affecting the style of other ele-
ments on the page.

Internal style sheet

Internal style sheets allow you to add CSS styling to a single web page. To create an inter-
nal style sheet, add a <style>element inside of your HTML document’s <head> element.

Here’s what an internal style sheet looks like:

<head>
<style>
body {
background-color: LightGray;
}
h1 {
color: MidnightBlue;
text-align; center;
}
</style>
</head>

In this example, the background color of the web page will be LightGray, and all the h1
elements will be MidnightBlue and center aligned.

21
External style sheet

To update your CSS using an external style sheet, create a separate .css file that contains
the CSS styles you want to apply to your site. Here’s an example of what an external style
sheet looks like:

body {
background-color: Khaki;
}
h{
color: ForestGreen
margin-left: 20px;
}

When you link the external style sheet to an HTML document, the background color of the
web page will be Khaki, and all the h1 elements will be Forest Green and indented by 20
pixels.

To link the external style sheet to an HTML document, insert a <link> element within the
<head> element of your HTML file. The end result will look something like this:

<head>
<link href=”stylesheet.css” rel=”stylesheet” >
</head>

The “cascading” in Cascading Style Sheets refers to the fact that styling rules “cascade”
down from several sources. This means that styles from a source with higher priority will
overwrite styles from a source with lower priority. The order of priority for CSS styling is:

• Inline styling (highest priority; overwrites other types of styling)

• Internal style sheets
• External style sheets
• Browser default style (lowest priority; other types of styling will overwrite it)

For more ways to use CSS, check out this Learn CSS Cheatsheet, which
accompanies Codecademy’s Learn CSS course, or HubSpot’s Website blog for free
content on HTML, CSS, web design, web development and more. 22
 Chapter 6

HTML & CSS: What to

Avoid
When it comes to HTML and CSS, there To add more spacing between elements,
are a few things that developers split the text into separate blocks or
recommend keeping an eye out for. adjust the spacing using CSS.
Below, you’ll find a few tips on what to
avoid when working with HTML and CSS. CSS
• Not separating HTML and CSS code.
HTML While it can sometimes make sense to
• Forgetting a closing tag. For most HTML use inline CSS styling, CSS typically
elements, an opening tag should be exists as a separate style sheet. This
followed by a closing tag. allows CSS styling to be reused across
multiple web pages.
• Omitting alternative text for images.
Alt text provides a text description for • Not keeping style sheets
screen readers and search engines to well-documented. Make sure your CSS
index an image. Alt text should only be code is grouped logically, formatted con-
omitted when an image is used for sistently, and documented with
decorative purposes. comments. Grouping or removing any re-
dundant code can help keep style sheets
• Placing block elements within inline clean.
elements. Block elements, like <div> and
<p>, make up the structure of a doc- • Updating a style sheet without
ument. Inline elements, like <a> and knowing how many pages it will affect.
<span>, reside within these block Check with your developers or refer to
elements. any documentation if you have
questions, as updating one page can
• Formatting text with <b> and <i>. <b> cause another page to become
displays bold text, and <i> displays unreadable.
italicized text, but they are not semantical-
ly correct. Instead, use the <strong> and • Not checking how your code looks on
<em> tags to label content as different browsers. Since browsers have
important (bold) or emphasized their own default styling, CSS code can
(italicized). show up differently across browsers.
• Adding multiple line breaks with <br>. Doing a CSS reset can help.

24
 Chapter 7

Courses, Articles, and

Resources
Ready to learn more about HTML and CSS? Check out the following list of courses, articles,
and resources curated especially for marketers and marketing teams who want to dive
deeper into the world of HTML and CSS.

Courses

• Website Performance Lesson: Improving The Page Speed of Your Website

• Learn How to Build Websites: Get an introduction to HTML and CSS, and learn how to
build a website from scratch.
• Learn HTML: Get an introduction to HTML, the foundation of all web pages.
• Learn CSS: Learn the basics of styling web pages with CSS, including how to create
• attractive layouts, display and position elements, and work with typography.
• Learn Intermediate CSS: Learn how to create more dynamic web pages using CSS,
• including how to create elegant transitions, visual effects, and layouts that adapt to
• different browsers and devices.
• Code Foundations: Learn to write your first lines of code with an introduction to basic
programming concepts.

Articles
• 15 of the Best Interactive Websites [+ How to Make Your Own]
• What is HTML: Common uses and defining features: Learn about the uses and
• applications of HTML, with links to help you get started.
• Accessibility and HTML: Learn about various ways to make your content accessible to
• visually-impaired or blind users.
• What is Digital Accessibility?: Learn about digital accessibility and why it is important to
incorporate aspects of digital accessibility into websites.
• Getting Started with Visual Studio Code and Building HTML Websites: Learn how to set
up a popular text editor called Visual Studio Code, and create an HTML document that
you can open in your web browser.
• Website Footers: Best Design Practices & Examples

26
Cheatsheets

• HTML Cheatsheet: Reference for basic HTML with explanations and code examples
• CSS Cheatsheet: Reference for basic CSS with explanations and code examples
• Intermediate CSS Cheatsheet: a reference for more advanced CSS concepts

Resources

• HubSpot Developers Community

• Visual Studio Code, Atom, and Sublime: A few text editors that we recommend for
• writing HTML and CSS code.
• Codecademy Forums: Find introductory tips and resources and read stories from other
Codecademy learners.

27
Conclusion
Understanding the fundamentals of HTML and CSS can help
you and your marketing team become more creative,
data-driven, and independent.

You’ll be equipped with the technical knowledge to

fine-tune web pages, create great-looking emails, optimize
for SEO, measure your marketing effort, and so much more.

And knowing what’s possible with HTML and CSS can

empower your team to pursue new ideas and opportunities
with confidence and the technical skills to turn those ideas
into reality.

Software to fuel your growth and build Ready to elevate your marketing team’s
deeper relationships, from first hello to technical skillset?
happy customer and beyond.
Codecademy for Teams is a Codecademy
With HubSpot’s marketing, sales, CRM for Business offering that helps organiza-
and operations software, you can focus tions provide technical training and edu-
on generating leads and revenue, and cation for their employees.
forget about managing a stack of scat-
tered tools.

Request a free 2-week

Get Started, Free! trial here. 29