HTML Hacks for Marketers: Decoded

html-hacks-for-marketers-hubspot

Programmer, developer, engineer, techie. These are all terms used to describe, well, not marketers. Yet many marketers need the foundation of these roles: HTML.

HTML (Hyper Text Markup Language) is used to create web pages all over the internet. And while you may not be a webmaster, you're likely crafting blog posts, publishing landing pages, and sending email campaigns. 

Luckily this page will decode the code you need to know (ha, how meta), to be an agile marketer. If you want your IT or web design teams to take on the heavy lifting, go for it! But we believe every marketer should be equipped with the basic HTML knowledge needed to adjust content in an agile marketing fashion. Let's get started. 

HTML vs. CSS: What do I need to know?

In simplest terms, HTML focuses on website structure whereas CSS (Cascading Style Sheets) focuses on website appearance. HTML defines things like “this section is the sidebar,” “this text is a list,” or “this word is a link.” With HTML, all of that jumbled text comes together into a nicely structured webpage.

Using CSS, you can easily change the appearance of your website and makes changes that are site-wide. You can keep the commands for the style stuff –fonts, colors, and so on – separate from the commands for the content. They’re called “cascading” because you can have multiple style sheets, with one style sheet that inherits properties (or “cascades”) from others.

For a lot of people, a simple web template is good enough. It’s only when you want to start customizing the look of a site that you need to delve into CSS. 

Marketing Hacks: Where HTML Meets CSS

Now here's the thing. While HTML and CSS are distinct coding languages, the two overlap when it comes to hacking code for marketing. As marketers, we often work on an agile basis. We need to publish a blog post instantly, send an email immediately, or publish a landing page quickly. In these moments, we can't wait for custom styling. We can't wait for someone with domain expertise on coding to make our tweaks and adjustments. We need to launch our campaigns and start seeing results fast.

That's where HTML and CSS overlap for us. While HTML traditionally focuses on structure, the code you're about to learn will include HTML tags that will add some styling magic to your web content. Let's dive in. 

html-toc-1

To jump to a specific section, just click one of the links below.

  1. Section 1 | Intro to HTML: The Language of the Web
  2. Section 2 | 12 HTML Hacks for the Agile Marketer
  3. Section 3 | Additional Tags for Advanced Hacking

We'll also provide additional resources from HubSpot and Codecademy to continue your education as suited for your marketing needs.
HTML-instructors-1

SECTION ONE 
Intro to HTML: The Language of the Web

Let's start by understanding what an HTML tag is. An HTML tag consists of keywords within angle brackets (<>) that describe the way you want content to appear on a page.

Let's describe this through a basic paragraph tag. It'll look something like:

<p> Your paragraph content goes here. </p>

Every tag begins with open brackets (<p>) and ends with a closed bracket (</p>). This is just so the structure is laid out appropriately, but most importantly, so the web browser can interpret the language and know what structure it should display.

Let's take a look at the basic structure of a web page, which always starts with <!DOCTYPE html>. This is so the browser understands it is reading an HTML structure:

<!DOCTYPE html>
<html>
<body>
<h1>This is our main header</h1>
<p>This is our first paragraph</p>
</body>
</html>

