Talk to the serious blogging and web publishing pros, the ones turning out brilliant content fast, and you will find that they all have one thing in common. They write with HTML.

Writing with HTML in WordPress isn’t complicated nor does it require a degree in foreign languages or web development. We’re not talking about building a web page from scratch every time you publish. We’re only talking about the HTML that goes into the post content.

How much HTML do you have to learn? Only 10 HTML tags. That’s it. Less words than you probably know in Spanish or another foreign language.

The most commonly used HTML tags in the post content area are:

1. Anchor Link Tag <a href="…">link</a>
2. Image Tag <img src="…" />
3. Headings <h2>, <h3>, <h4>, <h5>
4. Paragraph <p>Text here</p>
5. Bold <strong> not <b> and Italic <em> not <i>
6. Lists <ol> and <ul>
7. Blockquote <blockquote> and <cite>
8. Line Break <br />
9. Horizontal Line <hr />
10. Code <pre> and <code>

How many of these do you use commonly in your blog posts? All of the ten? When was the last time you needed to put code in your blog post? Rarely, if ever. At most, you use 5 of these in most posts you publish. I think you can handle that.

The five are links, headings, bold and italic, lists, and blockquotes – unless you are a poet. Then add the line break to your collection for six easy to remember HTML tags.

Sure, there are more HTML tags you can use in the post content area, but these are the most common. Tables, font colors, etc., are rarely used and if you need to use them, you probably already know how.

Why do pro-bloggers write in HTML? The key reasons are:

• The Text editor in WordPress loads faster.
• It’s faster to write in HTML, your hands staying on the keyboard.
• You have more control over content design and structure.
• You can write HTML in any text editor from anywhere and not be tied to the WordPress editors or the web.

Let’s look at some rules then go through each of these individually as pertains to WordPress.

Please note that recently WordPress changed the name of the HTML Editor to Text Editor. You will find many references on my sites and others to the HTML Editor. They are one and the same.

---

HTML Rules and Guidelines

When using HTML, you have to follow some basic web and code standards. To write in HTML in WordPress, you must use the Text editor in Posts or Pages.

If you open it, close it.

All open HTML tags must be closed. If you open a tag such as bold [<strong>this is bold</strong>] you must close it with a closing tag featuring a forward slash before the close.

All self-closing HTML tags must be closed. In strict HTML, you must close single tags with a forward slash at the end of the code. This applies to images, line breaks, horizontal lines, and a few others rarely used in the post content area.

Open and closing HTML tag example:

<a href="http://example.com/" title="Link to example article">Example Article</a>

Self-closing HTML tag example:

<img src="http://example.com/ball.gif" alt="Ball" />

All HTML is lowercase.

All HTML tags are lowercase. If you peek under the hood at the source code of any website and you see capital letters used in the HTML, the site was probably designed prior to 1999.

Even if you read an HTML tag with a capital letter such as <BOLD> or <H3>, use lowercase letters when you write yours.

Be careful with nested HTML.

There is a hierarchy in the structure of nested HTML tags, tags used inside other tags. Open one, introduce another, then close the second, then close the first.

Right:

...this is <strong><em>bold and italic text</em></strong>...

Wrong:

...this is <strong><em>bold and italic text</strong></em>...

Not all HTML works in WordPress Posts.

Self-hosted versions of WordPress and WordPress.com features a core function that “fixes” poorly formed HTML and HTML and code not permitted inside the post content area.

Consider this: If you put code in the post content area, it will behave as code, thus potentially messing up your whole site. WordPress assumes that if you put code within the post content area, it is meant to be text, thus converts it into a readable format or removes it.

There are ways to publish code in a WordPress post, which you will be doing in the class, but that comes later.

If you have messed up the HTML or made a mistake, WordPress will convert it to “text” using HTML character entities to replace the code elements. What should have become bold might look like this: <bold>word in bold</bold>. If you see confusing characters, WordPress has “fixed” things for you, which you may want or not. Learning HTML basics will help you fix it and control what appears on your site.

For a full list of exactly which HTML tags are permitted in a WordPress blog post, see Code — Support on WordPress.com.

What does my HTML tags look like in my WordPress Theme?

Every WordPress Theme may style even the most common HTML tags differently.

To find out how your WordPress Theme styles the most common HTML tags, read Designing a WordPress Theme – Building a Post Sandbox and download (right click and save as) or copy the sandbox post text file and paste it into the Text editor in a new post on your blog. Publish it and preview what it looks like. Change WordPress Themes and see how the post elements changes as well.

