I’ve learned HTML (Hyper Text Markup Language) code when I need it to clean up my blog. Most of the time, bloggers don’t need to know this behind-the-scenes computer code because WordPress and Google Blogger provide icons for you to insert links, make bold fonts, create a blockquote, and more. I hope this post will be helpful for any blogger to know how to keep their site looking the way they want it to with a little bit of knowledge about HTML.

I know this has happened to you (it happened to me while I was writing this post):

• You paste in some new text and the font is bold when you don’t want it to be.
• You’ve made a long bullet list and some of the items aren’t lining up properly.
• A photo or inserted video is interfering with the placement of some new text you’re adding.

Knowing just enough HTML will help you fix these issues and more. As a bonus, knowing HTML can help you on MailChimp, too. I’ll close this post with some related MailChimp help.

HTML Is a Language for Structure and Function

You know the rules for your own language. For instance, my sentences in this article begin with a capital letter and end with a period. HTML also needs a “start” and a “stop”. For instance, where does bold, or italic, or a green font begin and end? The language rule for HTML is that instructions are contained. Think of these containers like parentheses.

• HTML entities use & and ; to indicate some characters.
• HTML tags use <> and </> to contain an instruction (e.g., <strong></strong> or <h1></h1).

NOTE: All HTML codes are in red for the remainder of this article. Don’t use any of my quote marks. I put those around some of the HTML code so WordPress wouldn’t automatically translate the language.

Before You Start

Clear Formatting

Have you used the “clear formatting” icon (the eraser in WordPress)? Using this regularly will prevent many of your problems right at the start.

Let’s say you want to use content from a Word or Pages document. What you don’t see is the hidden code for the formatting created when you composed it. This Word or Pages code is a different language from HTML. After pasting your content into your blog editor, highlight it and enter “clear formatting.” Now, all the hidden code is gone. Go back in and add bold, etc., using your blog editor in order to have HTML code providing the formatting instructions.

Where to Find the HTML Code

In WordPress, you spend most of the time creating your masterpiece under the “visual” tab (in Google Blogger, the tab is “compose”). You can’t see the hidden HTML code unless you open your post in the tab that shows this language. Clicking on the “text” tab shows both your content and the HTML code for the structure of your post. (Low and behold, the tab is “HTML” in Google Blogger.) You’ll be doing your coding under this tab.

Next time you’re puzzled by why something looks odd to you and you just can’t clear it up in the editor, highlight the trouble spot and click the “text” tab to see what is going on behind the scenes. When you open this tab, I can hear you gasp, “It’s all GEEK to me!” Don’t despair. You don’t need to learn this computer language and become a programmer, just be familiar with a few little easy coding tips.

Simply knowing about the “containers,” for instance (&; and <></>), will show you why your link is too long or your bold stopped short.

It also helps to know that containers can be within containers. Understanding what “start” and “stop” instructions are should help you if you need to correct something. For instance,”The quick brown fox jumps over the lazy dog” has an italic instruction within a brown font instruction. The code looks like this: “The <span style=”color: #800000;”><em>quick</em> brown</span> fox jumps…” The italic code (em) is inserted within the style code for brown; both codes end before “fox.”

HTML Character Entities

Generally, the Omega icon (Ω) in your WordPress editor will help you insert special characters like ©, €, ¡, Å, … Two HTML character entities might be handy to know:

The non-breaking hyphen “&#8209;“ lets you use a hyphen within a word so that it won’t break to a new line. I used this HTML entity in pin‑striped, record‑breaking, fun‑loving, short‑term, and all‑out so now these words will not break at the hyphen, but start on the next line (remember, only use the code you see in red, not the quote marks).

“&nbsp;” should create a space. Sometimes, WordPress overrides this code, however. You might try <br> instead for a line break.

HTML Tags

Here’s a list of HTML tags I think will be useful for you to recognize if you’re cleaning up some code.

IMAGE CODE <img src=”http://image.jpg”>

LINK CODE <a href=”http://link.html”>LINK</a>

<h2>This code would be for Heading 2</h2>

<p>Contains a paragraph</p>

A bullet list:

<ul>
<li>first item</li>
<li>second item</li>
</ul>

A numbered list:

<ol>
<li>number one</li>
<li>number two</li>
</ol>

I’ve learned other helpful code, like creating anchors for linking within a post.

If you’d like to learn just enough HTML to be dangerous, I recommend:

• HTML Dog
• W3 Schools

HTML and MailChimp

Generally, what I’ve said also applies to MailChimp. Here’s a screenshot of the MailChimp editor to help you take similar steps to clean up a MailChimp letter.

The “Clear Styles” button will clear your formatting. To the right of it is the icon (<>) to use the HTML editor. Beneath the button is an anchor icon to easily link within your letter.

Don’t Forget to Preview

Even though your editor for a MailChimp letter, or for your post (or page) in your blog, shows you how your magnum opus will look when published, I recommend also using a preview before you’re done.  Occasionally, you’ll be surprised about how indents and other elements may look, so it’s worth this extra step before publishing.

I recommend simply learning HTML as you go, picking up useful codes over time.

Are you going to try using the HTML editor when needed? Have you done this already? What codes are helpful for you?

Photo by Taskin Ashiq on Unsplash