This Is The HTML Cheat Sheet & Tutorial Every Content Marketer Needs

HTML Cheat Sheet for Content Marketers post header In today's economy, you've probably heard something about the importance of developing coding skills. However, not all bloggers or content marketers are familiar with HTML. Even among those of us who know a little bit of code, there's always more we can learn. In your job, you probably don't need to know how to build an entire site from the ground up with nothing more than a text editor and your wits. However, if any part of your job involves working in WordPress or another content management system, knowing a little bit of code can be immensely helpful.

Are you a #blogger or #marketer looking to learn useful HTML?

Click To Tweet
Here are a few reasons why:
  • Understanding HTML can help you learn how your blog or website is structured.
  • Knowing even a little bit of code can help you become more self-sufficient (and it may help you save time asking for help).
  • You'll be able to fix stubborn WordPress formatting issues more easily and with less yelling at your computer.
In this post, we'll cover the most essential basics for blogging-focused readers. If you've never worked with HTML before, this will be a perfectly paced primer to get you started.

Learn #HTML basics to improve your #blog formatting skills. #blogging

Click To Tweet
If you have a bit of experience with web coding, you'll still likely pick up a new tip or two (plus, be sure to download the free HTML cheat sheet to use for future reference). If you're a marketer or blogger working with WordPress, and you're intimidated by the mass of "who-knows-what" you see when you click into the Text editor in your CMS, this post is for you. While you can accomplish most of the tasks outlined in this post using the standard WYSIWYG (What You See Is What You Get) WordPress editing controls, knowing how to do things the old-fashioned way is still beneficial (especially when things go wrong and those editing controls seem powerless to help). Wordpress WYSIWYG editing bars The standard Wordpress kitchen sink offers a lot of power. It isn't always perfect, however, and sometimes it's faster to edit your content's formatting manually. That's where some basic HTML knowledge comes in handy.

What Is HTML?

HTML stands for Hyper Text Markup Language. It forms the structure of a website and has been the backbone of the Internet since the dawn of time (or at least the dawn of the modern Internet). HTML is used in conjunction with CSS (Cascading Style Sheets), which is used to control the appearance of a website. For the purposes of this post, we'll focus just on HTML, and only on a small handful of tags any beginner can put to use. This video provides a simple overview of how HTML documents are created (watch this before you proceed):

It's okay if that seemed like a lot to wrap your head around. We'll walk through much of the information here in a bit.
Pro Tip: You can view a website's source code in most browsers. This can be useful for seeing how websites are built by observing the code itself. Here's how to do this using several popular web browsers:
  • Google Chrome: Right-click and select View Page Source.
  • Firefox: Right-click and select View Page Source
  • Safari: Open Preferences, select Advanced, and click "Show Develop Menu In Menu Bar" at the bottom. Then, go to the Develop menu and select Show Page Source.
  • Internet Explorer: Right-click and select View Source, or press the F12 key on your keyboard.
  • Microsoft Edge: Right-click and select View Source, or press the F12 key on your keyboard.
Google home page with source code in Safari Here is an example of Google's home page with the Show Page Source option selected in Safari on Mac OS X.

Why Do Bloggers And Content Marketers Need To Know HTML?

Why Marketers & Bloggers Need To Learn HTML header If you've ever tried to edit content in WordPress, then you know the formatting functions fail to work the way you want them to sometimes. That's because WYSIWYG editors don't always work as well as intended. For example, a bulleted list may appear with extra spaces. Your text might not copy and paste correctly. You might want to change the color of your blog theme, but you might not know how.

Content marketers should know basic #HTML. Get started here:

Click To Tweet
These are just a few issues you're likely to run into. However, if you know a little HTML, they're issues you can fix. You'll become a more capable marketer and a more valuable employee.

What Are Some Things I Can Do With HTML?

