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
Sphere: Related Content
Subscribe
Add to Delicious
Digg This!
Stumble This!
Mixx This!
Sphinn This!
Add to Technorati
