the hps HTML cheat sheet for digital marketers

So you’re managing digital projects but don’t know your <p> from your <span>? Do you ever need to just change something small but can’t wait for the geeks to sort it out for you? We know that feeling! That’s why we made this cheat sheet for ourselves and we thought we’d share it… Enjoy!


Be an HTML superheroHTML may look like gibberish at first, but once you know what you’re looking for you can focus on the section you need line by line, rather than getting frightened off by the messy, bigger picture!

The key rule is anything inside triangle brackets is <code>, and everything outside is >visible content<.

Every instruction or “tag” you open with <tag> has to be closed with </tag>. So if you start a bold tag <b> all of the text you continue to write will be in bold until you </b> close the tag!

So why does it look so complicated? Because the tags don’t run one by one; every section is nested within a bigger section, a bit like Russian dolls. So a link to your website <a> is in bold text <b>, sitting inside a paragraph of copy <p>, within the <body> section of the <html>!


<p>My paragraph of copy starts here and inside is <b> my bold text! With a <a href=http://www.mywebsite.co.uk>link in it!</a></b></p>

Will produce:

My paragraph of copy starts here and inside is my bold text with a link in it!

Here's our cheat sheet for you to share around your team ready for the next time you're trying to create an email and just can't remember how to format that bit of text! We've even got a handy downloadable PDF version for you to print off.




Martin Watts is Associate Director and Head of the Digital Team

Back to all blog articles

other reads

contact us

Here’s how to find us. Let us know you’re coming and we’ll pop the kettle on.

get in touch

For the latest & greatest in digital & insights, sign up here