HTML for Bloggers

If you’re a new blogger, you need to understand the basics of HTML; whether you want to leave a comment on another blog, or you want to include a text widget on your own blog, knowing some basic HTML helps.

To help you do this, we’ve created a basic bloggers HTML cheat sheet for you to download, print up, and refer to.  If you are unfamiliar with HTML, read this post first for a brief overview, or scroll down to the end if you want some online resources to learn more about HTML.

Note: This is by no means a complete guide to HTML, but we’re fairly confident it will give you a good start. If you have any questions, or suggestions, we’d love to hear them.

What is HTML?

HTML stands for Hyper Text Markup Language; simply put, it’s a language used to create Web pages.   It contains embedded commands called tags that are interpreted by a Web browser; these tags allow you to format your text so it appears as bold, italicized, links, headings, lists etc.

Basic HTML Jargon

Command: A command is what you want the browser to do.  For instance, make something bold, or create a list, or link to another site – you are commanding the browser to do something.

Tags: Tags are where you place your command and are represented by the less than and greater than symbols: < >.

Generally, each command will have two tags; the opening tag [always <>], and the end tag [always </>.   In the space between them is where you put the text you want to manipulate.   Occasionally, you will need to use a single tag; this happens with image and line break commands, but they are more the exception than the rule.

Opening tag: The beginning or opening tag is always represented as

Less than symbol, command, greater than symbol e.g.: <command>

End tags are always represented as:

Less than symbol, forwardslash, command, greater than symbol e.g.: </command>

Note: Most commands require the end tag.  Of all the commands listed in the cheat sheet, only the line break command <br /> requires no end tag.

Attribute: Certain commands can be modified further by using specific ‘attributes.’  For instance, when using the font command (telling the browser which font you want to use), you can further modify it by adding a ‘color’ attribute, which will change the color of the text, or the ‘size’ attribute, which will change the size of the font.   A space must always precede the attribute.

Tip: Commands are not case sensitive. However, convention calls for lower case.

Note: Stylesheets (CSS) may override some attributes. As we are not talking about CSS coding here, this should not apply to you.

A few things to keep in mind:

Tags Used for Headings are Important for SEO

Headings range from H1 (the largest), to H6 (the smallest).  This is important to know for SEO purposes. If you think something deserves to be a H1 because it is important, Google too sees it as important, and gives it more weight than it would give a H2 or H3.  It is important to remember with H1 tags, that you should only use one per page.

If you want a thorough understanding of heading tags, take a look at Stoney deGeyter’s post: How to use Hx Tags over on the Search Engine Guide blog

Bold vs. Strong Tags, and Italic vs. Emphasized Tags

There is some confusion about which command is best to use when creating italic text and bold text; let’s just clear that up quickly.

Originally, the bold tag was represented as <b>.  A new command has now come along, known as the strong tag <strong>.  While they do much the same thing, the sturdier of the two is <b>, as <strong> does not necessarily work in all browsers yet. To play it safe, use the original <b> for bold.

The same applies to the italic tag.  Originally represented as <i>, the newer command is <em>.  Again, the sturdier is <i> and should be used to ensure your italicized text appears correctly across all browsers.

Useful HTML Online Resources:

Online HTML Tutorial:

W3 Schools offers free tutorials and references relating to web development, from basic to advanced.
Their references cover all Web-building technologies, including W3C standards like HTML, XHTML, CSS, XML as well as other technologies like JavaScript, PHP, ASP, SQL.

Additionally, with their online HTML editor you can edit the examples and experiment with the code as you learn it.

W3Schools HTML Primer
W3Schools HTML Tutorial

Other online HTML Resources:

HTML Basics 101: from The University of South Dakota

WebMonkey: Free public resource for Web workers

Color Lovers : Thousands of colors and their HEX values; searchable.

Cheat Sheets:

Bloggers HTML Cheat Sheet (PDF)

More advanced HTML Cheat Sheet from Added Bytes

Tags: , , ,

16 Responses to “HTML for Bloggers”

  1. Rob Wilson says:

    Nice summary – Having taught several people how to use wordpress with a plugin WYSIWYG editor you still can’t avoid teaching a little html. One day editors will really work well…

  2. [...] Tutorial |   Lid of Blogwell has written a very good intro/primer to the basics of HTML in HTML for Bloggers.  The topic is tackled from the angle of a novice blogger so I am sure many people will find it [...]

  3. [...] of Blogwell has written a very good intro/primer to the basics of HTML in HTML for Bloggers.  The topic is tackled from the angle of a novice blogger so I am sure many people will find it [...]

  4. Jhangora says:

    Thanx a lot for the tips :)

  5. [...] Cheats for BLoggers BlogWell Posted by root 7 minutes ago (http://blog-well.com) A basic html cheat sheet every blogger should know commons attribution share alike 3 0 unported license powered by the wonderful world of wordpress www Discuss  |  Bury |  News | Cheats for BLoggers BlogWell [...]

  6. [...] Under HTML-fliken kan man göra finjusteringar som inte går att göra i Visuell-fliken. Här kan man ibland rätta till mindre fel i till exempel punktlistor, eller när en fetmarkering inte vill försvinna. Mer information om HTML finns här. [...]

  7. tips on trading…

    [...]Cheats for BLoggers | BlogWell[...]…

  8. I too cannot get the carriage return to work

  9. stasvavilovsky says:

    Всем привет!
    Давно не заходил сюда. Пароль забыл, пришлось заново региться.
    Искал я тут недавно где кредит взять в Вологде, наш местный сайт.
    сайт нормальный такой. кредиты в Вологде

    На нем все предложения, от всех банков плюс адреса. :)

  10. I have you bookmarked to check out new stuff on this post

  11. ztj photovoltaic cell energy is good for the
    nation. The chairman and chief executive of Scandanavian Advanced
    Technology, a Norwegian ztj photovoltaic cell
    energy firm.

  12. This design is wicked! You definitely know how to keep a reader entertained.

    Between your wit and your videos, I was almost moved to start my own blog (well, almost.

    ..HaHa!) Great job. I really enjoyed what you had to say, and more
    than that, how you presented it. Too cool!

  13. Rolex Explorer II Duplicate Vigil This vigil comes streamer with a Rolex Caliber 3185 engine, so you can count on your vigil working when you need it the most.

  14. Wе’re a group of volunteers and opening a new scheme in our community. Your web site provided us with valuable info to work on. You have done a formidable job and our whole community will be grateful to you.

    Here is my page … Знакомства Сочи [xakiveli.webuda.com]

  15. This iѕ my first time go to see at here and i am actuallу pleassant tο rеаԁ all
    аt single рlace.

    Μy ρage :: Знакомства Нижний Тагил (http://awypanycirub.comoj.com)

Leave a Reply