---

The Top 10 HTML Tags Used in Blog Posts

Of the 66 HTML tags permitted in a WordPress blog post, I’ll start with the first five most commonly used, then the next five used occasionally, and end with some others less commonly used.

1. Links

Links are called links, hypertext, and things you click, or some combination of these. In HTML-speak, they are called anchors and represented with an A.

<a href="http://example.com/" title="Description of the Link">anchor text</a>

The href is the hyperlink reference known as the URL or address.

The title is the descriptive text that describes or titles the link, required by web standards for accessibility.

The anchor text is the visible part of the link. The anchor text can be a single word or phrase, or an image.

<a href="http://example.com/" title="Description of the Link">
<img src="http://example.com/ball.gif" alt="Ball" /></a>

Note: In general, a link consists of a single word to at most six words, not entire sentences or paragraphs.

2. Bold and Italic

Bold and italic are the most common ways to add emphasis to words or phrases.

Originally these were designated by <b> and <i>. The Semantic Web movement changed these to put more emphasis on the emphasis to <strong> and <em>. They do the same thing, but few web designs recognize the archaic HTML codes today.

To change WordPress Themes, go to <strong>Appearance</strong> > <strong>Themes</strong>.

The restaurant was <em>à la carte</em> and he couldn't decide.

It is considered bad form to combine bold and italics, considered screaming without all capital letters.

Many bloggers use quotes to represent “air quotes” when they write. The proper emphasis of air quote words or phrase is through italics.

3. Headings

The header is the masthead at the top of your website. The headings are the section titles or subtitles within the structure of a web page. Headings help to divide content into blocks or sections, and lead the reader through the article visually and physically.

...which we will discuss in the next section.</p>

<h2>Guidelines for Writing Blog Posts</h2>

<p>In this section, we will look at how to write a blog post...</p>

There are six heading tags used in most websites, though only four or five are typically used, and each WordPress Theme uses them slightly differently. According to web standards, heading tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>, starting large and getting smaller as the number grows larger. Most WordPress blog posts use <h2>, <h3>, and <h4>.

The <h1> heading is traditional reserved for the blog or post title and rarely used in blog posts. Your WordPress Theme will generate these automatically.

The <h2> heading is used for the post title or as the first section title in a blog post. Check your WordPress Theme to ensure if your posts should begin with this section heading or use <h3>.

The <h3> heading is the most commonly used in most WordPress Themes as the first heading you will use, but this is changing. Newer WordPress Themes begin with <h1> and/or <h2>.

The <h4> heading is the next smallest and may be used in post content.

The <h5> and <h6 are rarely used within the blog post area. If the WordPress Theme includes them, they are used in the sidebar and footer.

In the WordPress Theme 2011 which comes with WordPress by default, the headings begin with <h2> and only go to <h3>, with little visible and graphical difference between the first two, and the third smaller than the paragraph font size. For sites that demand contextual hierarchy in their post content such as magazines and technical sites, ensure the headings are styled appropriately as is fitting your content style and readers’ expectations and familiarity.

Note and Warning: DO NOT use bold for your headings. In my classes and workshops, it can get you a fail fast. Use headings properly and bold only within the paragraphs. Also, do not put links in your headings. Links belong in sentences not subtitles.

4. Lists

There are two types of HTML lists.

An unordered list begins with <ul> which means “Unordered List.” It features bullets not numbers.

An ordered list begins with <ol> which means “Ordered List.” It features the a numbered list. If you move list items around on the numbered list, they will be automatically renumbered.

Each list item is surrounded by the “List Item” HTML tag <li>.

<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>

<ol>
  <li>Frog</li>
  <li>Dog</li>
  <li>Cat</li>
</ol>

You can put anything in a list, words, numbers, sentences, even paragraphs. If you choose to number paragraphs or sections, do so manually and do not use HTML Lists as it gets messy fast.

A nested list is a list within a list.

1. Fruit
   • Apples
   • Oranges
   • Bananas
2. Meats
3. Vegetables
   • Carrots
   • Beets
   • Potatoes
4. Dairy

Remember, there is a hierarchy to HTML. Open one, then another, close the second, then the first. The same applies to lists. It’s easy to mess up so pay close attention.

When you wish to add a “sub-list” in your list, called a nested list, it must be within the “parent” list item. When the nested list is completed, you close the parent list item HTML and continue the rest of the parent list items.

<ol>
  <li>Fruit
<ul>
  <li>Apples</li>
  <li>Oranges</li>
  <li>Bananas</li>
