Skyscrapers are not possible without girders.

Unless you’ve been in a coma for the past twenty years, you’ve heard the name HTML in passing. If it’s more to you than a pop culture talking point, you already know it’s a coding language that has to do with that internet thingy. If you’re *really* at the cool kids’ table, you know that HTML has evolved from the basic content delivery mechanism of its dark and primitive youth into the progenitor of a family of interconnected languages and technologies that power experiences in a number of devices and spaces. See? Cool kids’ table.

In simplest terms, HTML is the basic structural language of the web. Think of it as the girders.

A Brief History of Lines

We all owe Tim a cup of coffee

(H)yper (T)ext (M)arkup (L)anguage, or HTML, was first conceived by Tim Berners-Lee in 1989 as a system of data and content delivery. As a markup language, it was originally intended to be a formatting method for existing papers and documents to allow for clean presentation online. Through the pioneers pushing the boundaries beyond its intent, it became the first building block of the web we know today.

Berners-Lee finished his beta spec and had browser prototypes up and running by late 1990, community chatter and experimentation begins. A year later, the first 18 tags their usage are published, users are now engaging and becoming creators. As available content increased, commercial development on different browsers was pushed hard. Netscape Navigator and Internet Explorer emerged as early mainstream titans. Usage of this browser-based newfangelry had become a selling point for machines — Microsoft shipped Windows machines with IE starting in 1995, Apple played catchup with Safari in from 1997.

HTML is awesome because it was a dream in Berners-Lee’s mind in one year, a reality that had completely changed the way computers were marketed to the public five years later. One could say that the introduction of the HTML-driven internet is what made computers viable products to the general population, it drew non-techies into the console. It is no exaggeration to say that it changed the world and the way we communicate.

HTML is awesome because it allows everyday mortals to become Webladies or Weblords and publish their own content online — it’s an easy language to work around an existing document (as it was designed for). Malleable enough to act as a platform for a wide variety of technologies, you can choose your own adventure and take a web build in a thousand different directions. And HTML is perfect for any LEGO® fans out there. If you can follow the instructions in a $12 set and build that lil thing, you can code a basic web page.

You would be amazed at how many coders I’ve met who had LEGO addictions as kids, it’s all of them. Every one, without exception.

What It Looks Like

As a markup language, HTML is all about logical and discreet elements, we define these with tags. A lot of the times, tags are named to be intuitive. <img> is an image tag, how a picture gets placed in a document. <a> is an anchor tag, more commonly known as a link, which allows a piece of a document, a word or an image, to be user-clickable and “move” the browser to the related content.

In the above, both of our tags have attributes that help define what they will do. The <a> tag has two attributes, href is where we put the url we want to link to, and we are using target="_blank" to open the link in a new tab/window. The <img> tag has three attributes. Width and height are read as pixels, and the src attribute defines the source of the image. In this case I have used an image with a crazy long url so I’ve shortened it with Bit.ly.

The structural pieces have names like <article>, <section>, <aside> and <div>. Everyone went gorilla biscuits over HTML5 because it established a new layer of semantic based elements for an emerging, media rich internet, things like straight-up <audio> and <video>.

Some tags are standalone, like <br>, <hr> and <img>.

Some are <h3>matched pairs</h3>, using an opener tag (<generic>) and closer tag (</generic>) to wrap their content <div>like so.</div>

And now, with drumroll, here’s the most basic html document I can think of, comments inline.

Certain elements, like <html>, <head> and <body>, are fully intended to be nested, meaning that each has child elements (body and head are child elements of html, h1 and p are child elements of body). The <html> set declares this to be an HTML document, and all visible content wants to live inside the <body> tag. The <head> section is where we keep additional information and resources for the page, in this basic example we’re only including the page title (this is what is displayed in the browser’s title bar or tab).

Additionally, we have a nicely nested code structure, including tab-spacing for indentation, we like to keep our code easy to read and maintain. Minification is the process for reducing whitespace (the excess blank space in code) that has become part of the language of modern page optimization. This string will render the exact same way in a browser as the previous block:

If you see code in a single line like this, it has likely been minimized.

There are obviously some pieces standard to modern web structures that I’m leaving out — all my code nazis please have a seat, enjoy a cruller. This is meant to be the day one intro. 😀 #DBAD

In this next example, we see a structure in HTML5 using many of the new semantic tags, clearly defining a page header, navigation, main content and sidebar.

It is also possible to zero in on generic div’s with specific classes or ID’s for styling or programming purposes. This next example replicates the previous structure, without using the semantic tags. What both of these structures have in common is that the different sections of the page are clearly isolated from each other, and named in such a way that it is fairly easy to “read” what is happening on the page.

Although using different structural tags, both will render the same in raw HTML form.

Unfortunately, there are aesthetic limits on what one can do with HTML, and for all of the awesome, it doesn’t really look that good. This is where CSS comes into play, and you can jump over to the Hello CSS article to learn more about how the two languages work together to look mahvelous.

Again, this is the barest of surface scratches, and HTML can be as deep of a rabbit hole as you want it to be. I can say that the easiest way to learn, the way that I and many of my colleagues learned, is to find sites that are doing things that you want to know how to do, and steal! You can do it all olde timey and pull up a site’s source code, see what the browser is using to render out their goodies. The modern method is to use your browsers’ developer tools, especially the inspector and the console.

There’s also a ton of legit goodies out there, I’ve tried to include a few here to get you started and rolling along.