Inbound Internet Marketing Blog

SEO, Blogging, Social Media, Landing Pages, Lead Generation and Analytics

SUBSCRIBE

The HubSpot Inbound Internet Marketing blog covers all of inbound marketing - SEO, blogging, social media, lead generation, email marketing, lead nurturing & management, and analytics. Join 53,183 others and subscribe now!

Subscribe to RSS feed Add us on Facebook! Follow us on Twitter

Get Free Marketing Info!

Get the world's best marketing resources right to your inbox! Join more than 817,000 inbound marketers!

Subscribe by email

Your email:

Listen to this blog!

Work at HubSpot!

JoinTheHubSpotTeam resized 200

HubSpot's Inbound Internet Marketing Blog

Current Articles | RSS Feed RSS Feed

Basic HTML Every Internet Marketer Should Know

 

.

HTML CodeProgrammer, developer, webmaster, techie ... none of these words describe me or most of the marketers I meet. But there is one skill I learned in college that has proven invaluable to me as a marketer -- basic HTML (Hyper Text Markup Language).

I've worked with hundreds of marketers and unfortunately, this is one skill many have yet to master. Basic HTML (and yes, I mean basic -- I'm not suggesting you learn the whole language) can significantly improve your success as an inbound marketer. You'll be more independent, and you won't need to call your webmaster every time you need to make a change on your website.

Hyperlinks

I hate seeing text-based links in blog posts, social media and forum threads. I don't want to copy and paste the text into a new tab, I just want it to open the link. Not every site enables auto-linking, so sometimes you have to do it the old-fashioned way. Here's how to create a hyperlink:

Hyperlink

Note: Just like everything that goes up must come down, every bracket you open must be closed.

Headings

If you've used Microsoft Word, you're probably familiar with the different styles, each varying in importance. Headings in HTML work the same way and can also be important for search engine optimization. An H1 is the most important, H2 slightly less, and so on.

Heading

Paragraphs and Spacing

Paragraphs have about a 1.5 line spacing before and after each block of text. If you don't want the extra spacing, use a break rule.

Paragraph

Images

We all love filling our blog posts and webpages with images, but they don't always fit perfectly in the allocated space. Some basic tags will help you resize images on the fly, although editing images prior to uploading them on your website is preferred so you don't stretch the proportions.

To start, don't upload large image files with a high resolution. Typically 50-150 KB or 150-600 pixels wide will do just fine for most websites. Two optimization tips here -- since search engines can't read images, you need to tell them what the image is -- use keyword-rich file names (inbound-marketing-tips.jpg vs. img01234.jpg) and alternative text (alt text) in case the image doesn't load properly.

Image Now, here's an advanced lesson to make the image a hyperlink:

Image Link

Lists

Finally, there are two basic kinds of lists, ordered and unordered. In other words, numbers or bullets.

Lists

Now go forth and conquer HTML!

This article is written by Erin Colbert, a member of our consultant team at HubSpot.  Check out Erin's Bio.

Photo credit: Marjan Krebelj

 

Free Download: 2010 Online Marketing Blueprint

Free Download: 2010 Online Marketing Blueprint

Posted by Erin Colbert on Thu, Feb 18, 2010 @ 01:30 PM

COMMENTS

What a great article! 
 
I've printed it out to keep on my cube wall for easy reference. 
 
As a marketer who knows very little about HTML, I might now save myself an embarassing trip down to the "smart people" in my office, The Developers!

posted on Thursday, February 18, 2010 at 1:50 PM by Brianne Caddel


One thing I would add which gives a lot of bang for the buck - when creating hyperlinks, within the triangle brackets that start a href add  
 
title="your text"  
 
This will be text which when you hover over the link will appear and guide users, it will also be used by search engines to optimize your page on search engine results. Good for SEO and Usability! 
 
Example: 
a href="blog.hubspot.com" title="Learn about Inbound Marketing">

posted on Thursday, February 18, 2010 at 1:57 PM by Charlie Kalech


I've found definition lists to be very helpful. We did a monster glossary on our site for EAM & CMMS. I recommend a definition lists (even if its only 1 item) when defining something. Google sure likes that trick.

posted on Thursday, February 18, 2010 at 2:04 PM by chris.kluis@mintek.com


"I hate seeing text-based links in blog posts" 
 
Err, I hate seeing graphic-based text in blog posts. Nice refresher otherwise.

posted on Thursday, February 18, 2010 at 2:15 PM by mark


If you want to be an expert inbound marketer you must have basic to intermediate HTML skills. Why? Because most SEO principles and techniques require you to understand how search engines crawl your web site code. So glad I took an HTML course in college, it's paying huge dividends for me. 
 
Mark K.

posted on Thursday, February 18, 2010 at 2:22 PM by Mark Kilens


'longdesc' is pretty important on images when it comes to accessibility and it can't hurt SEO either.  
 
Other things that are important: 
 
- Tables are for data- and nothing else.  
- Definition lists are a great way of tying together terms to data.  
- HTML (structure + content) and CSS (style) are two separate things and never should they mix.

posted on Thursday, February 18, 2010 at 3:24 PM by David Fisher


Coffee Cup software has a great HTML editor that is relatively inexpensive for those that find even the basics daunting. I have used it very successfully for email blasts on several email services.  
PS: I do not work for them, just like their software!

posted on Thursday, February 18, 2010 at 3:36 PM by Mikkel Moller


This is a great introduction to HTML and it has a lot of handy information. Thanks! I know I will probably be coming back to this page to re-look at some of these tips. I have always had this perception of HTML being ridiculously hard so I always turned away from it . Thanks again!

posted on Thursday, February 18, 2010 at 6:08 PM by Ralph Leon


Good post. It covers all I know and more importantly want to know in html. For any more I check out this site for schools: Basic html tags

posted on Friday, February 19, 2010 at 3:02 AM by Martyn Hodgson


Erin,  
 
Great post. I've been preaching this for a while.  
 
I'm curious to know why your examples are held in images? It doesn't allow the visitor to copy/paste your code.  
 
Thanks,  
Craig

posted on Friday, February 19, 2010 at 2:33 PM by Craig Rentmeester


Craig, I had to put them as images otherwise you would have just seen the end result and not the code behind it. But it should only take a few minutes for you to open Notepad or TextEditor and copy my examples in. Save a copy so next time you need it you can just open that doc and copy/paste from there. Thanks!

posted on Friday, February 19, 2010 at 2:36 PM by Erin Colbert


I have been meaning to write up something like this for a long time, as I am often telling it to my clients and friends. You have saved me the trouble. I have passed this along to many friends and also members of my New Media Interchange group. It will really help in making people a bit less afraid of HTML and let them make simple changes in the web sites and blogs without having to rely on others for every little thing.

posted on Tuesday, February 23, 2010 at 3:07 AM by Douglas E. Welch


Excellent resource for those who don't want to learn the whole language.  
 
I must say it does need one correction thought. Alt tags are meant to be used to actually "describe" the graphic, not to be stuffed with keywords. 
 
The purpose is to aid handicapped who use digital readers to surf the web understand what the graphic is about. 
 
In an effort to build an "accessible web" we need to promote the proper use of <alt> tags. 
 
I do believe one day keyword stuffing will be as socially unacceptable as parking in a handicap spot without a license.

posted on Thursday, February 25, 2010 at 6:46 AM by Kristal Kraft


Thank you so much for this post! I have it bookmarked, and I've used it several times already in setting up my Wordpress blog!

posted on Thursday, February 25, 2010 at 8:39 AM by Melanie Yarbrough


Comments have been closed for this article.