</ul>
</li>
  <li>Meats</li>
<li>Vegetables
<ul>
  <li>Carrots</li>
  <li>Beets</li>
  <li>Potatoes</li>
</ul>
</li>
  <li>Dairy</li>
</ol>

5. Blockquotes

It is common practice to quote people or reference content from other web pages, articles, or books. In accordance with copyright laws, it is important to also cite the source of the quote.

“Quotes can be incorporated into the text of an article so it flows with the content,” says Lorelle VanFossen of Lorelle on WordPress, commenting on how citations can be used in the traditional media style on a blog.

Or they can stand alone in the form of a traditional pull-quote called a blockquote in HTML.

The following example is the most commonly used format, incorporating the citation in the paragraph and highlighting the quoted content with a <blockquote> HTML tag.

Discussing quoting sources in blog posts, <a href="http://lorelle.wordpress.com/" title="Lorelle on WordPress" rel="tag">Lorelle VanFossen of Lorelle on WordPress</a> says:

<blockquote>Quotes can be incorporated into the text of an article so it flows with the content.</blockquote>

To include the citation in the blockquote, you would use the following format.

<blockquote>Quotes can be incorporated into the text of an article so it flows with the content.<br />
<cite><a href="http://lorelle.wordpress.com/" title="Lorelle on WordPress" rel="tag">Lorelle VanFossen of Lorelle on WordPress</a></cite></blockquote>

The <br /> is a self-closing HTML tag for Line Break. You can also use paragraph (<p> tags).

The <cite> HTML tag may be styled differently in your Theme’s blockquote styles for emphasis. Even if it is not, it is a required HTML tag for such citations.

More specifics for using these HTML tags and how to cite content that is not yours is found in “How to Quote and Cite Sources for Copyright Protection.”

6. Image Tag

The image tag is very commonly used in WordPress posts, but it is rarely handwritten as images are uploaded to WordPress and embedded into the posts through the WordPress media features.

<img class="alignright size-medium wp-image-5493" title="Photograph of red ball floating in lake" src="http://lorelle.files.wordpress.com/2005/08/red-ball-in-lake.jpg" alt="Red ball floating in lake, photograph by Lorelle VanFossen" width="350" height="264" />

The img is the HTML tag for image.

The class is the CSS styles that style the photograph. Depending upon the styles in the WordPress Theme, it could have a border or frame around the image.

The title is recognized by most browsers today and provides a title to the image for search engines, and can serve as the descriptive text of the image, but the alt is required by web standards. WordPress continues to require a title but not the alternative description, something many have fought to change for many years.

The alt is required by web standards for accessibility to be the descriptive text of the image, describing what the image is not the subject under discussion. For example, if you are using an image of a sunset for eye candy to discuss preparing for retirement, the alternative text should not be “preparing for retirement” but “Photograph of a sunset on a beach.” It is designed to make the image “readable” by those with visual impairment.

The width and height set the size of the image.

Here are some tricks you need to understand when it comes to working with images and media in WordPress and the Text editor.

• When uploading or preparing to embed the image into your post, ensure the alt is filled in and describes the image properly.
• If you forget to add the alt in the Media Library, you can add it manually in the Text editor to the image HTML code.
• Set the position options to right, left, center, or none to place the image so the text will (or will not) wrap around the image. The text will stay above and below the image and not wrap if you choose center.
• If you place the image and it doesn’t work floated to the left, in the Text editor you can quickly edit the alignleft style in the class to alignright to see if you like that better.
• Select the size of the image when embedding the image into the post. Choices are thumbnail, medium, large, and full-size, though not all sizes may be available.
• If the image appears too small or too large in the post, in the Text editor you can quickly “resize” it by removing the height and changing the width. For example, if the image is width="500" height="800" you can delete the height and change the width to width="300" and the image will automatically adjust the height accordingly.

7. Paragraph

The paragraph HTML tag <p> is actually the most used HTML tag in WordPress posts. However, it is automatically generated so you do not need to use it.

Please an empty space between paragraphs (called a double hard return or two enters) and WordPress will automatically add the paragraph tag to the beginning and ends of each paragraph.

This is an example of a first paragraph in a WordPress
blog post filled with text.

With a double space between the paragraphs, WordPress
will wrap them in paragraph HTML tags when you publish
the page. 

<p>If you were too look under the hood in the web browser
at your page's source code, you would find this paragraph
wrapped in an HTML paragraph tag.</p>
<p>You would also find the next paragraph also wrapped,
making it rare for you to actually use the paragraph
HTML code.</p>

