With the digitalization of PR, online communication is paramount. On occasion, this will require a bit more skill than the typical use of a keyboard and mouse. In this new world order, where the cloud is a Mecca for its digital denizens, basic coding skills can and do go a long way in equipping your client.
It can have a subtle origin. Perhaps a client asks for an email to be sent out with a hyperlink embedded in the text. Then maybe you need to do some tweaking to an e-newsletter or embed a video within a pitch. You become immersed within a new language of ‘hrefs’, ‘divs’ and ‘p-aligns’. And if you want to continue moving onwards into digital communication, it’s a good idea to take the baby steps first – and by baby steps, we mean HTML.
Here are just a few of the applications of HTML in everyday public relations:
- Creating a unique landing page for a Facebook profile
- Drafting and editing e-newsletters
- Writing guest or corporate blogs
- Tailoring a press release to be web-friendly
- Embedding multimedia items into pitches, emails and other written content
- Reworking a webpage with new messaging
There are plenty of PR professionals who have never seen a stretch of computer code in their life. And there are A LOT of resources that exist out there to quickly bring them up to speed on basic HTML. Some take a class, some buy a DIY book and yet others tap into the most widely available resource, the internet. There is not a single string of HTML code that you cannot find somewhere in the vestiges of an old tech forum or the website of an avid computer coder. Some of our personal favorites are w3schools.com, WebDevelopersNotes.com and Web Design at About.com, to name a few.
Even online forums can be daunting and the amount and variety of HTML codes can be overwhelming to a novice. So with the PR professional in mind, we’ve whipped together reference for a few essential strings of codes that in a digital world.
Let’s start with the baby steps to the baby steps. Say you want to make the phrase “AMAZING NEW CLIENT PRODUCT” direct people specifically to the product page of one of your clients. In order to create a link to your webpage, you need to start with what’s called an <a> tag, coupled with an <href> tag. The <a> tag is the anchor that lets the internet know that you are creating a link. And the <href> tag points you to the exact location of your link. And after you make the <a href> tag, you need to end it with an </a>. The slash denotes that you are finished with the string coding.
It ends up looking like this <a href=”http://example.com/ “>AMAZING NEW CLIENT PRODUCT</a>. Study that code for a few seconds. Notice how the phrase we want to include the link from is outside the <>, while all codes are inside <>. It’s a simple principle. If you see a <, then there better be HTML code in there. And once you see a >, then you should write the usual text you want to appear on whatever material you’re writing.
People are visual beings. And as the web becomes more and more stylistic, it’s worth knowing how to include the most basic images. You need two things in order to use an image in HTML coding. First, you need an html link directly to the image (meaning this image needs to exist somewhere online, whether on a website or a backup server). Second, you need an <img scr> tag. The <img> command makes it evident that you want an image to go here, while the <scr> tag dictates the web address you’re pulling the image from. So the code ends up looking like this <img src=”http://example.com/picture.jpg” />. Notice the slash at the end of the code closes it, just as the </a> closed the linking code.
The Linked Images
Now what happened if we combined the two pieces of code you just learned? You would get an image that links to a web address. It’s an incredibly useful tool with limitless possibilities. In fact, this seems to have become the staple for many unique Facebook pages, which create a hodgepodge of linking and non-linking images, fitted together like pieces of a puzzle. When you want to link an image, you can simply combine your <a href> and <img scr> tags, putting the image code within the link code. So the full html code would look like this <a href=”http://example.com/ “><img src=”http://example.com/picture.jpg” /></a>. Notice how we put the image code in the same position we put the plain text in the regular link code. And just like that, your image with now link to a web address.
The Other Codes
There are hundreds of other tags in HTML. We’re not going to go through each one, but below is a list of the essential ones to know. Just remember that in order to effectively use each of these tags, you need to have both in an opening <example> and closing </example> tag around whatever you want to change.
|Code||What it Does|
|<em>||Formats words as italicized|
|<strong>||Formats words as bolded|
|<u>||Formats words as underlined|
|<p align=left>||Align text to the left|
|<p align=center>||Align text to the center|
|<h1>, <h2>, <h3>, <h4>, etc.||Toggles the size of the font within the code (h1 being the largest font size)|
|<br>||Identifies a line break. *Note: this does not require a closing </br> in order to work|
|<div>||Segments information by defining all content within this code as a block|
About the Authors
Brian Perry is an account executive at Ruder Finn, providing digital strategy, visual branding, graphic design and website redesigns to clients. Follow him on Twitter via @Brianful.
Dan Baker joined Ruder Finn in May 2010 as an account executive to service consumer and technology accounts. He serves clients by strategically indentifying media opportunities and implementing integrated campaigns to further brand development. Follow him on Twitter via @daniel_c_baker.
- SEO for PR Dummies
- When Personal and Professional Branding Clash, Everybody Loses (worob.com)
- Top 10 Quotes from Top Chef That Have Hidden PR Meanings (worob.com)