As a marketer, you’ve probably come across your fair share of software that requires some basic HTML coding. I’ve found myself using HTML with marketing tools like Mailchimp, WordPress, Offerpop, and Unbounce, and during these times Google is my best friend as I search for the various HTML codes I need. Instead of scouring Google, this post will serve as a friendly guide you can refer to for most (hopefully all) the basic HTML code you’ll need to know. This list is a compilation of codes my colleagues and I most frequently use, but let me know in the comments if I’ve missed anything and I’ll add it to the post — this is a good piece to bookmark for future reference!

HTML Styling

Remember that correct HTML coding requires an open tag < > and a close tag </> to wrap the text. For example, if I want to bold the phrase ‘Uberflip loves content marketing’ using HTML, I need to open the phrase with an ‘open tag’ and also end the phrase with a ‘close tag’. It would look like this:

<b>Uberflip loves content marketing</b>

Let’s go through some of the most popular HTML styling codes:

Bold: <b> </b>

Italics: <i> </i>

Underline: <u> </u>

Paragraph: <p> </p>

Headings: <h1> </h1> – <h2> </h2> – <h3></h3>

Bullet points: While bullets look a little more complicated, there are really only two components involved: the <ul> tag denotes that an ‘unordered list’ of text will follow and the <li> tag organizes the list into bullets. Bullets are useful for:

Numbered points: Numbered points follow a similar pattern to bullet points, except the tag opens and closes with <ol> and </ol> for ‘ordered list’. Numbered lists are great for:

HTML Formatting

Line break: <br>

Hyperlinks: <a href=“url”>Link text</a>

The ability to hyperlink text is an extremely useful feature that allows your text to remain clean and simple (no clunky and long URL links). If I want to link the phrase ‘Uberflip blog’ to the URL, it would look like this:

Images: <img src=“url” alt=“some_text”>

Creating visual content is extremely important in content marketing but sometimes adding images isn’t as easy as simply uploading a file. In these instances, use this HTML tag to embed any image URL into your piece. For example, if you wanted to insert the following image, the code would look like this:

Bookmark this page for future reference and let us know in the comments which HTML tags you use the most! Are there any other you think should be included?

About the Author

After graduating from the HBA program at the Richard Ivey School of Business, Aaliyah launched her career as Marketing Coordinator at Uberflip! Prior to her HBA, Aaliyah also completed a Bachelor in English at Western University.

Follow on Google Plus   Follow on Twitter