Effective Digital Marketing

Commandment 5: Learn Code

June 7, 2015 Digital Marketing 0

Everything in technology is built using some sort of programming language or code. You also know that computers can only read binaries — 1’s and 0’s. If you want to talk to a machine, you have to speak its language. You don’t have to master programming languages, but you do have to learn code.

The internet is still growing. Others will argue it’s already at its maturity stage. But since this is my post, I say it’s still growing 😉 The reason for that are Web 2.0, IPV6, HTML 5, and many more. If you still don’t understand, start Googling them up.

Why Should You Learn Code

Ok, so you might be asking why should you learn code when you are a marketer, right?

Apart from not relying on programmers,  the answer is dead simple. Google’s algorithm is based on code. Learning the six HTML tags I’ll present below will help you in your quest for better SEO (search engine optimization) and placement on SERPs (search engine results pages).

HTML stands for hypertext markup language. I won’t go on defining what HTML is. There are a lot of articles explaining that. What this article focuses on are the things you have to learn to be an effective marketer.

And HTML is important because content on your website primarily uses HTML.

Again, there is no need to master it. The basic concept you have to understand when it comes to HTML is the concept of tags.

A tag is a pair of code that involves a start and an end tag.

6 Tags You Should Know by Heart

    1. Headers

      There are six standard header tags, namely H1, H2, H3, H4, H5, H6. They are ranked in order of importance (H1 as most important and H6 as least important). Most word processors have them built-in already. Here’s a screenshot in both my Pages app and WordPress.

      Example of Tags in Pages

      Header Tags in Pages App


      Example of Tags in WordPress

      Header Tags in WordPress

      What is the purpose of these headers?

      Their purpose in terms of SEO is to determine which topics are important. It is what Google indexes. Also, it simply looks great. It clearly shows the different sections of your post, making it easy to read.

      Never, ever, ever, change the font size to distinguish “headers” or sections. Use these built-in-tags. This is one of the most common mistakes people do. While it makes your content readable, it doesn’t help you out in SEO.

      Best practice of header tags: only one H1 tag per page. This post has one H1 tag, one H2 tag, and six H3 tags.

    2. Hyperlinks

      Hyperlinks in HTML is denoted by <a> </a> in code. It has elements inside it that make it work (e.g. href and target are the most used). You can learn more about these elsewhere. So when you want to link to a page within your site (internal link) or to another website (external link), you need to use the <a> tag.

      A best practice here is to mind your anchor text. It is the text that goes in between the <a> tags </a>. My previous post is about using data to drive your decisions. If you go look at the code of this, it will look something like this:

      <a href=”http://ariel-lim.com/commandment-4-stop-guessing/” target=”_blank”>using data to drive your decisions</a>

      The text “using data to drive your decisions” is the anchor text.

      There are still a lot of websites that use “click me” as your anchor text. While that is straight to the point, it does not provide value to the reader and search engines.

      When using an anchor text, it has to provide context as to what the page you are linking to. In the example I made, I referenced it to my post about stop guessing and use analytics to achieve your goals.

    3. Table

      The table tag is useful for presenting data. However, I have a more practical way of using this — arrange elements easier to create a good-looking layout. In my company’s marketing software, I use a table to place my signature block properly. Here’s how it looks like:

      ariel-lim-photo-964260-edited
      Ariel Lim
      Operations Officer
      Ookbee Philippines, Inc.

      And here is the raw code for it:

      <table> style=”height: 109px;” width=”291″>
      <tbody>
      </tr>
      </td>
      <img> src=”http://cdn2.hubspot.net/hub/428819/file-2238536523-jpg/buqo_team/Formal/ariel-lim-photo-964260-edited.jpg” alt=”ariel-lim-photo-964260-edited” width=”75″ style=”max-width: 93px; max-height: 424px; width: 75px;” title=”ariel-lim-photo-964260-edited”>
      </tr>
      </td>
      <strong><div>Ariel Lim </strong></div>
      <strong><div>Operations Officer</strong></div>
      <strong><div>Ookbee Philippines, Inc.</strong></div>
      </td>
      </tr>
      </tbody>
      </table>

      If you noticed, there are several elements inside the <table> tag. It introduces you to two other tags, particularly the <tr> and <td> tags. What the code does is simply arrange my signature block to include a photo and the three lines to the right (name, title, company).

      Again, this post is to teach you areas to apply them, not how to learn them. There are other places more qualified to teach you these things. So if you want to have a signature block in your email to look like that, simply copy the entire code, then change the image and the other contents.

    4. Paragraph

      The most basic tag in HTML, IMO. It is hidden between an opening and closing <p> tag. Use it to separate paragraphs instead and ensure proper spacing. Sometimes, when you hit enter to go to a new line, you end up moving down a single-line. So you hit another enter. The problem with this is that the code behind it doesn’t look great.

    5. Line Break

      This is similar to the paragraph tag, except this forces the text after it to move down one line. Unlike the other tags listed here, this one does not need a pair. All you need is one <br>. I usually do this when I need to bring down one line without spaces a group of text.

    6. Lists

      The list tag allows you to create numbered lists or bulleted lists. They are called ordered lists and unordered lists, respectively. Just like the <table> tag, the list tag introduces several other tags associated with it. For example, this post uses an ordered list. Here’s how it looks like:

      <ol>
      <li>Headers</li>
      <li>Hyperlinks</li>
      <li>Table </li>
      <li>Paragraph </li>
      <li>Line Break </li>
      <li>Lists </li>
      </ol>

As mentioned at the top of this post, you do not have to master any programming language. All you need to do is learn code — the basics and how they work.

Most content management systems (CMS) automatically takes care of these for you. However, there are times when you want to do something that the CMS cannot automatically do for you. So, dive in the code editor and fix it yourself.

 

Have something in mind?