Five Crucial HTML Tags Every Blogger Should Know

A couple of weeks ago, I explained the basics of HTML and why you might want to use it.

In today’s post, I’ll go through some simple HTML tags that every blogger should know about.

You can add extra information within some tags, too, as you’ll see in the examples and for instance if you want position an image centrally, or make a link open up in a new tab.

Keep in mind that you don’t need to type these tags when creating posts in WordPress: you can use the buttons in the visual editor instead. (Or you can copy your post in from Word, with formatting already in place.)

<p>

The <p> tag indicates a paragraph. Each paragraph needs to start with <p> and end with </p> so that your browser knows where to put the line breaks.

(HTML code doesn’t recognize spaces, except the space between two words.)

In WordPress, <p> tags are added automatically by your blog’s code and don’t appear in the Text editor. (You can also choose to add them automatically in widgets.)

If you go to a post on your blog and click “View source” in your browser, you’ll see the <p> and </p> wrapped around each paragraph:

<h1>, <h2>, <h3> … and more

HTML has special tags for headers and subheaders, which are:

<h1> — the biggest, “Heading 1”

<h2> — the next biggest  (this is what I’m using for subheadings in this post)

… and so on down to <h6>

Normally, you won’t use <h1> in your content as that’s used for the title of your blog post or page.

To use a header tag, simply wrap it around your subheading like this:

<h2>Your Next Steps</h2>

<a href> Creates a Link

The “a href” tag creates a hyperlink. If a link ever goes awry, it’s useful to know what the code looks like so you can fix it.

Here’s a link and the code for it:

DailyBlogTips

<a href="http://www.dailyblogtips.com">DailyBlogTips</a>

You can add extra features to your link. For instance:

<a href="http://www.dailyblogtips.com" target="_blank" 
title="This link opens in a new window/tab">DailyBlogTips</a>

This produces a link like this (hover your cursor over it to see the title):

DailyBlogTips

If your link doesn’t work…

• Check that you’ve used straight quotes not curly (smart) quotes.
• Check that you haven’t missed one of the quotation marks.
• Check that the URL starts with http://

<img> shows an image

The “img” tag shows an image, like this one (me and my daughter Kitty on Christmas Eve):

In its simplest form, as for the image above, it looks like this:

<img src="http://www.dailyblogtips.com/wp-content/uploads/
Xmas-Eve.jpg"/>

You can add extras to your image too, e.g. title text (which appears when the user hovers over the image). If you want to center an image in WordPress, use class=aligncenter.

<img src="http://www.dailyblogtips.com/wp-content/uploads/
Xmas-Eve.jpg" class="aligncenter" title="Ali and her daughter 
Kitty on Christmas Eve"/>

Note: This tag is opened and closed in one. The forward slash at the very end of the tag closes it.

<ul>, <ol> and <li> Creating Lists

Here’s an “unordered list” in HTML:

<ul><li>Bread</li>

<li>Milk</li>

<li>Carrots</li>

<li>Potatoes</li></ul>

This displays as:

• Bread
• Milk
• Carrots
• Potatoes

Note how each list item has <li> at the start and </li> at the end, and the whole list has <ul> at the start and </ul> at the end.

To use numbers instead of bullet points, simply switch the <ul> and </ul> for <ol> and </ol>. You’ll get an “ordered list” like this:

1. Bread
2. Milk
3. Carrots
4. Potatoes

 

Do you have a sixth essential tag to add or any other HTML tips to share?