The Best Way to Learn HTML

Learning a new skill is often intimidating at first; knowing where to start, who to listen to, what to ignore - it can be a difficult process to get moving. That's what this post is for. It will help you plan out what to learn and in what order, hopefully making what seems like a big hurdle much lower, keeping you interested and encouraging you to carry on learning!

Before all Else: Take the Jump

This is the most crucial part of any learning process - once you've made the decision to broaden your horizons by learning a new skill you're over the first hurdle! Perhaps you're a designer and looking to move beyond pen, paper and Photoshop, maybe you've previously had nothing to do with the web, it doesn't matter. Now you want to build web pages and with the help of the resources listed below you'll crack HTML in no time.

To begin with we'll talk very literally about the basics of HTML, after which we'll look at resources and assignments to keep the ball rolling.

Grasping the Basics: Your First HTML File

It's important you know what HTML is, so here's a quick definition from the World Wide Web Consortium(W3C) who work tirelessly toward a standardized web:

HTML is the publishing language of the World Wide Web.

The end. That was easy, right? With HTML (HyperText Markup Language) you can create documents ready for publication on the web. Well written HTML markup (as it's referred to) describes the structure of the content within a document. You can specify which bits of the document are headings, which bits are paragraphs, establish simple relationships between pieces of content and even set certain basic behavor.

That said, let's start with your first HTML file. You'll need a plain text editor (such as the default TextEdit on OS X, or Windows Notepad). Now:

• Start a new file.
• Type some text (like the classic "Hello world").
• Save the file, on your desktop for example, as "index.html" (the .html extension is pretty crucial here, but you'll have realized that.)

Now you need your second application, a web browser. There are several main players in the browser market, but whether you use Internet Explorer, Google Chrome, Firefox, Safari or Opera (and there are others), your index.html file will almost certainly open in your browser of choice by default.

What's important is that a browser, when it realises it's dealing with an .html file, knows to process the contents as HTML. Technically, we haven't provided correct HTML code here, but browsers will cut you a lot of slack - the mere presence of the .html file extension tells our browser enough. We've only written a simple line of text, but look at how the browser actually interprets it:

Don't worry about this debugging window for now, it's just used to illustrate our point.

So that takes care of your first step into HTML! You now understand what it is, what it takes to start writing it and are starting to grasp what browsers do with it.

Grasping the Basics: HTML Tags

Before we dive into any resources it's necessary to get a few more basic principles under our belts. You remember the extra pieces of code our browser seemed to add? Those were HTML tags, the building blocks of HTML markup. A tag describes an element and highlights that fact using angle brackets. This is the opening tag of the html element which we saw earlier:

Aside from what's known as a doctype declaration, we use the html tag to kick off our document, then we finish off our document with an accompanying closing tag:

See the forward slash in the second tag? That's what denotes a closing tag. Everything we place imbetween the opening and closing html tags is our HTML document. And that's the first principle of HTML tag pairs; they wrap content of some kind. These two wrap the content of a paragraph:

Assignment 1: Follow a Beginner's Course

Having grasped the absolute basics, it's time to move on and get a firm understanding of HTML fundamentals. There are a couple of courses which I recommend you take a look at, both of which are absolutely free and well worth following from start to finish.

• Codeacademy Web Fundamentals is an engaging, interactive course, covering beginner level HTML before moving on to other things (like CSS). You'll find all the courses at Codeacademy very compelling as you build, on screen, whilst learning solid theory. Earning points and badges adds an element of challenge and competitiveness, plus the reminder emails give you an extra boost if you lose focus at any point!

• Tuts+ Premium 30 Days to Learn HTML & CSS is a series of screencasts presented by Jeffrey Way. Pace yourself by setting aside ten or fifteen minutes each day for a month, watching one bite-sized screencast at a time. As the course itself states "everyone has the right to learn how to build wonderful things on the web".