All the HTML you need to know

February 4, 2008 – 9:09 am

Why in the world would you want to learn HTML when you have a nice little WYSIWYG editor in your favorite website tool? It allows you to bold, italicize, change colors, the whole nine yards right? Sure it will do that, but how many times has that editor frustrated you because it added extra space between paragraphs, created links wrong or other some such anomaly?

HTML to the rescue

Never fear my niche site building friend. HTML isn’t quite the monster that you might think it is. However, before you go and buy a book or start reading a ton of tutorials on the subject, I’m going to give show you almost everything you will need to know. The problem with books and other such tutorials is that they cover all of HTML. This is OK if you really want to know as much as you can, or you want to build templates for your favorite website building tool, but the fact is you only need to know a small handful of HTML tags to be really productive.

Hold on, what exactly is HTML?

To put it simply, HTML is a markup language. It stands for Hyper Text Markup Language. It is made up of tags and attributes that tell the browser how to display the content. HTML as a whole has come a long way and combined with Cascading Style Sheets (CSS), can be quite powerful in what it can do.

The Tag

The tag is the fundamental element. A tag starts with a less-than sign the tag name and a greater-than sign. The content of that tag comes next, followed by the closing tag. The closing tag has the same name, but has a less-than sign, a slash, the tag name, then the greater-than sign. Like this:

<tagname>some content here</tagname>

Simply enough right? The closing tag is important as it tells the browser when that tag is complete. This is really important for layouts, but we won’t go into those too much.

Tags can also be nested, so a number of tags can be inside of other tags, like such:

<tagname>some content <a href=”#”>here</a>

But we are getting ahead of ourselves…

The Attribute

An attribute belongs to a tag and provides extra information for the tag. In most cases attributes are optional, but in other cases, like an anchor tag, without the appropriate attributes the tag doesn’t ‘do’ anything.

The are a couple of common attributes regardless of the tag. These are the class and id attributes. Both of these attributes are used in conjunction with style sheets and even javascript. An id specifies this specific tag instance, and as such it is unique. The class attribute is used to denote that this tag belongs to specific grouping of styled elements. An example would be table headers, or headline tags, etc. I’ll cover styles and CSS in a later tutorial.

Enough background, let’s learn something

As I mentioned, there are a handful of basic tags that you will use when entering content into your blog, store builder or other content system. Let looks them in more detail.

The paragraph tag

The paragraph tag is the mainstay of what you will use. It is a simple single letter tag, ‘p’, and as its name implies, it denotes the content as a paragraph. Here is an example:

<p>this is a paragraph</p>

Pretty simple yes? Paragraph tags should not be nested.

Text formatting

There are a couple of basic formatting tags that you might use. These include the bold and italic tags.

<b>This text is bold</b>
<i>This text is italic</i>

Again, pretty simple. The bold tag has an alternate called ’strong’. They both do the same thing, and while the strong tag is supposed to supersede the bold tag, hardly anyone uses it.

Links

Hyperlinks are marked up with the anchor tag. Why isn’t it called ‘link’ instead? Well you can create anchors on a page that don’t actually ‘link’ to another page. It is another single character tag, that being ‘a’. Let take a quick look:

<a href=”http://nichesiteblogger.com”>Text Link</a>

In this example we are linking to http://nichestireblogger.com and the text of the link is Text Link. The way the href attribute is specified is very important as there are two ways to link to something. The first is using an absolute URL, the second is using a relative URL.

Absolute URL

This type of link is an explicit location to somewhere, whether that means to an external site or not. There are two way to specific an absolute URL. The first is by using the http:// prefix, which is exactly as if you were to type in a location into a browser address bar. The second was is to start the URL with a single forward slash: ‘/’. This means start looking at the root of this website. For example, if you were on page site.com/category/subcategory and you created the link: <a href=”/test”>Test</a>, this is the same as going to http://site.com/test.

Relative URL

Relative URLs are, as their name implies, links that are relative to the current location. This type of link causes more frustration than anything else. Using our previous example, if we start at site.com/category/subcategory and create the link: <a href=”test”>Test</a> (note the missing slash at the beginning), this will take us to site.com/category/test. A couple more examples starting with site.com/category/subcategory:

<a href=”../test”>Test</a> - This means “go up one directory then to ‘test’. So it will result in site.com/test

<a href=”test/anothertest”>Test</a> - This will result in site.com/category/test/anothertest

Images

The last tag we will cover today is the image tag. The tag name is ‘img’ and has one required attribute, ’src’ which gives the location of the image. The src uses the same path style as an anchor tag as they both point to a location. This means that you can use an absolute or relative URL to the image.

An optional attribute is ‘alt’. While optional, you should use it as much as possible. What this tag does is define an alternate text to be displayed if the image could not be displayed (or the user has images turned off), but more important it is used by search engines so they know what that image is. Here is an example image tag:

<img src=”http://site.com/images/image.jpg” alt=”Here is an image” />

Note that the image tag is an ‘empty’ tag, in that there is no content between the opening and closing tag. In the example above, the tag is self closing, which is just shorthand for doing <tagname></tagname>.

Putting It All Together

So let us take what we have learned so far and create a simple paragraph:

<p>This is a test paragraph. <b>This line will be bold.</b><i>This line will be italic.</i><a href=”http://mogul.webmogulenterprises.com”>This will go to the author’s blog</a></p>

Which generated looks like:

This is a test paragraph. This line will be bold.This line will be italic.This will go to the author’s blog

With these few simple tags, you can create most of the content you will ever need when using some kind of content management solution. I hope you found it useful and don’t be afraid to ditch the fancy editor. You will be surprised how quickly you end up typing tags and much more clear your content becomes. Next time we will cover cascading style sheets. Lots of fun!