HTML Cheat Sheet For Content Marketers - CoSchedule

HTML Cheat Sheet For Content Marketers In todays economy, youve 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, theres always more we can learn. In your job, you probably dont 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. 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. #bloggingIf 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). 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. 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? 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: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!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: 2)  Click File in your top navigation bar. Then, scroll down to Open File: 3) Select your HTML file and click Open. It'll look something like this: Pro Tip: Remember your .txt document needs to be saved as a .html file. Basic HTML Tutorials For Beginners 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: Here's what they look like on the blog: 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: strongInsert Text/strong In the past, you may have seen bolded text created using the bInsert 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: emInsert Text/em You may have seen italicized text using the iInsert Text/i tag, but once again, this tag is considered outdated. How To Create A Paragraph To create a text paragraph, use pInsert Text/p. Here's an 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: 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: Or, you can wrap your text using this tag: blockquoteInsert Text/blockquote. Here's how block quotes appear on our 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: 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: Here's what the end result looks like: 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: 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: 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: Switch to the Text view tab in WordPress, and add this tag:  a name="NAME"/a. Delete the NAME placeholder text and write your desired anchor text. 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): Here's what the end result looks like: 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 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). Here's how the link appears: Since we did not specify anchor text for this link destination, nothing appears to the reader. However, clicking "" still directs to the top of the blog post. 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: You can also build one manually: Here's what this code looks like in a web browser: 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. Here's what this list looks like: 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: Create a list in the section where you would normally add your text. Make each list item a link. 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: This looks something like this on our blog: 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. 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: Here is what the end result looks like: 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: 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: 3.) Here's what the end result looks like: 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: 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. Paste your text straight from Word into WordPress and clean up the formatting manually. 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.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: Now, we'll copy and paste this directly into the Visual view in WordPress: 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: 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, 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 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.