The 10 HTML Tags You Must Know to Blog

code wordle - group of words that are synonyms and types of codeTalk 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 HTML 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.

WordPress HTML Editor example of a Page


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 HTML 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: &lt;bold&gt;word in bold&lt;/bold&gt;. 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 HTML 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 11 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 of your blog post. 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 , 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.

example of a blockquote.

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.

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 HTML 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 HTML 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 HTML 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 HTML 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.

About these ads

35 thoughts on “The 10 HTML Tags You Must Know to Blog

  1. Hi Lorelle,

    Thanks for such a useful and detailed post. I’m in the process of doing more HTML blogging and less VE, so this is extremely timely for me.

    Also Lorelle, thanks for everything you do for the WordPress community. When I started blogging, you were there offering help and advice and today, you’re here doing the same.

  2. Pingback: Introduction to WordPress Class 2: What Can You Put in a WordPress Post | Learning from Lorelle

  3. Pingback: Creating a WordPress and Blogging New Year’s Resolutions List « Lorelle on WordPress

  4. Thank you very much for your comforting post, Lorelle, I feel like you literally took my hand walking through this intimidating abbreviation-HTML. Now I am confident to do some HTML-ing.

  5. This is a good list. I find myself using and its elements, such as ?, ?, ?, and such, pretty often as well. I tend to setup rows of image links using tables in many of my posts, not to mention displaying records of data occasionally.

    On another note, in addition to the usability enhancement provided by the title and alt attributes of the tag, the tags benefit SEO as well. Google for one, indexes the content of these two tags.

    • Not sure which HTML tags you were talking about, but using a table for images or images with links is deprecated. Use CSS alignment to create your “grid.” Make life easier on you.

      Yes, good HTML practices and standards make for improved SEO but this is highly over-rated. Do it for bigger and better reasons and if SEO is the least incentive, go for it.

  6. Wow! This is a very great post on html editing. Now I”ve got the confidence to face my html challenges. Thanks, Lorelle :)

  7. I use the html editor in wordpress when I mess something up with the visual editor but have not thought about using it from the beginning. It makes sense actually so I guess I’ll give it a try.

  8. Pingback: What You Must Know About Writing on the Web | Learning from Lorelle

  9. Pingback: The Basic Structure of a Blog Post | Learning from Lorelle

  10. It’s really funny that I’ve been using WordPress for about 5 years now but I did not think about the fact that using a double enter (or whatever you call it) created a p tag in WordPress. I just took it for granted :) Like what else would you expect if you use Enter twice?

    • Actually, the “double enter” or “double return” is only for the HTML/Text Editor. It is one enter or return on the Visual Editor. And not all word processors are set up for two hits of the enter key. Most work with spacing after a paragraph built into the style or template or set by the user in their default settings, so they are used to one click.

      It’s always the little things that seem like major discoveries. :D

  11. Pingback: What is a Properly Formed Link? | Learning from Lorelle

  12. Pingback: How to Add Images in Your Post Content | Learning from Lorelle

  13. How can I have a few characters of a line coded w/out coding the whole paragraph. Let’s say, for visual reasons, I simply want to be . I can’t just have one word formatted, it has to be the whole paragraph. That stinks. I’m sure there’s a way to do it, but I can’t seem to figure it out. Something to do with a ‘span’ tag, perhaps?

    Thanks for your help!

    • If you need headings, use the headings tags. Do not use them within a paragraph. If you wish text in a paragraph to be different, use the appropriate HTML tags. Open with one and close it when done. You can have just one word formatted. It does not have to be the entire paragraph.

      If you wish to make a word larger in a paragraph than the rest of the other words, that’s old fashioned and really ugly. It distorts the paragraph spacing. Use bold or italic for emphasis, color if you are desperate to scream a word or phrase at someone.

      If you are using the Visual Editor in WordPress, look down at the tag status “bar” at the bottom of the post edit area (called the textarea). It will display which HTML tag you are using showing you if it is open at that point. To close it with the Visual Editor, click the button again for that HTML tag such as bold or italic.

      If you are using the HTML/Text Editor, you can see the actual codes and modify them accordingly.

      Thanks.

  14. Well… poo. It looks like it took out the precise code I was trying to display. HA!
    I need a word or two to be a different heading in a sentence. Then I need the formatting to go back to the regular paragraph style.

    Thanks again!

  15. Pingback: Blog Exercises: Speed Blogging with CoLT « Lorelle on WordPress

  16. Hi Lorelle,

    Great post!
    I’ve been searching around in Google for this and found this post today. I’ve tried the tag mentioned here and it finally worked !

    Will be visiting your blog often
    Thanks a bunch! :-)

    -Jo

  17. Pingback: Blog Exercises: Blog Work Flows « Lorelle on WordPress

  18. Pingback: The process of creating Site Table of Contents | Janet's Notebook

  19. Pingback: Blog Exercises: The Art of List Making « Lorelle on WordPress

  20. Pingback: Week 3: WordPress and blogging as a platform | Clark College JOUR 111 Class Blog

  21. Pingback: How to Link to Posts, Pages, Categories, Tags, Authors, and Feeds in WordPress | Learning from Lorelle

  22. Wow…talk about the all in one beginning blogger’s post. Thank you very much. Very thorough, clear and easy to understand. Bookmarking this one for sure.

  23. Pingback: Difference between Visual and Text Editor | Clark College WordPress Class

  24. Pingback: WordPress on the Road: Be a Road Warrior | ClarkWP WordPress Magazine

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s