HTML Guide for Marketers

html guide for marketers

The skills that marketers need to accomplish their basic day to day tasks have been expanding rapidly in the digital age.

Among the more recent additions are basic skills in HTML and CSS, which enable marketers to make changes to their websites, format emails, and fiddle with social media on their own without developer intervention.

For those who may have trouble remembering HTML essentials, or just need to brush up their skills, keep this primer handy for reference.

Header Tags: h1, h2, h3 etc.

These extremely common tags serve two separate, but often related purposes:

  1. They change the format of text so that it stands out.
  2. Google uses them to identify important information within web pages.

Changing Text Formatting with Header Tags

Formatting changes help guide readers toward important information, so that they can quickly scan a digital document and decide whether or not it’s relevant to them.

This is vital to pieces of online content (like the one you’re reading now), because visitors don’t take the time to read an entire web page.

Instead they rapidly move their eyes down the page, looking for content that answers their particular question.

Header tags make things like a title, which is usually setup as an h1, and sub-headers, generally h2 or h3, stand out.

If your page is structured well, a heat map would show this type of eye movement:

layer cake scanning pattern

Known as the layer cake pattern, this behavior shows a good level of engagement with a web page, and it’s made possible by h2 tags.

The exact way that an h2 looks on any particular page will depend on the CSS that governs it. CSS is separate code that implements style rules on top of your HTML, so that you can change the appearance of all your headers with a single line of code instead of changing each separate header one by one.

On this page, for example, our h2s look like this:

I’m an h2 tag

On Hubspot, their h2s look like this:

hubspot h2

 

 

Generally, you should keep your use of headers strictly hierarchical, for ease of consumption by both human readers and search engines.

This means that you don’t use an h2 until you’ve used an h1, and that h3s should be true sub-headers under an h2. In this section, for example, the main section title, “Header Tags: h1, h2, h3 etc.” is an h2, while the sub-section, “Changing Text Formatting with Header Tags” is an h3.

Keep in mind that header tags also work for formatting emails and other online text, but the guidelines about hierarchy are not so stringent in these shorter formats.

Affecting Page Rank With Header Tags

When Google is crawling a web page, it needs a quick and straightforward way to determine which parts are the most important. It relies heavily on header tags to figure this out.

That means that when Google’s bots see an h1 tag, they identify the words inside that tag as highly important for that page. Any keywords that you’re targeting for a page should appear inside your h1 tag whenever possible.

The same goes for h2 and h3 tags, but since they are sub-headings they won’t be given the same weight as the words inside your h1.

How to Write Header Tags

Like nearly all tags, you need an opening and closing tag to make headers work properly.

An h1 will look like this in HTML:

h1 tag

 

Other headers work the same way; you simply change the number to adjust the weight of the tag:

h2 tag

 

Many WYSIWYG text editing programs like WordPress have two views: a visual view and a text view. The text view will allow you to manually enter HTML that will impact how the text is displayed, while a visual view shows you how the page will look when it’s live.

Make sure you’re adding HTML to a text view; it typically doesn’t work in the regular WYSIWYG editor.

Creating Hyperlinks on Text and Images

Oftentimes we need to send readers from one online page to another, which means we need to create a link or hyperlink.

This isn’t terribly difficult, but as with other HTML you need to set it up just right for it to work.

Basically a link is set up like this:

link html

 

This HTML will output clickable text that looks like this: Text that you want someone to click on, and when someone clicks it they will jump to a different website or page.

When you want someone to click on an image in order to go to a new page, the HTML changes slightly. To be safe, make sure you’re using an image that you have control over, e.g. the logo on your own website or your profile picture on a social media site.

You don’t want to rely on an externally-hosted image as your link in case someone removes that image.

HTML for an image link looks like this:

image html

 

 

And it would turn the basic image into a clickable one.

This HTML doesn’t actually change the image’s appearance, just its behavior.

Adding Paragraph and Line Breaks

These types of HTML allow you to gain some control over how text appears online. A paragraph break puts a full empty row after it, as you see between blocks of text on this page.

html for paragraph break

 

 

To set this up, you start a block of text with the simple tag <p>. When you’re ready to end one block and start another, you put a </p> at the end of the last line in the paragraph.

So the paragraph in the example above looks like this in HTML:

paragraph html

 

A line break, however, just starts your next piece of text on the same line.

line break html

 

 

 

The line break is one of the rare pieces of HTML that doesn’t require an opening and closing tag. It looks like this:

line break html

 

 

Creating and Formatting Lists

There are two kinds of lists that we need most often: numbered lists and bulleted lists. They’re both set up in much the same way, it’s just the output that varies slightly.

Numbered Lists in HTML

These are simply lists with a number before each item. Their final output looks like this:

  1. Check email
  2. Get coffee
  3. Meet with manager
  4. Take a walk

To create this list with HTML you simply need to identify the start and end of the list with opening and closing tags, and then set up each list item. Because this is a numbered list, it’s going in a particular order. Therefore we use the <ol> tag, with “ol” standing for “ordered list.” It looks like this:

list html

 

 

 

 

Unordered Lists in HTML

When you don’t care about the order of the items in your list, you can use the <ul> tag, in which “ul” stands for “unordered list.” Aside from the different opening and closing tags, the HTML is identical:

unordered list html

 

 

 

 

The output is very similar as well:

  • Check email
  • Get coffee
  • Meet with manager
  • Take a walk

Setting up Simple Tables

Tables are a good way to structure longer lists or other content that you need to have in a more predictable layout, and by using HTML to create them you can maintain a much higher level of control than by using just text.

Tables generally have three components: rows, columns, and cells.

Most basic table arrangement can be accomplished by controlling rows and cells, so we’ll focus on those two and leave columns for another time.

The tags you’ll need are:

  • <table> </table>: Identifies the start and end of the table; all other table HTML lives in between these two tags.
  • <tr> </tr>: Identifies the start and end of a table row. Table cells live inside the row tags.
  • <td> </td>: These identify individual table cells, and you’ll put your text or numbers inside the cell tags.
Check email Get coffee Meet with manager Take a walk

This table is very basic, and its HTML looks like this:

table html

 

 

 

 

 

There are a lot of different ways to format your entire table, or just a single row or cell. For a comprehensive guide to the various ways to style your HTML table, check out the W3C School.

Where to Practice Basic HTML Skills

If you want to play around with table formatting or any of the other basic HTML that we’ve covered, the W3C schools offer a great editor where you can make changes to code and see the output right away.

This is extremely useful wen you want to see what’s going to happen if you make a change but aren’t confident enough to try it in your own code.

Keep trying new things and take every opportunity you can to use HTML. This will ensure that you’re constantly improving your skills and that you won’t forget the basic tags that you need to save time on nearly every digital marketing project out there.

Looking for a more in-depth guide to teaching yourself HTML? Check out the HTML Tutorial from Udemy — it’s a great resource for most skill levels.

Other Articles You Might Be Interested In:


get the agile marketing styles ebook

Andrea Fryrear
About the Author:

Andrea Fryrear

Andrea loves to dissect marketing buzzwords and fads looking for the pearls of wisdom at their cores. Her favorite topic is agile marketing, which she believes holds the key to a more fulfilling (and less stressful) marketing career for individuals and a more powerful marketing department for business. When not scrutinizing the latest agile methodologies, Andrea can be found on the volleyball court, at the park with her two delightful kids, or baking “calorie-free” cookies. Connect with her on Twitter @AndreaFryrear, or on LinkedIn.




Leave a Comment