Four HTML Tags Every Digital Marketer Must Know

Ian Lurie Sep 12 2016

Earlier this year I wrote that any digital marketer must know how to write a blog post in HTML.

I caught a little flak for that. I earned it. I should’ve been clearer: There are four HTML elements every digital marketer should know. If you know them, you can write a post using the code view of whatever CMS you use.

Here they are:

1: Paragraphs

Paragraphs are easy:

<p> starts a paragraph.

</p> ends one.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Becomes

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

That’s it.

2: Headings

A “real” heading formats correctly, creates the right structure for browsers to work with, and (arguably) helps with SEO. It’s also one of the easiest bits of HTML to learn:

<h1>[your text here]</h1> creates a level one heading.

<h2>[your text here]</h2> creates a level two heading.

And so on.

3: Lists

These get a little more complicated. Lists actually use three different tags: OL, UL and LI.

This is a numbered (ordered) list:

<ol>
 <li>First item</li>
 <li>Second item</li>
</ol>

This is a bulleted list:

<ul>
 <li>First item</li>
 <li>Second item</li>
</ul>

Most content management systems have shortcuts to insert the code for a list:

A bulleted list, in HTML

A bulleted list, in HTML

WordPress is particularly good at this. As you click, it provides the closing tag:

Wordpress closes list tags for you

Wordpress closes list tags for you

That’s lists.

On the web, links are kinda the point. You need to know how to make them. In WordPress, click the “link” button and fill in the fields. But they’re pretty simple, and knowing how to create one from scratch always helps:

<a href=“http://capybarakingdom.com”>Capybara Kingdom<a>

will create

Capybara Kingdom

Done.

Lexicon

Knowing a little of the lingo doesn’t hurt, either. You may sometimes hear about “tags” and “elements” and “attributes” and other randomness.

A tag describes the code used for a heading, a list, a link or whatever else. For example, an “h1” tag.

An opening and closing tag, with content, is called an “element.” This entire bit of code is an element:

<h1>Stuff</h1>

An “attribute” is a bit of extra information added to a tag, like this:

<a href="http://capybarakingdom.com">Capybara Kingdom<a>

In that anchor element, the href is an attribute telling the browser where to go if I click the link. In this case, the href attribute is ‘http://capybarakingdom.com.’

Responsive Design

I also said that, ideally, any digital marketer should be able to code and launch a responsive web page. I’m sticking to that. It’s a high bar because what we do is hard. But it’s easier than it sounds. You can download one of a kajillion frameworks and get the job done with very little coding. I like Bootstrap and Foundation. Base and Skeleton are good if you want simplicity.

Stay Sane

Don’t go nuts. Learn what you have to. Understand the basic HTML ingredients. After that, you make the call. I’ve found that once you learn the basic four, the rest starts to make sense.

Pssst: You can skip all of this if you learn to use Markdown.

Additional discussion via comments appreciated.