Easy HTML Tricks for the Non-Technical Marketer

What do you think are the most important skill sets a marketer should possess?

If I were to ask this question to many marketers, the ability to edit HTML (Hyper Text Markup Language) would rarely come up as one of them. I mean, why would it? That’s for the web guy, right?

I’m going to let you in on a little secret: knowing HTML is an extremely helpful skill that every internet marketer should know and can easily learn. This doesn’t mean you need to become a web developer; being comfortable with just the basics will make you invaluable.

Learning the fundamentals of HTML can free you from relying on your webmaster or a third-party program for simple updates, and it will enable you to update your website, email newsletters, or in some cases add links and graphics to forums and social media sites. And of course, it’s always a great skill to include on your resume!

HTML Basics

If you’re just learning HTML for the first time, I would highly recommend reading the article, "Basic HTML Every Internet Marketer Should Know." Then bookmark it or print it, and stick in right on your desk. It covers the basics of hyperlinks, images, lists, and some font properties. THIS article, however, is more of a Part II and will cover some additional tips and tricks to expand your skill set.

More HTML Tricks

Now that you have the essentials of HTML down pat, here are some more tricks you can easily use:

1. Aligning Images and Text Wrapping

By default, when you place an image on a page, any other elements around it (such as text) move down underneath it. Oftentimes, this might not look desirable. If you'd instead like to wrap text around an image, all you need is the align attribute.

Code Before (No Alignment):

Code After (Left Aligned):

Depending upon your layout, you can use the following options:

You can also add extra space around the image if you don’t want text to be too close. You can do this by adding vspace (vertical) and hspace (horizontal) to your image tag. The higher the number, the more space there will be around the image:

2. Changing Font Styles

Yes, a lot of website editors do come with a rich-text option to change the styles of your fonts. However, there have been many times I can recall still needing to know basic HTML font tags so that I could have more control over my font styles. Here are some easy ones to use:

A. Bold Text

Code:

Output:

This is bold text

B. Underlined Text

Code:

Output:

This text is underlined

C. Italicized Text

Code:

Output:

This text is italicized

D. Font Size

Code:

Output:

This font is size 2

E. Font Color

Font colors can use written colors or HEX codes. Click here for a HEX color generator.

Code:

Output:
This font is red

F. Font Type

Change the type of the font.

Code:

Output:

This font is Verdana
This font is Trebuchet MS

The following are considered web-safe fonts:

Arial, Arial Black, Comic Sans MS, Courier, Courier New, Georgia, Helvetica, Impact, Palatino, Times New Roman, Trebuchet MS, Verdana

G. Combine Multiple Properties

Here is a way you can combine multiple elements in your content:

Code:

Output:

This font is Comis Sans MS, Size 2, Bold, Underlined and is the color Green

3. Blockquotes

Blockquotes are great way to pull a quote out of a paragraph and make it an indentation. Here is an example (Note: you will need CSS to style the actual quote, which we'll cover in a later lesson!):

Code:

Output:

"If you wait until there is another case study in your industry, you will be too late." – Seth Godin

4. Horizontal Lines

This tag will draw a line horizontally across your page or a section of the page, depending upon where you put it. All you need is the <hr> tag, which stands for ‘horizontal rule.’

Code:

Output:

You can also control the length (width) of the line and thickness (size).

Code:

Output:

To make the line solid, use the attribute noshade:

Code:

Output:

5. BONUS: Comments Tag

I love this trick and use it a lot. Sometimes, you need to make notes in your markup but don’t want them to show publically on the page. I also use this to save HTML in a page that I don’t necessarily want to delete, but I don’t want it show on the page either. This way, if I ever need the code, it’s still there, hidden in the background.

All you need to do is put the notes or HTML you want to hide by surrounding it with the start comments tag <!-- and the end comments tag -->

Code:

Example:

Hopefully this guide gives you a good baseline for extra HTML tricks. Once you start using these, you’ll be well on your way to becoming an HTML guru!

What else would you like to learn? Do you have any tricks of your own? If so, please share!

Photo Credit: Marjan Krebelj

Free eBook: 7 Google Tools to Improve Your Marketing Effectiveness

Google is not only a search engine. It also owns a range of assets that provide marketers with social networking and content creation opportunities.

Download the free eBook to find out about some of Google's lesser known tools and learn how to use them for marketing your business.

Comments

Posted by Jessica Meher on Wed, Jul 13, 2011 @ 08:00 AM