If you are writing complex content or editing content pasted from another website into WordPress, you will encounter the paragraph tag. It’s good to know it is there and how it works, but rarely will you use it in a post.

8. Line Breaks

A paragraph HTML tag automatically spaces itself per your WordPress Theme’s styles, adding whitespace between paragraphs. A line break removes that spacing and manually creates a single space between lines.

Line breaks <br /> are self-closing HTML tags and are most commonly used in addresses, poetry, recipes, and other content requiring no spaces between lines.

...and my address is:

1234 Glory Lane<br />
Vancouver, Washington 98123<br />
USA

Make a note to leave the package on the doorstep so I 
don't have to pick it up at the post office.

Note that the last line of the address does not have a line break code but has an extra space after it. This will help WordPress know where to put the closing paragraph code after the address.

Poetry works much the same way.

<h2>Observations</h2>
<em>By Ray Kelly, Marysville, Washington, 1989</em>

I observed the great blue skies<br />
And the light in young girls' eyes.<br />
I observed the greening of trees,<br />
The pretty flowers in gentle breeze,<br />
But of all of life's greatest thrills<br />
Is to find a full-paid bill.

Observations
By Ray Kelly, Marysville, Washington, 1989

I observed the great blue skies
And the light in young girls’ eyes.
I observed the greening of trees,
The pretty flowers in gentle breeze,
But of all of life’s greatest thrills
Is to find a full-paid bill.

9. Horizontal Line

A horizontal line <hr /> is another self-closing HTML tag and it creates a line across your web page within the content area.

---

Horizontal lines not used often, usually to break content into dramatic sections. They are used before or after the introduction of a guest contributor, between complete changes or thoughts or sections, or to highlight specific content. They can easily overused so use horizontal lines sparingly.

By default, a horizontal line is light gray colored, very thin, and goes from the left margin to the right. It can be styled from within the WordPress Theme.

<em>This month's guest post is by Sally Anakanura on how to 
succeed in blogging without really trying. She blogs at
BlogsRUs and works as a content strategist for Bloggers4Hire.</em>

<hr />

A lot of people work too hard on coming up with something
to say on their blogs. I'm going to give you the tips you
need to know to blog without really trying...

10. Code

I cover how to publish code in “Writing and Publishing Code in Your WordPress Blog Posts” and here are the basics you need to know on using the <code> and <pre> HTML tags in a WordPress post, and how to publish code easily in a WordPress.com blog.

The <code> HTML tag is used within a sentence, such as I’ve used it throughout this article. It changes the font to Courier or mono-spaced font that looks like “code.”

The <pre> HTML tag is supposed to display code as it is written exactly, which it sometimes does but not always. It depends upon the code written. It cannot be used in a sentence but creates its own “block” of content.

This is the use
of the <pre> code in a post.
It looks like code but isn't
highlighted as code.

It is good for a variety of ways of displaying statistical information, but WordPress.com includes WordPress Plugins that help you publish code easily.

Using shortcodes, described in Shortcodes in the WordPress Codex and Shortcodes — Support on WordPress.com, you can use the sourcecode shortcode to publish code easily.

[sourcecode language="html"]
write the code here
[/sourcecode]

I’ve used examples of the sourcecode shortcode throughout this post. It creates a numbered line visual of your code with code elements highlighted in colors, and is based on Alex Gorbatchev’s SyntaxHighlighter WordPress Plugin. You can set the language to recognize CSS, PHP, HTML, and a variety of other coding languages and mathematical symbols.

During the course, you will be publishing code and you need to be familiar with this WordPress.com shortcode.

---

The Rest of the HTML Tags Found in Post Content

There are 66 HTML codes permitted in WordPress posts, Pages, and widgets. The less commonly used HTML tags you may wish to use in your post content are:

• <del> and <strike> puts a line through your text to show that it has been deleted or changed such as this example.
• acronym is used around an acronym such as NASA written as <acronym title="National Aeronautics and Space Administration">NASA</a>.
• caption is used by the Media Library when adding captions to your photographs. See Image Settings — Support on WordPress.com for details.
• table is used as part of several HTML tags to create a table of data. See How to Make HTML Tables For Your WordPress Blog for details.

I’ve been publishing on the web since 1993 and rarely have I found a need to use any other HTML tags within the post content. Outside, yes, but that is HTML code found within a WordPress Theme.

If you wish to really test the limits of what you can and cannot publish in in a WordPress post or Page, see Designing a WordPress Theme – Building a Post Sandbox and my series on WordPress.com Blog Bling.