Parts in this series

Part 2: HTML

This is the second in a series on the order to study topics related to programming. There are countless resources out there for learning to code, so many that it becomes overwhelming to decide where to start. The goal of this series is to help you get introduced to the topic as gently as possible. I’m not writing the instructional content on each topic, but giving pointers to the resources you need to accomplish each section.

In Part 1, I covered why I’m writing this series, and introduced you to your first formatting language, Markdown. In part 2, I’ll discuss HTML, a fundamental building block of all web programming.

HTML stands for “HyperText Markup Language”. Those last two words, “Markup Language” might suggest that it has a similar purpose to Markdown, which is, indeed, the case. While Markdown looks very different from HTML, it actually uses the same structures. Markdown was created after HTML, and the language is specifically designed so it is easy for programs to translate it into HTML. In fact, when you render a Markdown document in whatever markdown editor you are using, it is probably converting it to HTML under the hood.

The first word, Hypertext, has kind of an archaic meaning now. You’re used to clicking “links” in your webrowser. Once upon a time, those were called “hyperlinks”, but it got shortened, as words tend to do (Did you know ‘blog’ is the last four letters of web log?). Hypertext was supposed to suggest “text that has links in it”. Honestly, though, “text that has links in it” describes Markdown better than HTML. HTML looks quite a bit more structured than Markdown, and a bit less readable. Consider the following:

<!DOCTYPE html>
<html>
  <body>
    <h1>I made a web page</h1>
    <p>
        This is it!
    </p>
  </body>
</html>

If you view it in a web browser, this will render similarly to the following Markdown:

# I made a web page

This is it!

In both cases, it might look like this:

I made a web page

This is it!

As you can see, HTML looks a little more complicated than Markdown.

Why HTML?

HTML, like Markdown, is not a true programming language. It is a formatting language that allows you to write plain text and generate a richer text from the result. So the obvious question is, with HTML looking a bit uglier and more complicated than Markdown, why should you learn it? Is Markdown not sufficient?

The main reason is that HTML is used in a wide variety of contexts any time formatting is required. It is the exclusive display language for all web development. All web pages are either written in HTML, or contain components that are written in HTML. It is the foundational building block of the world wide web.

HTML and languages based on it, are also used for formatting in several non-web applications. Some mobile and desktop apps use HTML or HTML-like syntaxes for laying out components, for example.

Finally, HTML is actually way more capable than Markdown. It can be styled to layout a document in different ways, and it has plenty of components that basic Markdown syntax simply can’t support. In fact, you can insert HTML directly into a Markdown document if you need these more advanced constructs!

But for the purposes of this series, the main reason to learn HTML is that it’s relatively easy. It’s a bit harder than Markdown, but not that much harder. Studying HTML will help you understand that computers are really dumb, and do exactly what you tell them to. If you write incorrectly formatted HTML, you will get an incorrectly formatted web page. Figuring out how to fix your HTML when it doesn’t look right will start teaching you the important art of debugging. It can be a frustrating process, but is also be rewarding.

Learning HTML

The most popular site for learning HTML (and several other web technologies) is W3schools. They’ve been around for two decades and still going strong. However, some people find their lessons a little bit terse. If you like that style, then definitely go with it. Otherwise, you might try the guides provided by Mozilla, the maintainers of Firefox, or any of the courses provided by a wide variety of online learning platforms. A quick web search for html course will give you several options to choose from. Try a few until you find something you like. Different platforms have different teaching styles that appeal to different people.

One quick note: HTML is a very “big” language. You don’t need to learn or memorize the whole reference guide; I doubt anyone has! The basics are certainly sufficient. A good rule of thumb might be to learn enough HTML so that you can do anything in HTML that you can do in Markdown, plus a few other tags that seem interesting.

One thing I don’t like learning HTML is that web browsers will try to render whatever you give them even if it isn’t properly formatted. This may seem like a good thing, but it actually makes it hard to realize you have done something wrong, or to learn from your mistakes.

