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:
- They change the format of text so that it stands out.
- 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:
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:
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:
Other headers work the same way; you simply change the number to adjust the weight of the 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:
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:
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.
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:
A line break, however, just starts your next piece of text on the same line.
The line break is one of the rare pieces of HTML that doesn’t require an opening and closing tag. It looks like this:
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:
- Check email
- Get coffee
- Meet with manager
- 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:
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:
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:
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.