Today I’m going to talk about basic HTML editing and introduce you to the world of HTML codes. While a lot of my clients rely on me for their HTML formatting and editing, knowing how to do some minor HTML editing on your own will be a huge help if you want to post your own blog posts or start salespages to be cleaned up by your regular web designer (after all, chances are they won’t be awake at 3 AM when you’re hit with the inspiration for a new product).
What is HTML?
HTML is the language that tells your web browser how it should display content on your website or blog. At the most basic level, HTML involves wrapping your content with specific tags… sort of like an Oreo cookie. Your outer cookie is the HTML code and the gooey stuff in the middle is your content. So let’s say we want to make a word bold, you wrap it in a bold tag. The HTML code for bold is <strong>. Just like an Oreo cookie, you always have to have two corresponding tags: an open and a close tag. The open tag tells your browser start making text bold here. The close tag tells it where to stop and looks like this: </strong>. The stuff that goes in the middle is the text you want to display in bold text.
Let’s look at an example. Let’s write to sentences below. The first is how the text will display to a human reader of your blog. The second sample is how the text displays in HTML code:
How is HTML coding like an Oreo Cookie?
How is HTML coding like an <strong>Oreo Cookie</strong>?
Remember the <strong> tag tells the browser “this is where my bold text starts” and the </strong> tag tells it “this is where my bold text stops.” Before we move on, I want you to look closely at the start and ending tags for bold and notice the difference between the two. Notice the addition of the trailing slash in the end tag. I’ll make it a different color so you see what I’m referring to: </strong>. The slash is how you tell a browser to stop a particular action.
Doesn’t WordPress Have A Built In Visual Editor?
Now you may be thinking I have these pretty little buttons inside my WordPress blog that allow me to do all the editing and formatting I need to so why would I bother learning HTML codes?
That’s a good question. You can certainly use the editor inside WordPress and even install another plugin called TinyMCE to give you even more editing functionality but be aware that it can result in some messy looking code. What do you care, right? As long as your readers can see the text exactly how you want it displayed, why does it matter if the back end is messy? Let me give you a recent example.
One of my clients has started building his own salespages and then sending them to me to clean them up and make them look pretty. We also need to add the embed code from EZS3 for a video. If you know anything about embed code, you know that you need to be in HTML mode in order to paste the code in. My client had built his page in Visual Mode and as soon as I switched over to HTML mode, a lot of his formatting went wonky: things didn’t line up properly, the size of text was inconsistent, etc. Looking at the code, it was a mess! Here’s a snippet:
I know it may look like Greek to you, but to me, there’s a lot of funny things happening in that one line of code. Here’s what the final output should be:
** If You Are NOT a Member, Please Sign UP HERE
So black text for the most part and red to highlight the action he wants the reader to take, bold, italics and a little bit bigger than the default text size on the page.
Looking at the code, I can see that the color is changing a few times (five to be exact) and that only one of the tags is actually needed. I can see that the font size is changing seven times and that only one is needed. And that a lot of those changes aren’t closed properly (remember from the sample above, all tags need to be wrapped by open and close tags).
Let me walk you through what happens when the browser loads this piece of code. Each instruction is inside < > tags.
Your browser is humming along, and gets to this line and the first thing it’s told to do is make the text align left. The default alignment for the page is left so that instruction isn’t really necessary as long as you remember to close the tag properly.
The next thing it’s told to do is make the text red. Hang on a second, we don’t want the text to be red yet but the browser has been told to make it red. Moving on.
Now the browser receives a bunch of rapid fire instructions about the font size. Make it medium, make it small, make it medium, make it small, make it medium, make it small. Whew, I’m getting tired… maybe I’ll just slow down a little bit on reading this page and loading it.
Two more rapid fire instructions: Make the text black and then make it blue. Blue? We don’t want blue in here at all.
Make it italics and make it bold (both good – just remember to close the tags).
Make it medium, make it black (good though the default color for the page is black so that instruction isn’t really needed unless you have a bunch of messy code before hand that turns it into a different color).
Then it finally reaches the text that needs to display on the screen as well as an instruction to hyperlink some of the text and change the color to red. But it had to jump through a bunch of hoops in order to get there. Just to display one sentence on the page. Now imagine an entire long form salesletter where every line of text has several instances of unnecessary HTML code to sort through before it gets to what you actually want it to do?
Here’s the cleaned up version of the HTML code:
So while it’s great to have an easy editor to use, it’s important to understand how HTML code works so you can fix things if need be.
Let’s take a closer look as some of the more common HTML tags.
HTML Codes Made Easy
Headings
Tags: h1, h2, h3, h4, h5, h6
When you want to put a heading above a paragraph of text (or an image or a video), you use the HTML heading tags. The actual size of the heading and formatting of the heading is set out in your CSS style sheet but that’s an advanced topic that we won’t go into here. All you need to know is that the different tags display your text using different font sizes depending on which one you use. Like in Microsoft Word or any other word processing software, h1 will display the largest text. Here’s an example of a few different heading sizes.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
Note: My h1 tag underlines the text. Your display may be different based on the settings in your theme for those different elements.
SEO Tip: An important thing to know about HTML headings is that the carry different weights of importance from the SEO side of things. The highest weight is given to h1 tags and it decreases from there. So when your page is spidered, anything wrapped in an h1 tag is considered the most important. That’s why you want to have at least one h1 tag on your page wrapped around your most important heading and (ideally) your primary keyword phrase.
Next in line is the h2 tag. Though not as important as the h1 tag, it still has a bit of weight attributed to it from an SEO perspective. That’s what it’s perfect for wrapping headlines that link to other documents or pages within your website. They’re also great for targeting secondary keywords and phrases and giving them higher importance.
Images
Tag: img
Okay we’re about to throw the HTML playbook out the window. Remember when I said every HTML tag had to have an opening and closing tag? The image tag <img> is considered a self-closing tag. Meaning it doesn’t need to have a </img>. Instead, it just uses a single trailing slash mark at the end of its opening tag. Like this: <img /> Again I made it red so you could see it.
Image tags are a little more complicated than the heading tags above or the text formatting tags we will be talking about next. In order to display an image, you need to tell the browser where the image is stored. In order for a web browser to display an image, it will need to know where to find them on the server. To tell it where to go, we need to use another little piece of code (or attribute) “src” as part of our tag.
Here’s an example:
<img src=”http://yourdomainhere.com/images/yourimagefilehere.jpg” />
In this example, (working from right to left) the image is a .jpg image, stored in a folder called images on your domain. There are additional attributes you can add to the basic img tag that enhance the display of the image (alignment, padding around the image, size, etc.) but the basic tag <img src=”PathToImage” />
Text Formatting
Tags: strong, em, u, strike
There are a lot of tags available for basic text formatting and we won’t go over all of them here. I will go over the most common tags. Let’s get started. For each formatting type, you will see the HTML tag followed by the HTML code sample and then the output (how the HTML code will display to your reader).
To Make Text Bold
HTML tags: <strong> </strong>
HTML code: <strong>To make text bold use the strong tag</strong>
Output: To make text bold use the strong tag
To Make Text Italicized
HTML tags: <em> </em>
HTML code: <em>To make text italic use the em tag</em>
Output: To make text italic use the em tag
To Underline Text
HTML tags: <u> </u>
HTML code: <u>To underline text use the u tag</u>
Output: To underline text use the u tag
To Strike Through Text
HTML tags: <strike> </strike>
HTML code: <strike>$97</strike> On sale for $47
Output: $97 On sale for $47
The tags and coding snippets listed above are by no means meant to be an exhaustive course in HTML but simply provided as a basic intro into the wonderful world of coding. If editing your own HTML or becoming a coding monkey is something that you’d like to learn more about, I advise you to start looking at different code online. When I first started learning HTML (back in the days before WordPress came along to make thing easier), I used to save the URL of pages where something interesting was done. If there was a table on the page, I’d save it. If there was a drop down menu, I’d save it. Then when I needed to add an element to a site I was building, I would go look at one of my saved pages and view the source code to see the HTML that was responsible for producing the output I wanted.
If you’re interested in building your own salespages and blog posts and just want someone to take a look at them and make them look pretty (like I do with some of my clients), feel free to give me a shout. I’m available for hire on an as-needed basis to clean up code or add trickier design elements to your salespages, landing pages and blog posts.
GREAT beginner’s information here. A must read for all html noobs.