You can use an HTML validator such as this one to check the quality of your HTML. It doesn’t have to be perfect; a lot of HTML validators are pretty nitpicky. But it can help you learn to write better quality HTML code in the long run.

Setting up the software to write HTML

Most of the tutorials you try will give you an online editor that allows you to type HTML in and see the results right alongside the text. Alternatively, you can try a site like codepen.io which provides three boxes, one for HTML, one for CSS, and one for Javascript. You can ignore the last two boxes while you are getting comfortable with HTML; they can be learned later. Either way, you don’t have to download or install any software on your computer to experiment with the language.

If you want to go a little deeper, you can write HTML in any text editor, such as those I mentioned in part 1: notepad, textedit, or gedit. When you save the file to your filesystem, you can open it in a web browser, usually by double clicking in the file explorer or dragging the file directly onto the web browser window.

You’ll notice that the address starts with file:// instead of the normal https://. This is because it’s being loaded from the local “filesystem” instead of a remote “https” site. HTTPS stands for “HyperText Transfer Protocol, Secure”> The H and T stand for the same H and T in HTML; the format and the protocol were designed at the same time. “Transfer protocol” means (I’m oversimplifying here), “a language two computers have to speak to transfer a type of data”.

And secure means, “much harder to hack.” ;-) Older sites still use http:// without the extra s. Any data you request from such sites can be seen by anyone else using the same coffee-shop wifi network you are connected to, not to mention all the computers and routers between yourself and the website’s server.

One last thing: HTML can be hard to read in the plain text editors that came with your computer. More sophisticated editors provide a feature called “syntax highlighting”, which displays different parts of the code in different colours to make it easy to tell apart. It’s still plaintext, the colours are just added to make it easier to read. Codepen does this for you automatically so you can see what it’s like. If you find you like that style of formatting while you write HTML code, it might be time to download a programmer’s editor. If the thought of doing that is intimidating, don’t worry about it yet, but if you want to explore some options, check these ones out:

  • Visual Studio Code (not to be confused with “Visual Studio”, which is much bigger and more complicated) is the one I’ve been using lately.
  • Atom is quite popular among experienced programmers.
  • Sublime Text is also very powerful, although it’s a bit harder to set up than the newer editors.

Note: Be careful talking about text editors with programmers! They all have personal favourites and may try to convince you that the one they use is the one you should use. Use whatever feels most comfortable to you, any editor can get the job done.

CSS: The Optional Next Step

Most tutorials will tell you to learn Cascading Style Sheets or CSS after (or as) you learn HTML. The two go hand in hand; HTML is used to define the structure of documents, while CSS is used to define the layout, colours, and fonts of the page.

If you found HTML particularly interesting to learn, or you are eager to make the web pages you’ve written more appealing to look at, you should do that. If you feel like maybe web programming isn’t all that exciting and you want to try something else, you can skip CSS for now (you’ll know when you need it, and can always study it then).

I’m ambivalent about teaching CSS for a couple reasons. On the one hand, it is logically attached to HTML, and learning the two together teaches you a lot about the structure of web pages. CSS also uses punctuation and layout that is more reminiscent of later programming languages that you might learn. The downside is that it doesn’t give very good error messages when you write it incorrectly. This makes it very frustrating to learn and debug. I’ve been doing web programming for twenty years, and to this day, I get edgy when my pages don’t look the way I want them to look and I can’t figure out why! When you are first learning, it’s important to have useful error messages so you can understand how to fix it.

So my advice is to go with your emotions on this one. Do you feel like the web pages you wrote in HTML are ugly and need some snazz? If so, learn CSS. The websites you used for HTML probably also have useful CSS tutorials; if not, any search engine will be a good friend. If HTML isn’t really grabbing you, then maybe you can skip CSS and wait for part 3 to be published to see what comes next.