In general, you'll gain more control over your content's structure and appearance. Here are some specific tasks bloggers and marketers can tackle with HTML:
  • Create and edit text links.
  • Control paragraph structure.
  • Fix broken lists.
  • Build tables.
  • Remove unwanted spacing.
These are just a handful of helpful things you're about to learn how to do. If you've never touched the Text view section of your WordPress posts, you'll probably feel a bit more confident in your skills too.
Words Of Encouragement: Learning HTML isn't as difficult as it may sound. As a blogger or marketer, you don't necessarily need to know how to build an entire website from scratch. By the time you reach the end of this post, you'll likely learn as much as you'll need to know.

Why Do I Need An HTML Cheat Sheet?

If you haven't yet, we highly recommend downloading the HTML cheat sheet that accompanies this post. It's useful for you to have on hand so that all the common HTML tags are readily accessible.

Learning #HTML? Use this #cheatsheet!

Click To Tweet

How To Write HTML With Text Files And A Browser

Ready to write and edit some HTML yourself? You could get started now using the Text editor in any WordPress post. However, you can also use Notepad (Windows), TextEdit (Mac), or Sublime Text (Mac, Windows, Linux) and your web browser of choice.
Pro Tip: If you've never heard of Sublime Text, it's an extremely useful plain text editor that offers more features than Notepad or TextEdit. It's especially handy for writing HTML because it automatically color-codes different portions of your coding, making things a bit easier to read. If you'd like to try it out, download it here.
Follow these steps to create a simple HTML file: 1) Create a blank file .txt file. Write your HTML. Then, save your document as an HTML file. Here is an example of a quick HTML file we created: Example of a text link in HTML2) Click File in your top navigation bar. Then, scroll down to Open File: Location of Open File option in Chrome 3) Select your HTML file and click Open. It'll look something like this: Opened HTML file in web browser
Pro Tip: Remember your .txt document needs to be saved as a .html file.

Basic HTML Tutorials For Beginners

