Learning HTML

In January 2011 a user at StackOverflow asked, if he should start learning HTML5 / CSS 3 or begin with the older versions. In quite a length I answered the question by explaining my way to web development over the years. I think, that the answer might serve others well, too, who seek a way to start with web development. Since the original question was just recently closed as “not constructive”, I’m putting the answer here for others to read.

First of all I’d like to thank the SO users μBio, Divya Manian, Alerty and BoltClock, who edited the answer and helped improve it. The original question can be found here.


Learn Simple Things First

For the most parts (and especially if you start learning), it holds, that HTML 4 is a subset of HTML 5 and likewise CSS 2 of 3. Therefore my suggestion is to start learning the ‘old’ techniques first. This is especially motivated by the fact that the HTML5 and CSS3 specifications are way larger than their older counterparts. (In the News: This just in: "HTML" is the new "HTML5".)

There is another problem with HTML5 tutorials: They pop up like daisies on a soft spring morning, which is per se a good thing. But as rookie you will have difficulties to decide if a given document aims at beginners or, more likely indeed, at people with experiences in (X)HTML, who want to learn the differences. It is easier to get confused by such an HTML5 intro, than by an HTML4 tutorial (there was not really a big difference between HTML 3 and 4, apart from paradigms [table-based layout, font tag, stuff like that was discussed then]).

‘My Way’

Everyone is different in her/his learning behaviour, so let me summarize the way I came to web development.

  • I didn’t have anything in mind with web development until I was a Physics undergrad student. Then I thought: ‘Well, it would be nice to have a customized start page for my browser.’ It was 2004, and iGoogle wasn’t invented back then. That’s it. You have a small project and you start to work on it.

  • I had the luck, that in the German speaking world there is a great resource for getting started with HTML: SelfHTML. Unfortunately, the site hasn’t had much updates since back then and their English counterpart went even out of business. Please don’t use the aforementioned W3Schools. However, I can’t point you to any good English tutorial apart from the specifications (see below). You might have luck finding a good course in the School of Webcraft, which is a joint venture of Mozilla and P2PU.

  • After finishing my browser start page, I created a homepage for our RPG group. It was several HTML pages and I quickly found out about CSS, and that you can have a single stylesheet to apply to more than one HTML pages. This is where I first started to think about the structure of the many files that had accumulated (in terms of ‘in which folder comes which file’).

  • Apart from that, you will find, that you have to learn a lot more accompanying technologies:

    • I wanted a private area for our group and learned about HTTP Authentication.
    • Having files lying in sub-directories brings you very fast to the matter of URLs and relative and absolute paths.
    • For our FAQ section I wanted to have some interactivity: Clicking on a question should display the previously hidden answer. That was my entry point to JavaScript. My experience is, that I benefit now much from having learned ‘real’ and basic JavaScript and not just copy and pasted jQuery snippets that I googled. (Well, it was Prototype, back then).
  • The next logical step is to move from static HTML files to something generated on the server. I took a very good beginner’s course in PHP and MySQL (it’s IMHO the simplest server-side technology to get started with) and got a bit of PHP-enabled web space at our university. A good ‘Hello World’ project was a guest book for the RPG website back then (well, today you’d just throw in a Disqus link).

  • Now I came to the frontiers of tutorials and references. I first really looked in and began to read the original specifications. It started with the official PHP manual and went on to the HTML 4 specification, single definitions of CSS properties in the W3C’s CSS 2 spec and so on. In hindsight this is another point I’d like to emphasize: read the specs as soon as possible. There will be parts that you don’t understand yet, but there is no better source than the source.

  • From there on it was a constant learning with many new technologies that require at least a bit of attention, but sometimes also a fundamental understanding: the DOM, CGI, SVG, XML, the difference between XHTML and HTML, Regular Expressions, Python, mod_rewrite, nginx, XSLT, PDF, RSS, RDF, Bash, SSH, Git, SVN, XSS, Unicode, Web Fonts, Dublin Core, JSON, SQLite, … (all links go to Wikipedia).

  • Finally you will come to a stage, where you need to specialize. The range goes roughly from "I’m a designer. I don’t touch no nasty code ever." to "B2B JSON is the best thing since JBoss and Hibernate. Good, that I don’t need Photoshop for this." I’m still trying to follow the naive approach to keep up to date in as many areas as possible, but I can foresee, that this strategy won’t be successful for long. In less than 5 years from now (and even today) you will find job descriptions for ‘canvas developers,’ ‘multimedia markup strategists,’ ‘cross-platform user experience experts,’ ‘specialists for legacy Flash code and table-based HTML Email templates,’ ‘offline cache security gurus,’ ‘web storage database engineers’ and so on. However, having at least a basic understanding in areas around your main interest will help to keep you flexible enough for new ideas and approaches (and, more important, old and tested ideas and approaches to problems you think are new).

