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:

Okay, we're going to look back at our original index.html file one more time, then I promise we'll actually talk about learning resources. You see how the html tags are wrapped around other tags? That's referred to as nesting. Tags can wrap around other tags. Then those tags can even wrap around more tags, and this nesting can go on indefinitely. Like exponential Matryoshka dolls..

In this way we can build up sections of a web page; a header which contains headings and horizontal rules. Paragraphs which contain anchors and spans. Footers which contain lists which then contain links. This is the basis of building HTML structure.

Take a look at this illustration. At the top is the HTML markup, underneath is a visual representation of how the elements are nested within one another.

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!

Track every aspect of your achievements as you learn

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".

Jeffrey takes you through each and every aspect of HTML basics

Assignment 2: Choose a Code Editor

Enough academia for the time being, let's take a break and checkout some tools to make our HTML coding easier. So far I've only suggested simple plain text editors for creating your HTML files. These are perfectly fine, but there are code editors available which you'll find far more intuitive to use.

The key advantages of using a purpose-built code editor are:

Syntax highlighting: Having your HTML tags display in one color, your content in another, comments and the various other aspects of HTML markup in yet another, makes for a much clearer document. Most code editors provide a number of different color schemes to choose from; some dark on light, some light on dark, some subtle, some... less so. Often, members of the community will put forward their own color schemes too. Go with whatever works for you.
Code completion and hints: What's the correct tag to use for a table header row? I'm always forgetting. Luckily, many code editors will suggest tags and syntax for you once you begin typing. Some also provide extensive language documentation, so you can go and look up whatever it is you're confused about.
Project management: Having all files at your finger tips is always useful when building a web project. Most code editors will show you your project file structure, allowing you to drill down folders, check assets and manage files quickly.
Line numbers: A subtle advantage to a basic text editor, but seeing which line of code is on which line number will help enormously, especially when looking for errors.

There are many more advantages, but those will become apparent once you get more involved with writing code. So then, what are your options? Here are just a few:

Sublime Text 2 $59. Possibly the most popular choice amongst developers these days, Sublime Text 2 has the massive advantage of having an extensive community behind it. Take a look at Tuts+ Premium's Free Perfect Workflow in Sublime Text 2 course to find out more.
Coda 2 $75. OS X only, I'm afraid, but still a very popular code editor. We covered Improving Your Productivity: Quick Tips for Coda a while back on Webdesingtuts+
Brackets Open Source. This is one of Adobe's latest ventures into supporting HTML, CSS and JavaScript standards; a code editor built with those very technologies. It's early days for this code editor, but it looks very promising and uses interesting approaches to some interface aspects.
TextMate $53. OS X again, sorry, but for a long time the favored editor by code junkies.

For more information about the many code editors available to you, check out A Web Designer’s Guide to Coding Apps and 18 Wonderful IDEs for Windows, Mac, and Linux.

Assignment 3: Build Something!

It's high time you got your hands dirty and put your newfound skills to practice. Challenge yourself by building the HTML markup structure for the following things:

A blank HTML page: That may not sound very interesting, but building an empty page will familiarize you with a standard HTML document and its components. Remember the !doctype, the <html> tag and the <body>. Concentrate on the <head> tag and all that lives nested within it, such as the <title>, <meta> tags and <link> tags.
A blog article: Typographically speaking, an article can hold all the important players of HTML markup. Begin with an <article> itself, perhaps a <h2> heading, <p> tags of course, maybe dotted with <em> tags for emphasis, or <strong> text. You could even use less obvious markup like a <blockquote> and a horizontal rule <hr>.
Portfolio thumbnails: Things can start to get a little more complex now, but don't forget; you're not actually styling any of this, you're just trying to structure the building blocks in the cleanest and most logical way possible. In this case, you could use an unordered list <ul>, with list items <li> to hold each of the thumbnails. Each thumbnail would likely comprise an image <img src="" alt=""> (which will give you chance to play with the src and alt attributes) wrapped in an anchor <a href=""> which will link to a larger version. Plenty of nesting goodness there.

Keep your markup clean and indent nested tags to help readability. Also, get into the habit of leaving comments to help others who may need to work with your code:

1	<div class="test">
2	<p>This is the content of the test div.</p>
3	</div><!-- end of test div -->

Check Your Work

Having built something in HTML, it's time to check it. Head on over to validator.w3.org and run your work through the validator. It's not always vital that your markup is 100% valid, but aiming for that big green slap on the back is a great way to keep your standards high.

Bonus!

Once you feel confident building imaginary structure, why not turn your hand to an actual design? Look at a layout design and imagine how it's formed in terms of markup.

Article, by Brijan on dribbble

Assignment 4: Swot up on Markup

It's important you learn where to use which elements

Now you're comfortable building HTML structure, it's time to improve your vocabulary. Whilst writing markup you need as many element tags at your disposal as possible (and there are quite a few).

