Five Crucial HTML Tags Every Blogger Should Know

By Ali Luke

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 – 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 recognise 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:

HTML-code-showing-paragraphs

<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 other HTML tips to share? Let us know in the comments.

 




Share

16 Responses to “Five Crucial HTML Tags Every Blogger Should Know”

  • Karleen

    Thanks for these html codes, Ali. I already knew most of these, but it’s been a while since I’ve used them. One thing I’m having trouble remembering how to do is after I have inserted an image in my post, say on the left side, I forget how to be able to type in a paragraph to the side of it, so I can sort of wrap my paragraph around the image.

    Currently, I’m only getting maybe one line to the side and the rest goes underneath the image. I’ve tried under both plain and text and haven’t figured it out yet, but I’ll keep working at it. I know it’s doable.

    If you have any ideas about this, I’d love to hear. I’ll come back and check here later. Thanks.

  • nordie

    General formatting like and to spice text up a little and make it interesting?

    Then into controlling font type and size and colour?

  • nordie

    course, that should read BOLD, ITALIC and UNDERLINED (!)

  • Enstine Muki

    Hi Ali,
    Sometimes it’s good to bypass the comfort of the virtual editor and do some stuffs manually. With a better understanding of some few HTML tags, one can always have full control on how to display what

    thanks for the value on the table

  • Sunday

    the blockquote is another important HTML tag every blogger should know. It helps to highlight a quote from another source. All you need do is place the word, sentence, or paragraph text in between the blockquote and the closing tag you will get something like this

    Blockquotes

    This comment was also shared in kingged.com, the content syndication and social bookmarking website for internet marketers,where this post was found.

    Sunday – kingged.com contributor

  • Himanshu

    Hello Ali,
    It’s really a good post for everyone, I also know about these html tags, these tags are very common which everyone using on their website. Sometime, I do mistakes in creating lists but your explanation remove my all mistakes..

    Keep writing such stuff for us… Have a nice day.

  • Raspal Seni

    I use the above html tags almost in every post, since I hand code some part of it. Sometimes, there’s no option than to hand code the post in WordPress – the visual editor just won’t work on a certain thing, like an extra blank line or an extra space.

    So, these two are good tags to use and I think these two are much more important than any other tags. Without these I couldn’t have made my footer pretty on my blogs.

    1. <br/> (Notice there is no ending tag here. Use as many times as many blank lines are required.)

    2. &nbsp; (Use this as many times as many blank spaces are required on the line.)

    Another one, good but not so common is the horizontal line tag:

    <hr/> (Again, no ending tag here too.)

    For anyone who want to learn some html, giving 10-15 minutes a day, you may go and check on YouTube.

  • Raspal Seni

    The tags didn’t show up above, but the ones I typed were the br tag, the space tag and the horizontal line tag.

  • Anish Gupta

    Thanks for this helpful information with us. With the help of these tags, we have to improve the search engine optimization of our posts. It is really helpful information for new bloggers as well as for experienced bloggers too.
    Keep writing these kind of stuff. 🙂

  • Perch

    Regarding the h1’s, apparently google doesn’t like more that one per page.

  • Raspal Seni

    @Karleen: Once you have inserted an image in the WordPress visual editor, clicking/selecting the image will reveal two links – Edit Image and Delete Image. Click on Edit Image. Under the image click on the alignment you want: Left, Right, Center or None. You can try with the left or right align.

    If the visual editor is a problem for you for aligning text and images, you can try Windows Live Writer. Click on my name above to read a post about it. It’s simple drag and drop blog editor.

  • Karleen

    Raspal, thank you so much! After I did what you said, it all came back to me! It’s been awhile since I’ve written blog posts and I have obviously forgotten some things.

    A few years ago I was really into doing some affiliate product sites, but I kind of lost interest when I wasn’t making any money from them.

    So I’m trying again, but with my own blog and hoping to build a list this time, which I never did before. Thanks again!

  • Sybil Bates McCormack

    Thanks for the info. I was long overdue for a refresher on the use of HTML tags.

  • Ali Luke

    @Karleen — Raspal has it exactly. Thanks Raspal for getting there before me! 🙂

    @Sunday — Excellent addition of the “blockquote” tag. I should’ve included that in the post!

    @Raspal and others wanting to type tags: I’m afraid the comments section accepts HTML so you’ll need to use the ASCII code for the < and > signs.

    They’re:

    & l t ;

    & g t ;

    and

    (without the spaces!)

    Hope that helps! Raspal, I’ll edit your earlier comment to add in the code.

  • Max

    A lot of bloggers use WordPress and it’s crucial to know a bit HTML hence. Tags make it easier to format and achieve the result you crave. You get better spacing and alignments if you know tag base.

  • jorge jacobo

    The strong tag. 🙂

Comments are closed.