Ever had a blog post do something crazy? Weird highlighting, changing fonts, double spacing? Learning even a little HTML can help you troubleshoot those crazy errors.

On Friday, I gave this presentation at the iWriteNetwork conference, and I thought it would go well with the blogging series we did a little while back, so I’m sharing it here today.

To find the HTML in your blog, above the post window, find the “HTML” button or tab. It will show you the HTML codes that present your document.

Some HTML basics

HTML stands for HyperText Markup Language.

When I want to look something up in HTML coding, I usually Google it, and click on any result from http://w3schools.com.

To “turn on” a style or feature, put it inside less than/greater than signs, like this:

<b>, <em>, <strong>

To “turn off” a style or feature, add a slash after the less than:

</b>, </em>, </strong>

Everything between those two tags (technically elements, but we’ll go with tags) will obey those tags.

A few tags are “self-closing,” and have that slash at the end, right before the greater than sign. Image tags and line breaks are two of these:

<img src="picture.jpg" /> (always use straight quotes!)
<br />

Formatting text for the Internet

Centering—there are two methods to center text. I recommend picking one and memorizing it.

<p style="text-align: center;">Centered text</p>
<p align="center">Centered text</p>

Bold—again, there are two methods; pick one

<strong>Bold text</strong>
<b>Bold text</b>

Italics—yep, two methods.

<em>Italic text</em>
<i>Italic text</i>

Styling text, from color to line spacing, is done mostly with a p element or a span element. P is for whole paragraphs, Span is for text within paragraphs.

Begins with:

<p style=" or <span style="

Must be STRAIGHT, not curly or “smart” quotes!

Inside those quotation marks, you can change all kinds of things about your text. All of the following “properties” must come INSIDE those marks, and include the semicolon. (Use just ONE of each tag.)

Color

color: red; OR color: #FE7898; [a HEX code] OR color #555;
[For HEX codes that are the same digit/letter]

Size

font-size: 14px; OR font-size: 14pt; OR font-size: 2em; OR font-size: small;

Background

background-color: yellow; OR other styles for color

Line spacing (all these are about double spaced)

line-height: 200%; OR line-height: 2; OR line-height: 25px;

Font gives several options to browsers to figure out a type of font to display

font: Georgia serif;

Once you have everything you want to change about your text, close the quotes and tag: "> (And remember </p> after the paragraph text!)

For example:

<p style="color: red; font-size: 20pt; background-color: #555;
text-align: center; line-height: 200%;">Here is my sample
paragraph. It's pretty hard to read with the gray background and
red text, so I really can't recommend using this exact color
scheme, but you get the idea.</p>

Gives us:

Here is my sample paragraph. It’s pretty hard to read with the gray background and red text, so I really can’t recommend using this exact color scheme, but you get the idea.

Outline format: headers

HTML comes with an outline format that uses headers, <h1> through <h6>.

The highest level header is for your site name. Typically, there will be only one <h1> element on a page.

<h2> elements are often used for post titles. There can be more than one <h2> on a page.

I use <h3> elements for subheadings inside my blog post. You’ll notice they’re purple here 🙂 .

Images

IMG stands for image and SRC stands for source. That’s where the URL of the image itself will go. The rest of the properties are optional, but I recommend at least using the alt text, and included a search keyword, if you’re looking for a (slight) SEO benefit.

<img src="imageURL.jpg" height="80" width="60" alt="the best
dog in the whole world!" align="right" style="float: right;" />

Note that if you want the top of your image to be inline with the text, you’ll want the code for the image and the text together, without line breaks (hard returns or <br />), and the image must be right or left aligned. Like this:

<img src="imageURL.jpg" height="80" width="60" alt="the best dog
in the whole world!" align="right" style="float:
right;" />This text will line up with the TOP of the image.

Links

Links are the currency of the web! The Link anchor text is the text that shows up colored and underlined when you look at the post. Search engines use the actual anchor text as a vote, so describing your friend’s site with “click here” isn’t as helpful to their SEO as it would be to say “sci-fi author Jane Doe.”

To make a link, you use an “a” (anchor) element, with HREF (hypertext reference)

<a href="URL.html">Link anchor text</a>

You can also use “a” elements to link to a specific part of a document. For example, if I wanted to make a link to the text formatting section of this document, I would insert this HTML code just before the subheading. (“format” is the name I chose; you can use anything you like.)

<a name="format"></a>

There’s no text required—it makes any text look like a link, but it’s not clickable, so I skip it.

Then, to link directly to that part, use:

<a href="pageURL.html#format">Link anchor text</a>

These anchors also work on the same page. Here’s that link to the text formatting section on this page.

Special characters: HTML Entities

I have a few of these memorized, but I often just Google the name of the character and “html entity” if I need to find it. Include both the ampersand and the semicolon.

• Straight apostrophe: &apos;
• Accents, e.g. é: &eacute; [the direction of the accent] OR &#233; [the alt code] — the ‘e’ is case sensitive!
• Ampersand: &amp;
• Straight quote: &quot;
• Less than: <
• Greater than: >
• Cent: &cent;
• Copyright: &copy;
• Em dash: &mdash;

Two quick cut-and-paste tips

If you look at your HTML code and see that every paragraph has a line-height: 200%; property that you don’t want, I recommend cutting and pasting the code into Notepad (Text Editor on a Mac, I believe) and using Find and Replace to get rid of it.

Pasting text from an email or Word doc? I recommend pasting the text directly into the HTML window or Notepad/Text Editor. Notepad makes it easier to add line breaks between paragraphs, and find and replace any characters that won’t display properly. You will need to add bold or italic formatting manually.

Troubleshooting

Go find a crazy post on your blog and dig into the text to see if you can find out why it’s displaying oddly.

Note: If you’re trying to put two images with captions side by side in Blogger, you will need to use a table. Blogger puts the caption into a table row below the image and won’t display two tables side by side.

Don’t have a crazy post? Cut and paste this code into a new post and preview to see what’s displaying strangely. Then dig into the code to fix it!

<p style="background-color: red; text-align: right;">We use
crutches when we're lame. Gesture crutches? <strong>They're often
a symptom of writing that's limping along.</strong> Don't let your
writing limp! Make it run, jump, dance and sing!</p>
<strong>Describe the laugh</em> to make it pop. Write it fresh!
"A suuuure-you-can laugh" or "Her laughter was bright and thin
 and tinny, like the sound of cheap jingle bells you buy one
year—and the next find inexplicably silent."
Is this hard work? <strong>YES!</strong> Is it worth it? We
can&mdash;well, actually, we probably <em>can't</em> cite
<a href="http://example.com">examples of less-than-engaging
writing in published books: unless they're book-throwing bad, we
tend to gloss over this boring body language just like we do a
lot of other unstellar examples.

Can’t fix your crazy posts? I’m happy to help! Come join in the conversation!

Photo by Jesper Rønn-Jensen

Series Navigation

Tracking your blog: using the data