Please, I don’t want to discourage you, when I say, that there’s a lot more to learn than HTML and CSS. I see it more as a wonderland of opportunities and technologies that lie at my finger tips to be used to create cool stuff. And the more you learn, the more powerful your projects will be.

In-Depth Learning

When you have found a direction, that interests you most, you should start learning the backgrounds of your chosen path. This might seem a bit contradicting to what I said above about keeping a broad overview, but it is more a completion.

For example, if you tend to be a back-end developer, start looking into different algorithms, parser theory, cryptography, profiling code, building compilers and so on. The topics you encounter there might have no direct relation to your day-to-day problems, but they build the foundation of what you use today. As such, many problems were solved before, that re-occur today in slightly different form.

If you become a markup specialist, look into text-manipulation tools. The Unix tools like sed, awk and grep have got a bad name as being old, arcane cruft, but this is totally unjustified. They, too, solve problems, that you will face in your work.

For becoming a web designer you have to get into color theory, typography (both macro and micro), grid theory (which existed way before the web) and, at least, basic psychology.

Pay Attention

The problem is learning from the wrong resources. I’d suggest, if you are in doubt, ask here on StackOverflow for opinions (better perhaps, ask over at chat.stackoverflow.com. And basically, the closer to the source a doc is, the better.

A personal warning: Leave your hands from WYSIWYG editors and such, like Dreamweaver. You may use an IDE or any editor with additional support (Eclipse comes to mind), but my travel went the other way round (from GoLive to Notepad++ to finally Vim). That’s a matter of taste. But if you have the slightest thought, that the software hides something from you or auto-creates anything that you haven’t told it explicitly to, leave it alone.

A basic measurement is, if your software let’s you choose the encoding of the file (ISO-8859-1, UTF-8, ...) and if or not to put a BOM in front of an UTF-8 file.

Again, don’t get discouraged, if you get completely confused by any of the following resource. There are documents linked here, that professionals use as daily references.

Basics

  • W3.org - The organization, that standardizes HTML and CSS
  • developer.mozilla.org - The developer resource of Mozilla, the Firefox organization. There are some good tutorials on HTML, CSS and cutting-edge web development, too, and IMHO the best JavaScript reference currently available online.
  • msdn.microsoft.com - The HTML/CSS docs from Microsoft
  • Safari Reference Library - Very Apple and Safari centered, but may have the one or other good reading, too.
  • Opera Web Curriculum - Thanks to @What’s answer for this one. Opera’s Web Curriculum is a good summary of important technologies.
  • Validator - A validator checks your code for errors. The one here is from the W3C and is one of the most important tools in a web developer’s toolbox.

Tutorials

  • HTML5 Boilerplate - A project that is aimed to allow fast bootstrapping of web sites and web applications based on HTML5, jQuery, and so on. It’s worthwhile to read through the source code, since there are lots of best practices bundled together
  • A List Apart - THE publication aimed at web developers and people around them. A lot of useful and important methods and practices to work with HTML and CSS were published here.
  • Dive into HTML5 - the website accompanying the book of the same name. It’s especially targeted to teaching HTML5, so perhaps it’s from time to time hard to follow for a newbie. But it’s well-written and accurate.
  • CSS Zen Garden - “A demonstration of what can be accomplished visually through CSS-based design.” This site shows astonishing examples of HTML 4 and CSS 2 in action.
  • 24 Ways - The web developer’s Advent calendar. Very interesting articles of well-known people are collected in packs of 24 each year.

Overviews

  • quirksmode.org - A site dedicated to browser and compatibility tests. If your page looks all different in Firefox, IE and Opera, you should stop here.
  • History of the WWW a nice to read introduction of the W3C, how the early years of the web (up to 1995) went by
  • zvon.org - If you look through the ‘references’ and ‘tutorials’ sections, you will find stuff, that is not easy to follow but therefore it’s quite accurate
  • Jacob Nielsen’s Alertbox - Although not un-criticized this page offers a huge set of usability studies by Jacob Nielsen.
  • Periodic Table of HTML Elements - A very nice and intuitive display of all elements in HTML5
  • CSSPlay - Stu Nicholls’ playground for many cutting-edge CSS tricks.

Specifications

  • w3.org/TR/html4 - The official HTML 4 specification with description of all elements and attributes. Might be useful, but defer to HTML5 specification for most up-to-date reference on how modern browsers interpret them.
  • WHATWG.org is where the most active and live version of the HTML5 specification exists.
  • w3.org/TR - A list of all specifications under the roof of the W3C (mostly related to XML, HTML and CSS)
  • w3.org/TR/CSS2 - The official CSS 2.1 specification
  • CSS3 & others - The current work being done on Stylesheet standards.
  • ECMAScript Specification - ECMAScript is the name of the standardized version of JavaScript. Frankly, I hardly ever looked in it. Mostly I use the reference on mozilla.org. There is an annotated web version at es5.github.com.
  • Likewise for the DOM. The official specifications lie scattered at the W3C, but in the dark ages Netscape and IE implemented their own versions.
  • RFC 1738 - defines, how URLs are composed
  • RFC 1945 - defines HTTP 1.0, the transmission protocol that delivers pages over the internet. RFC 2616 defines its successor HTTP 1.1
  • php.net - The homepage, together with the official documentation, of PHP
  • Unicode Consortium - If you leave the ASCII world and enter multi-language terrain, you will inevitably make acquaintance with UTF-8 and Unicode. Better be friends with them ASAP.

Others

  • Smashing Magazine - I often find interesting articles about web design and frontend development here
  • JSFiddle - This site let’s you play around with HTML, CSS and JavaScript and shows you the result instantly. Perfect for testing and if you want to share short snippets of code (e.g., for a StackOverflow question)
  • XAMPP - A simple way to create an ApacheI remember, that one of the things that costed most of my time when setting up a web server for the first time, was figuring out, which web address to enter at the location bar. Usually, it’s localhost. (web server), MySQL and PHP environment on Windows or Mac OSX
  • Microformats.org - This is a bit advanced: Microformats try to express machine- and human-readable data at once in HTML. It sounds scarier than it really is, and from looking at how they try to accomplish things, you can learn much of how HTML elements and attributes should be used.
  • CSS Resetr - CSS resets are quite en vogue since ~2007. These are small CSS stylesheets, that revert most of the default styles browsers give to elements (like the large, bold text and the margin of h1 elements). CSS Resetr let’s you play with different reset stylesheets of certain fame. I list it here, because it may give you a nice insight in what CSS rule affects which elements.
  • FontSquirrel @font-face generator - That’s a nice way to play with the @font-face property of CSS 2.1. Look at the source, that gets generated for inspiration. Apart from that, you can use the Google WebFonts Directory for production.
  • When can I use… - Shows in charts CSS3 and other properties that are cutting-edge, and the browser versions that support them.
  • FireBug - If you develop in Firefox, you won’t go ever without this addon. Trust me (and thousands of others).
  • The Elements of Typographic Style Applied To The Web - A website, that expresses the hints and the wisdom of "The Elements of Typographic Style" (Robert Bringhurst, warmly suggested reading) in terms of CSS and applied to web technologies.

StackOverflow Questions / Answers

Books

Actually, I’ve never used a book to learn HTML or CSS. But then, HTML 4 and CSS 2 are much more light-weighted than their newer counterparts. Quite blindly I can suggest books published by O’Reilly. The dozen or so (bash, Python, XSLT, …) I have from them are all well-written and technologically correct.

Final Note

I am constantly learning new things and improving and deepening my knowledge of already learned technologies. If you start with HTML and CSS, and if you want to do it seriously, you will find many problems on your road. You’ll see code, where you have no clue, what it does, or how it even is valid. After some time you will have your first experience with security and its holes (and I’ll wish you these to be soft and not related to credit card details 😉 ).

But if you keep your eyes open, utilize often and early the "view Source" menu item, and ask questions (here, as a comment below an interesting blog post, ‘ask Google’), you will be a the top of people, who build the way the world is experiencing its information. And, over all, it’s fun!