Basic HTML Skills Every PR Professional Should Have

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.

The Links

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.

The Images

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.

Advertisements

17 comments on “Basic HTML Skills Every PR Professional Should Have

  1. Thanks for the very helpful and easy-to-understand tips on basic HTML, Dan and Brian! I think my brain hurts from just reading about these “baby steps” but you make a good point that all communications folks should have some familiarity with them.

    • You are very welcome! We know it’s confusing taking those first steps into the programming world. But once you have even the most rudimentary knowledge, you can do some cool things to help optimize those PR tactics in the digital world.

  2. This is a great intro the most widely used HTML tags. I learned a lot of HTML while in junior high and high school and it’s been invaluable in my professional ‘toolkit.’ When something is not working correctly (table one a website, e-mail formatting issue, broken links). I’m one of the first people consulted. It’s been a great way for me to stand out from my colleagues.

      • Most people in my organization use our content management system’s built-in content editor. It has tools for table creation, fonts, alignment and everything else. Often, the editor might not do what the person intended (ex: A table stretching way too long or there are spacing problems) and the person has no idea how to fix it. I always get called over to go into the HTML code and pin-point the problem. A lot of little issues like this come up every week. I’m more than happy to help and it’s been a great way to show additional value I bring my organization.

  3. This is a nice how-to, and I agree, everyone should know the basics because that web developer can and will get sick on deadline day eventually 🙂

    For the Other Codes section, I would just caution that you need to ‘close’ the command. So if you wanted something bolded and use the tag, just make sure you use following the word or string of words you want bolded or you will end up with the whole document from that word on being bolded.

    As the blog mentioned, I just looked up how-to’s online when I got stuck but it also helped me to use tools like Dreamweaver that have the web page on one side and the html on the other. So as I type things, change font colors, bold, etc., the code is created for me. Helps me save time but also is like a lesson.

    • Another great text editor tool for coding is BBEdit (Bare Bones Software)http://www.barebones.com/

      It has many of the same benefits as Dreamweaver for individuals who are just starting out. Most beneficial is that it doesn’t leave “junk code” behind during the learning process. It is currently only available for the Mac OS.

  4. Thanks so much for such a helpful article. HTML coding is definitely a weak spot for me, and I typically give up on deciphering all the “technical jargon” before I have even given HTML coding an honest effort. Now that I understand the benefits of linking and and properly utilizing these tools, I know I will just have to suck it up and tackle this challenge. Thanks for giving me an easy-to-understand jump start on my new goal!

    • No problem. Dan and I appreciate the comment. I know at first it seems like your learning a second language. But when you get fluent in it, that’s where the fun starts.

  5. Appreciate the post. Wondering, though, how HTML coding translates to Facebook with since they use FBML. Should we still use the Static FBML app to create a landing tab? Is there an alternative?

    One utility I find really useful is http://www.image-maps.com/ which allows you to easily map images for a landing tab on Facebook. Pretty elegant solution for us non-coders out there.

  6. Pingback: A Little Birdy Told Me…Week of 5/16/11 « PR in Pink

  7. Pingback: HTML10 « ~ArchytheOne ~

  8. Pingback: Yes, SEO Can Be Disgusting. But More So When It’s Ignored. « PR at Sunrise

  9. I am just on my second month learning programming code. I learned from w3schools.com and was able to build a website on zymic via Foxzilla FTP within a week using a mixture of html and CSS. Obviously, the site needs to be updated, but check out what you can do without a template in only a week. http://abes.99k.org/ . I only share this because If you too are learning code, maybe we can share information about resources. I lists of them.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s