HTML Tutorial for Beginners section header Now that you have some understanding of what HTML is and how it works (and you've downloaded the HTML cheat sheet, right?), let's get started on some basic HTML tutorials.

How To Format Text Using HTML

Let's start with some basic text formatting.

How To Create Headings

HTML uses six different levels of section headings. They are structured like this: How to create headers in HTML Here's what they look like on the CoSchedule blog: Examples of HTML headers
A few things to note about header tags:
  • It's generally considered best practices to include only one H1 tag (this is important for SEO). Generally, WordPress themes use H1 tags for blog post headlines. Keep this in mind when formatting headings.
  • You'll likely use multiple H2, H3, etc. tags per post.
  • It's okay if you use heading tags "out of order" (ex: your H2 is lower on the page than an H3). Here's a useful explanation about heading tags from Matt Cutts:

How To Make Text Bold

If you'd like to make text bold, use this tag:
Strong: <strong>Insert Text</strong>
In the past, you may have seen bolded text created using the <b>Insert Bolded Text</b> tag. While the <b></b> tag still works, it's considered outdated. For this post, we'll stick with best practices and recommend the <strong></strong> tag instead.

How To Make Text Italicized

Similar to making text bold, there are two different tags you can use to create italics. The emphasis tag is the best one to use:
Emphasis: <em>Insert Text</em>
You may have seen italicized text using the <i>Insert Text</i> tag, but once again, this tag is considered outdated.

How To Create A Paragraph

To create a text paragraph, use <p>Insert Text</p>. Here's an example: Paragraph HTML example

How To Create A Line Break

If you'd like to force a space between two lines of content, consider using a page break. Simply add the <br> tag between lines of content, like this: Example of a line break We don't actually think we're geniuses, and I'm certainly no Shakespeare. We just wanted to make sure you were still paying attention.

How To Create A Block Quote

If you have a quote that's a few lines long (or more), it should be formatted in a block quote. You could do this in WordPress by clicking here: Block Quote button location Or, you can wrap your text using this tag: <blockquote>Insert Text</blockquote>. How to make a block quote in HTML Here's how block quotes appear on our blog: How block quotes appear on the CoSchedule blog

How To Create And Edit Links Using HTML

You're probably thinking, "WordPress makes it easy to create links, doesn't it?" However, there is still value in knowing how to manually create links. Plus, there are some things WordPress can't do when it comes to links, that need to be performed manually. Let's go over how links are built in HTML, how to link between different sections of an individual post (this is a handy way to build a table of contents), and how to add no-follow attributes (which are potentially powerful for SEO).

How To Manually Build An A Href

To create a text link, you'll need to use the "href" tag. It looks like this:

Href HTML Example

Place your desired URL (this will be the page you link to) and anchor text (the linked text a reader will click) where noted.
Pro Tip: Internal links (links that direct to other pages or posts on your site) and external links (links that direct to other sites) are created the same way.
Here's an example:

Example a link in HTML

Here's what the end result looks like: Text Link Example

How To Manually Edit Link Anchor Text

Let's say we want to change the anchor text in the example link shown above. In this case, simply open the Text view option in WordPress. Then, delete the existing anchor text, and rewrite it: Example of edited anchor text That's all it takes.
Pro Tip: You've now heard us mention anchor text a few times. If you're unfamiliar with what this is referring to, it's simply the clickable text used to create a link.

How To Add A No-Follow Attribute To A Link

If you know a little bit about search engine optimization, then you likely understand follow versus no-follow links. In short, search engines use links to determine the importance of web pages. When a site links to another site, they see this as a vote or an endorsement saying, "This content is useful, and related to the web page linking to it."
However, there may be times you don't a link to pass authority to another website. Here are a few examples:
  • You're linking to a page that isn't reputable (but may be related to your blog post).
  • You're writing a sponsored post (buying or selling links is SPAM, and search engines may consider sponsored content links to be paid for).
  • You're writing a guest blog post or hosting a guest post on your own blog. It's important that links in author bio boxes in guest posts be labelled no-follow, because these were once commonly abused for SEO benefits.
The more high-quality website links that you have, the more likely you are to rank in search engines. However, because of this, there are people out there who try to spam search engines with manipulative linking practices (including buying links and writing junk blog posts just to get backlinks without regard for content quality). For more information straight from Google on why you should use no-follow links for guest blog posts specifically, watch this video from Matt Cutts, former head of Google's web spam team:

To add a no-follow attribute to a text link, add the code rel="nofollow" to your href HTML: Where to add the no-follow tag in a link It's as simple as that.

How To Deep Link To A Specific Blog Post Section

Now you know how to add a link to another web page or website. However, how do you link to another section within a single blog post?
Follow these steps:
  1. Switch to the Text view tab in WordPress, and add this tag: <a name="NAME"></a>.
  2. Delete the NAME placeholder text and write your desired anchor text.
  3. Add <a href="#NAME"></a> to the location you would like linked.
Here is what this code looks like in WordPress (we've used Lorem Ipsum filler text, just for demonstration purposes): Example of deep link HTML Here's what the end result looks like: Example of an on-page deep link Now, we can navigate from the top of the page to the next section in one click. However, there is one problem: we can't get back to the top as easily. Fortunately, there is an easy solution. We'll add a "Back to Top" link underneath the "Here's Something About Lorem Ipsum" section. We will also add a destination anchor at the top of the page with no anchor text (this way, the link will direct to the top of the page, but no unwanted text will appear to readers). Link back to the top of the page Here's how the Back To The Top link appears: Back to the Top deep link Since we did not specify anchor text for this link destination, nothing appears to the reader. However, clicking "Back To The Top" still directs to the top of the blog post. Back to the Top link destination

How To Build Lists In HTML

There are two different types of lists you can create using HTML. These are bulleted (or unordered) and numbered (or ordered) lists. Here's how to create each one (knowing how to build these manually can help you edit them more easily by hand in case WordPress messes up their formatting).

How To Create A Bulleted List

It's easy to create a bulleted list (or an "unordered list") using the appropriate button in your WordPress tool bar: Bulleted list button location in Wordpress You can also build one manually: Bulleted List HTML example Here's what this code looks like in a web browser: Example of a bulleted list
Why Are You Telling Me This?
Have you ever tried creating a bulleted list, only for WordPress to somehow mess up your formatting? Sometimes, minor formatting issues are easy to fix using the WYSIWYG editing bar. However, sometimes it feels a little bit more like this: In cases where WordPress won't cooperate, it's probably faster to edit your list HTML manually.

How To Create A Numbered List

To create a numbered list (or an "ordered list"), follow the same directions as shown above, but change the <ul> and </ul> tags to <ol> and </ol>. Example of a numbered list Here's what this list looks like:

Example of a numbered list

How To Build A Table Of Contents In HTML

The deep linking technique described above can be used to build a table of contents.
Let's walk through how to do this, using another recent post on our blog as an example:
  1. Create a list in the section where you would normally add your text.
  2. Make each list item a link.
  3. Add links between each section in your post back to its respective table of contents position.
When complete, your code should look something like this: Table of Contents Example This looks something like this on our blog: Table of Contents example
IMPORTANT NOTE: In the screenshot at the beginning of this section, you may have noticed code that reads div class="callout". This is a piece of CSS that creates a red background box (like the one in this tip, and in the table of contents we just created). If you're creating your own table of contents, you can ignore this line of code and the TOC will still work (it just won't have a background color).
Then, the end of this section features a link back to the table of contents. Back to the Top example This process is repeated throughout the post to build a working table of contents. To see how this table of contents works in action, visit our post on time management strategies and try clicking around.

How To Build Tables In HTML

Tables are useful for many different purposes, such as building simple image galleries or creating comparison charts. While WordPress doesn't provide a built-in means of quickly creating tables, they're easy to build on your own. This image illustrates how tables are constructed using HTML: Example of a table in HTML Here is what the end result looks like: HTML table If you'd like to adjust the alignment or appearance of your table, it's best to use CSS. Since we're sticking to HTML in this post, we'll have to cover this topic at another time.
Pro Tip: While WordPress doesn't have built-in table functionality, you can use a plugin to create tables too. This may be faster and more convenient than building them yourself. Although it's still important to understand how they're constructed.

How To Add Images In HTML

You now know how to format text and build tables in HTML. If you want to add an image, use the HTML image and the Alt Tag attributes:

<img src="Insert Image URL" alt="Insert Alt Text">

Let's try adding an image to our table. Follow these steps: 1.) Add an image to WordPress and find the image file URL: Image URL location in Wordpress 2.) Paste the image HTML tag into your table in WordPress. Then, paste your URL and write your alt tag in the appropriate spots until you have something that looks like the following: HTML table with images 3.) Here's what the end result looks like: Final HTML table with logo images Armed with this knowledge, we think you can probably create something more interesting than a repeating logo. This is just a quick test to walk you through the process.

How To Clean Up Common Copy And Paste Issues In WordPress

Have you ever tried pasting text from a Word document into WordPress, only to have your formatting get screwed up? That's because copying and pasting from Word (or another similar word processor) will usually include a lot of hidden formatting.
There are three ways to get around copy and paste issues in WordPress:
  1. Paste your content into a plain text document in TextEdit (Mac) or Notepad (Windows) before pasting it into Wordpress. This will strip out hidden formatting that would otherwise get turned into stubborn HTML.
  2. Paste your text straight from Word into WordPress and clean up the formatting manually.
  3. Write your posts directly in Wordpress.
We recommend doing this the easy way (option 1 or option 3), but we'll show you how to do it the hard way too (option 2), in order to best explain what happens when you paste text from Word into WordPress.

Ever wonder why copying and pasting from Word never looks right in #WordPress? Read this.

Click To Tweet

Understanding Non-Breaking Spaces

Copying and pasting text from WordPress into the Visual editor in WordPress will add non-breaking spaces to your text. This is probably one of the most common sources of headaches for bloggers when pasting text from Word. Let's dig into what these are and what to do about them.

How To Remove Non-Breaking Spaces In HTML

Here is some sample text we'll try pasting directly into the Visual view in WordPress: Sample Microsoft Word document Now, we'll copy and paste this directly into the Visual view in WordPress: Text with extra spacing Hmm. That doesn't look quite right. Odds are, you've encountered an issue like this at some point. Let's switch to Text view to see what's going on here: Example of a non-breaking space See the weird &nbsp; tag? This is called a non-breaking space. It forces a space to appear and prevents the formation of another line of text in its place.

The issue with copying and pasting from Word is that the text carries non-breaking spaces along with it. This causes an additional space to appear. Sometimes you can delete these spaces in the Visual editor, but when that fails, you can delete them manually in the Text editor.

Now if you notice weird and seemingly unmovable spaces in your WordPress text, you'll know what to do.
TIP: If you don't want to write posts directly in WordPress and prefer writing posts in Evernote or Google Docs, CoSchedule makes it easy to convert Evernote and Google Docs files into WordPress posts. You'll still need to format your headings and formatting, but it's an easy way to save time writing in your preferred word processing tool.

Additional HTML Learning Resources

Additional HTML Learning Resources section header You've read through this post. You've downloaded your HTML cheat sheet. You've started experimenting with troubleshooting common WordPress formatting issues. If you're interested in taking your HTML knowledge to the next level here are some recommend resources to continue your learning:
Websites: W3 Schools: This is considered by many to be the ultimate resource for learning HTML (and CSS and Javascript) on the web. Mozilla Developer Network: This resource from Mozilla (the folks that make Firefox) is another alternative to W3 Schools that provides in-depth HTML tutorials. Codecademy: This website features tons of useful coding lessons and resources. Lynda: While not free, Lynda features plenty of training courses on HTML (as well as other coding and computing topics).
Books: HTML & CSS: How To Build Websites: There are a lot of books on HTML out there. However, we recommend this one the most. It's clearly written, accessible to beginners, and well suited to writers and editors who just want a good grasp of how HTML and CSS work. Head First HTML 5 Programming: The Head First series is another great option for learning coding languages in an accessible and straightforward manner.
Videos: 30 Days To Learn HTML & CSS: If you prefer learning from videos, this is a great place to start.

Remember, everyone learns differently, and

some people learn more easily from different types of content. While this post may provide you with a good starting point, you might find a book or video series more helpful for your purposes.

Now Put Your New HTML Skills To Use!

There's a lot to learn when it comes to HTML. However, we hope this HTML cheat sheet and step-by-step guide has provided you with just enough tips to make your blogging life a little bit easier. You now know how to do basic blog formatting with HTML. You know you can create and edit text links, control paragraph structure, fix broken links, build tables, and remove unwanted spacing. Knowing these HTML tips are going to help you tons and you'll be super thankful for the cheat sheet.

Learn #HTML basics to improve your blog formatting. #blogging

Click To Tweet
About the Author

Ben Sailer has over 14 years of experience in the field of marketing. He is considered an expert in inbound marketing through his incredible skills with copywriting, SEO, content strategy, and project management. Ben is currently an Inbound Marketing Director at Automattic, working to grow as the top managed hosting solution for WordPress websites. WordPress is one of the most powerful website creation tools in the industry. In this role, he looks to attract customers with content designed to attract qualified leads. Ben plays a critical role in driving the growth and success of a company by attracting and engaging customers through relevant and helpful content and interactions. Ben works closely with senior management to align the inbound marketing efforts with the overall business objectives. He continuously measures the effectiveness of marketing campaigns to improve them. He is also involved in managing budgets and mentoring the inbound marketing team.