This small strip of HTML starts with a <body> tag in order to mark the beginning of the body content. Within this language, there are headers you can use to organize your content. These header tags range from <h1> to <h6>, with h1 being the largest-size header and h6 the smallest one (you'll see these again in the second section).

And little by little, it all starts to come together. Some of the tags are pretty intuitive, like the <p> tag for paragraphs. 

There are many additional HTML tags you can use to alter the structure to your web content, but from a general overview, this isn't so bad, right? Now that you have a basic understanding of it, we can jump into 12 additional HTML tags you can use. 

SECTION TWO 
12 HTML Hacks for the Agile Marketer

For each of the 12 HTML tags, we'll explain what the tag is as well as display how it appears. That way, you can understand its use cases and see how it'd look if you implemented it!

1. Header

What It Is:

The days of essay-like web content are quickly disappearing. Today, content you share needs to be structured in a user-friendly format that allows folks to either read the article in-depth or scan through the key points. Here are the top three header tags:

<h1> Your Header Text Here </h1>

<h2> Your Header Text Here </h2>

<h3> Your Header Text Here </h3>

How It Looks:

Here's how these three header tags look in action:

Your Header Here

Your Header Here

Your Header Here
tweet-this-code
(Clicking above will allow you to tweet about your latest HTML knowledge.)

2. Hyperlink

What It Is:

When creating content, you should always attribute information such as stats, quotes, or photos back to their original source. This goes beyond stating the source name. Ideally you should provide an inbound link to the source. Here's the HTML tag to do that:

<a href="url"> Source URL </a>

How It Looks:


According to the 2013 State of Inbound Marketing Report, social media produces almost double the marketing leads of trade shows, telemarketing, direct mail, or PPC.
tweet-this-code

3. Spacing

What It Is:

Paragraphs have about a 1.5 line spacing before and after each block of text, which can be seen in your content's source code with a paragraph tag:

<p> With marketing love, </p>

<p> Anum </p>

Imagine formatting an email where you need the signature message and name to align. This is where you wouldn't want the extra spacing, and can use the break rule:

<p> With marketing love, <br>
Anum </p>

How It Looks:

With marketing love,
Anum

If you wanted to insert nonbreaking space -- for instance, extra space between words -- you simply need to add the code: &nbsp;

You can see this in action in this video: 

 
tweet-this-code

4. Image

What It Is:

Visual content is used throughout your marketing. Let's say you're building a landing page and want to feature an image that visualizes the promotional offer available on that page. Here's the code you'd see:

<img src="image file link" width="300" height="200" alt="keyword description"> 

You'll notice that this code includes three important factors:

  1. Image File Link: This is the destination URL of the image. When you upload an image file to your CMS or COS (content optimization system), a URL is created for that image. This tells the internet where this image file lives.
  2. Image Size: Specify the width and height of your image. Hopefully your CMS or COS allows you to do this automatically, but if not, ensure the image size matches the proportions of the original file.
  3. Keyword Description: Despite all its advancements, Google's algorithm can't look at an image and tell you what it is. However, you can use keywords to describe the image so that Google's algorithm can associate your image with those keywords.

How It Looks:

With an actual URL and keyword description in the code, here's what you'll see ... an image! 

thanksgiving-rounded-html-for-marketers

And as a side note, if you like the image above, it's from our collection of 200+ free holiday stock photos. You can download and use the photos in any of your marketing assets.
tweet-this-code

5. List

What It Is:

When creating web content, varying structure can help you hit a message home. One of my favorite content organization tools is the list. Let's start with the code for an unordered list:

<ul>
<li> first line item</li>
<li> second line item</li>
<li> third line item</li>
</ul>

Now let's look at the code for ordered lists:

<ol>
<ol>
<li> first line item</li>
<li> second line item</li>
<li> third line item</li>
</ol>

How It Looks:

Unordered lists in action:

  • first line item
  • second line item
  • third line item

Ordered lists in action:

  1. first line item
  2. second line item
  3. third line item

You'll notice in the code to your right that the codes are almost identical. The tag "ul" simply means unordered list while "ol" means ordered list. See, isn't code so straight forward?
tweet-this-code

6. Horizontal Line

What It Is:

Let's say your web design team just sent over a completed web page for your next campaign, but you want to separate part of the content by adding in one, quick, line between the content. You need to launch the campaign the next day and don't want to go back to the web team yet again. No worries! Here's the HTML tag to add to the page's code:

<hr>

Boom. Done.

 

How It Looks:

Inbound marketing is cool.

Inbound sales is cool.


Line breaks are cool, too.

 
tweet-this-code

7. Text Formatting

What It Is:

Every CMS or COS should allow you to easily bold, italicize, and underline text in your content. But sometimes you're messing with the title module of your page, or another component of a blog post, and need to input the code. In those instances:

<b> text to bold here </b>

<strong> text to bold here </strong>

<u> text to underline here </u>

<i> text to italicize here </i>

<em> text to italicize here </em>

How It Looks:

You'll notice more than one tag for bolding and italicizing. This is because different CMS and COS's use different tags. They shouldn't vary extensively, and the codes shown to your right are the primary ones. Then with just little bit of formatting, magic happens:

Words can be emphasized.

Words can be demanding.

Words can be persuasive. 
tweet-this-code

8. Block Quote

What It Is:

If you're building a customer testimonial page or writing a blog post after an interview with a thought leader, it can be helpful to make interesting quotes from the piece stand out.

Here's a simple code to help:

<blockquote> "Your quote here." </blockquote>

How It Looks:

For blockquotes, the appearance will vary based on the platform and template you're using. For this guide, I'm using a very simple HubSpot template, so a blockquote in this case adds a strong indent to the content so it stands out from the rest of the content, as you can see below:

"This is so inspirational."
tweet-this-code

9. Social Share Link

What It Is:

To amplify the reach of your content, it's helpful to include social share links. Whether you're hyperlinking words or images, the following codes can help:

LinkedIn: http://www.linkedin.com/shareArticle?mini=true&url=URL

Facebook: http://www.facebook.com/sharer/sharer.php?u=URL

For Twitter, the code gets a bit complicated. An easier solution is to simply head to clicktotweet.com, enter your tweet, hit "generate code," and use the generated URL as a normal hyperlink. 

 

How It Looks:

You can see these codes in action in image form below. The social media icons below are actually from our collection of 135 free icons to help design and optimize your content. Each has been hyperlinked using the codes explained to your right with the destination being the download page for the very icons I mentioned!

social-icons-03 social-icons-02 social-icons-01
tweet-this-code

10. Line Break

What It Is:

As simple as the horizontal line tag is the line break tag. This simple tag comes in handy when you're trying to simply add blank space between content. It looks like this:

<br>

Easy peasy.

How It Looks:

You see words here.


Now you see words here, with extra white space in between this line and the previous one! Of course this isn't a proper use case for the line break tag. It is, however, helpful when you're trying to add space between a main header and paragraph copy or between an image and text. 
tweet-this-code

11. Center Alignment

What It Is:

Let's say you're working on an email and want to center align an image or a body of text within the message.

Here's the tag you can use:

<center> Testimonial from Ben </center>

When it comes to right, left, bottom, and top alignment, the codes change from HTML 4 to 5. Your CMS or COS should help you make such adjustments easily.

How It Looks:

Once upon a time there was a marketer named Ben. Ben didn't know how to code. But after using simple resources like this, and then advancing to further courses through Codecademy, Ben was able to learn how to code.

Testimonial from Ben

"When I first started my customer marketing role, I had no background in coding. But I was able to pick it up."
tweet-this-code

12. Font Color

What It Is: 

Let's say you're putting together a web page showcasing HTML tags for marketers to learn the basics of code. In this case, it might help to have the specific HTML tags stand out in a different color. Here's the code you would use to change the font color to a different, basic web color:

<font color= "green"> This is text on your web page. </font>

How It Looks:

This is text on your web page. It's green like the Hulk.

Depending on your COS or CMS you may notice the code to the left change. If it does, it'll likely look like this:

<span color="green" style="color: green;"> This is text on your web page. </span>
tweet-this-code

SECTION THREE 
Additional Tags for Advanced Hacking

In this final section, we'll review more advanced HTML tags. These can be used to really finesse your web content. 

How to Customize Content with Any Color

What It Is: 

While the HTML tag for color we showed in the previous section allows you to use basic web colors, that may not be sufficient if you want to adjust colors to match your brand. 

First, you'll need to know the HEX code for your brand color. A HEX code is a six digit code that identifies a specific color on the web. You can use free browser extensions, like ColorZilla, to pick up any HEX code. That way, if you're not sure what your brand HEX code is, you can just use the tool to pick up the color. Then you just need to input that code into the tag below:

<font color= "#F667F1"> These are the words I want in a different color </font>

How It Looks:

These are the words I want in a different color. 

If you'd like to better understand how to grab the HEX color mentioned, here's a quick video showing how to do so with ColorZilla. 

Open Links in a New Window

What It Is:

When you're working on marketing content, you want your visitors, leads, and customers to consume the content. I mean, that's why you made it, right? To avoid pushing folks off your content when trying to weave in inbound links, use this tag to have your links automatically open in a new window:

<a href="URL goes here" target="_Blank"> the copy you want linked goes here </a>

How It Looks:

Now as you can see, if you clicked here, you'd be taken to the homepage of our Inbound Hub ... but in a new tab! 

Create Internal Page Links

What It Is:

At the beginning of this page, we provided a table of contents that allowed you to jump down to specific sections. That was possible through internal linking. This involves two steps:

First, you'll need to hyperlink the words you want linked with a hashtag and unique name. So if I was creating the internal link for section two under my table of contents, I can use the unique ID "#sectiontwo." You can see how I then linked this in HubSpot here:

internal-linking-1

Next, you need to go to the content you actually want the link to go to and add the following code to the beginning:

<a id="UNIQUE-NAME"></a>

The code for my example would then look like:

<a id="sectiontwo"></a>

You can see below that I went to the part of my page for section two and added this line of code right before the location I want linked to:

internal-linking-2

How It Looks:

If you followed the instructions to the left, you should be able to successfully create an internal link anywhere on your web page. If you click here, you'll be brought right back up to section two! 

The important part of this code is to simply create your own unique ID. It doesn't matter what this unique identifier is so long as it is the same in both the hyperlink and the string of code. 

In case you want a refresher on any of the codes we already covered, I used this internal linking code to create links to every HTML tag we talked about. Now you can see this code in action over and over again!

  1. Header

  2. Hyperlink

  3. Spacing

  4. Image

  5. List

  6. Horizontal Line

  7. Text Formatting

  8. Block Quote

  9. Social Share Link

  10. Line Break

  11. Center Alignment

  12. Font Color

HTML Hacks? Check.

The HTML tags presented here are the very basics of HTML. And many of them are no more than HTML hacks to help you make adjustments on the fly or when a web developer is not around. For example, to properly change the color of your content, you should be using CSS (the "clothing" of your content) not HTML (the "body" of your content). 

But as stated, these HTML hacks will help you make minor style changes. To advance your coding knowledge, we recommend enrolling in free Codecademy courses. 
hubspot-content-optimization-system
html-hubspot-code-academy
   

About

Learn Inbound

Software

Support

Jobs

Contact

HubSpot, Inc.
25 First Street, 2nd Floor
Cambridge, MA 02141
Call us: 1-888-HubSpot
(888-482-7768)
European Headquarters
2nd Floor, 30 North Wall Quay
Dublin 1, Ireland
Call us: +353 1 5187500