A beginner's guide to HTML

< A beginner's guide to MyBlogLog : A beginner's guide to search engine optimisation (SEO) >

HTML stands for HyperText Markup Language.  In simple terms, it's the language that's used to display a web page.

In your web browser - Internet Explorer, Firefox, Opera or whatever you use - go to the View menu, and click on Source or Page Source (it varies depending on your browser).  You will be presented with a screen of code.  That code is HTML.  Here's the source of my home page as viewed in Firefox.



It looks a lot nicer in Firefox because of the colouring.  If you use Internet Explorer, you'll usually just see the code in Notepad with no colouring whatsoever.  Not great.

You don't need to know everything in HTML.

Years ago, many people constructed web pages by writing the HTML by hand.  I did it for many years.  It's a good thing to do if you want to write web pages from scratch, or if you're building your own system for other people to use for their sites.

However, these people are in the minority.  Chances are, you use a system that allows you to post content without writing any code at all.  (if not - maybe it's time to look at alternatives!)  So there really isn't much point explaining every last thing about HTML - you just won't use it.

HTML tags.

When you post a blog entry, you can add tags to it - or keywords that provide a little information about your post.  For instance, a recipe might have the following tags: mince, potatoes, seasoning.

HTML includes a variety of tags, but they are not the same as tags on your blog posts.  In HTML, tags are used to structure a web page - not, as many people think, to control how a web page looks.  That is the job of CSS, which deserves its own tutorial.  Confusingly, there are some HTML tags that do change how a page looks.  Let me try and explain why HTML is still for structure, not design...

Organising a document with HTML.

Imagine a long document that is simply a continuous stream of text.  It's pretty difficult to read.  To allow readers to quickly locate information or simply read a document with ease, you need to use some sort of structure.

A typical document might look something like this:



Headers and paragraphs provide two ways to organise your document.  Here's how you might create that text using HTML.

<h1>Header 1</h1>
<p>This is a paragraph of text to demonstrate the structure of a document.</p>
<h2>Header 2</h2>
<p>This is another paragraph of text, again to demonstrate the structure of a document.</p>

At this stage, it does not matter how the page looks.  The important thing is for the page to be structured correctly.

Hyperlinks.

A hyperlink (to give it its full name; link is fine) allows a way for readers to move between pages.  For instance, here's a link to my home page:

Ben Barden dot com

And here's the HTML you'd used to create this link:

<a href="http://www.benbarden.com/">Ben Barden dot com</a>

Images.

If you want to include an image on your page, like this:



then use this code:

<img src="http://www.benbarden.com/file_download.php?id=92" alt="Yvonne Arnaud theatre" />

There's always an exception to the rule.

Notice in the previous examples, the HTML was in the format <tag>content</tag>.  But the image code I just gave you is different; it doesn't have a closing tag.

Worse still, there are actually two ways of doing this:

HTML method:

<img src="http://www.benbarden.com/file_download.php?id=92" alt="Yvonne Arnaud theatre">

XHTML method:

<img src="http://www.benbarden.com/file_download.php?id=92" alt="Yvonne Arnaud theatre" />

The XHTML method is the one that I use.  Which one you should use depends on something in the HTML you're working on: the DOCTYPE.

Getting the DOCTYPE.

A DOCTYPE is basically the document type; it refers to a DTD, which is a document type definition.  This controls the tags you can use in your page.  I'll be looking at this further when I write about validating your code.

Go back and look at the source of the site you use for blogging, if it's already online.  The first line should contain a DOCTYPE tag.  This will say something like XHTML Transitional, XHTML Strict, HTML Transitional, HTML Strict, or just HTML.  If it says XHTML then use the XHTML method; otherwise use the HTML method.

I know this is not the nicest thing to contend with, but I think it helps to be aware of the differences in case someone helps with your code and gives you code that you don't recognise.

OK, now back to a few easier bits...

Giving weight and emphasis.

Want to make certain words stand out?  That's what weight and emphasis do.  This is where you have a couple of options that both do the same thing - silly really - but it may explain more about why HTML is not actually a way to design your page, just a way to organise it.

We can make text bold like this:

<p>One word in this paragraph will be bold.  Can <b>you</b> guess which one?</p>

This is the method I use, but there's another way:

<p>One word in this paragraph will be bold.  Can <strong>you</strong> guess which one?</p>

Two tags that do the same thing!  And there's more.  For italic text, you can use <i>this text will be italic</i>... or <em>this text will be italic</em>!  Crazy huh?

Remember earlier I mentioned weight and emphasis.  Well, "strong" gives extra strength to some content, and "em" gives added emphasis - whereas "b" = bold, and "i" = italic.  Some sites may prefer to use something other than, or in addition to, bold or italic text to make certain bits stand out.  Like this:


I could have used bold text, but instead I did something a bit different.


Now, you might be thinking that's a bit much - but it does stand out, and I'm a firm believer in "less is more" when it comes to emphasis.  In other words, don't do this a lot.  If you use too much bold text, or too much italic text, it just looks unprofessional.

So, although <b> and <strong> are the same, and <i> and <em> are the same, perhaps <strong> and <em> are a bit more descriptive.  When I write my CSS tutorial, I'll be looking at how to make every instance of a particular tag stand out in the way I did above.  (If you're curious, you could just view the source.)

So what next?

This is not meant to be a complete guide to HTML, but I've made a point to deliver it from a slightly different angle from the usual guides you read on this subject.  I've tried to make it easy to understand but I know there's a lot to take in.  So if you have any feedback, please leave a comment and let me know what you think.  Thanks for reading - there will be more tutorials soon.

Comments

Name *
Email *
URL
* Required Fields. Email will not be shown.
Verification:	Type the message into the box below. The letters are case sensitive.
Help Enter your comment:
Rate this article: 5 4 3 2 1 No rating (5 = Highest, 1 = Lowest) Note: if you have already posted a rating on this page, a new vote will not be added.