It's important you learn where to use which elements, not for styling purposes, but in order to describe your page content in the most appropriate way possible. This is what's referred to as semantics.

If a chunk of text is intended to be a paragraph within your layout, use a <p> tag to enclose it. Don't use a <div>, for example. Using semantic markup makes your web pages efficient, more accessible to browsers, screenreaders, search engines - even other devices which haven't been invented yet! Take care with describing your content properly and you're helping the web grow into a better place, believe me.

Here are some solid resources which cover HTML elements and their intended purposes:

html5doctor.com is a collaboration by some of the industry's keenest minds, making clear how we should be using semantic HTML.
HTML Elements on Mozilla. Note the little 5 icons by some of the elements? They denote that those elements are recent additions to the HTML specification, currently referred to as HTML5.

Assignment 5: Read a Book

Having books on hand is always great for referencing things, or even (surprisingly enough) reading from cover to cover. At this stage in your HTML journey, take time to get hold of a couple of reference books. I recommend:

HTML & CSS Design and Build Websites - worth getting hold of for the presentation quality amongst other things.
Decoding HTML5 from Rockable Press - This book offers a great insight into the political workings behind HTML standards.
HTML5 FOR WEB DESIGNERS from A Book Apart - If you don't yet own an A Book Apart publication, this is as good a time as any to introduce yourself.
Introducing HTML5 by Bruce Lawson and Remy Sharp - starts to get a little complex in terms of other functionality HTML5 offers, but this is one HTML book definitely worth checking out.

Assignment 6: Take Part in the Community

Here's the best part of being a web professional: community. Whenever you have a question, or a problem, there is always someone out there who's encountered the same thing and will be willing to help you out. Go and join in on forums and creative communities, ask for help and offer up advice once you become confident enough to do so!

Get involved by taking part in the following communities:

Stack Overflow: the best technical Q&A community out there. You're learning HTML? There are quite a few threads already underway..
Forrst: a great place for creative and technical feedback on projects you're working on. It's invite only if you want to participate, but hang around the corridors long enough and someone will let you in..
GitHub: primarily an open, online repository for storing and versioning your own code, GitHub offers learning through seeing how others "do it". Many of the projects on GitHub are intimidatingly advanced for HTML beginners, but bear this one in mind for the future.
Creattica: is an online community for creatives. Give and receive feedback on your latest HTML projects.

Aside from the communities, social networks are the perfect way to interact with your HTML heroes, pose questions and offer opinions. Here are a couple of Twitterers worth following for their HTML prowess:

Assignment 7: Speed up Your Markup Workflow

By this stage you have a handle on what HTML is, which elements are currently used, how to structure semantic markup, who the industry players are and you're ready for the next challenge! The next logical step would be to concentrate on CSS; styling the HTML markup you're now proficient in writing. First though, let's see if we can speed up our markup workflow with a couple of alternative approaches..

Markdown

Markdown allows you to write using an easy-to-read, easy-to-write plain text format.

Markdown is a more readable way of writing HTML content markup. It alleviates a great deal of tag-coding by switching all that nonsense out for less-complex syntax. Once you've written your Markdown document, run it through a parser (such as Dingus) to churn out the familiar HTML equivalent.

For example, we're now familiar with these HTML heading tags:

1	<h1>This is an H1</h1>
2
3	<h2>This is an H2</h2>
4
5	<h6>This is an H6</h6>

The Markdown equivalent would be:

1	# This is an H1
2
3	## This is an H2
4
5	###### This is an H6

meaning that you wouldn't need to worry about closing tags - and the indented nature of the Markdown headings makes the hierarchy visually much clearer, more readable to human eyes.

Markdown is becoming increasingly popular and you'll find it integrated into code editors and content management systems. In terms of writing web content it's ideal. Take a look at the syntax page for more information, or check out our recent tutorial Quick and Easy Documentation Using Markdown.

Emmet

Emmet speeds up your markup coding by parsing and converting abbreviated code. For example, instead of manually typing out:

1	<div>
2	<ul>
3	<li></li>
4	<li></li>
5	<li></li>
6	<li></li>
7	</ul>
8	</div>

you would use the abbreviated form:

1	div>ul>li*4

Emmet (previously known as Zen Coding) is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow:

What this literally says is "output a div, which contains an unordered list, which contains four list items".

Depending on the application you're using, you would then hit (for example) TAB and Emmet would process that abbreviated syntax, outputting HTML markup like the original example. The time-saving potential should be very clear already, and Emmet does much more than our simple example here.

Emmet can be used with a number of code editors and applications, take a look at Improving Your Productivity: Quick Tips for Zen Coding and 7 Awesome Emmet HTML Time-Saving Tips for more help in getting started.

Conclusion

Following a learning plan like this and making the most of the resources mentioned will send you on your way to HTML success. Learning a new skill opens doors, who knows where this skill will take you?

Next step: Now you have some HTML skills under your belt, take a look at The Best Way to Learn CSS.

Any learning suggestions are very welcome - shout out in the comments!