Oh, HTML. The backbone of the Internet, the mother of all markups, and the language that just refuses to die despite its quirks. Hypertext Markup Language, or HTML, was created by Tim Berners-Lee in the early 90s as a way to structure content on the web. It's been through several revisions, iterations, and countless headaches for developers. Let's dive into the wonderful world of HTML and reminisce over what makes it such an "endearing" language.
But first, a history lesson! In 1989, Tim Berners-Lee proposed a new way to share documents between researchers at CERN - you know, the place with the particle-smashing Large Hadron Collider? HTML started as a simple system for adding structure to plain text files. The first version had 18 elements - compare that to today's HTML5 with over a hundred! Oh, how far we've come.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Look at me! I'm an HTML page!</h1>
<p>Exciting stuff, right?</p>
</body>
</html>
It's no Shakespeare, but this simple example showcases what HTML does; transforming plain text into an "interactive" webpage with headings, paragraphs, and other elements. The stuff dreams are made of… or nightmares, depending on your view.
HTML's primary purpose is to structure content. But humans are greedy creatures, never satisfied with just the basics. Enter table layouts. Early on, tables were used to display… well… tables – think spreadsheets. But soon they were utilized for overall page layouts because alignment controls were scarce (and quite frankly, terrible).
<table>
<tr>
<td>Why?</td>
<td>Did?</td>
</tr>
<tr>
<td>We?</td>
<td>Do?</td>
</tr>
<tr>
<td>This?</td>
<td>To?</td>
</tr>
<tr>
<td>Ourselves?</td>
<td>*</td>
</tr>
</table>
Fast forward, and CSS eventually came to the rescue, preventing us from using tables for layouts. Phew! But wait, there's more!
Frames seemed like a good idea at the time – a way to divide your browser into separate sections, each with their unique content (I can hear the groaning already). These, too, were thankfully relegated to the graveyard of web design.
HTML5 was an essential update, not only adding new elements and features but also redefining some old favorites. <video> and <audio> replaced Flash, <canvas> made drawing possible right in our browsers, and <aside> and <nav> improved semantics. Hallelujah!
<video width="320" height="240" controls>
<source src="amazing-video.mp4" type="video/mp4">
Your browser doesn't support the video tag. Get with the times!
</video>
Then there's contenteditable, a handy attribute that lets you edit any text directly on... an element! Need to fix a typo? Easy peasy!
<p contenteditable="true">Go ahead, edit this text. I dare you.</p>
But let's not forget the lovely "text/html" MIME type, which graciously allows us to write non-XML-compliant HTML (cringe). C'mon, who needs proper nesting, closing tags, or well-formed code? That's overrated!
Alright. We can't talk about HTML without mentioning accessibility. But, really, who needs it...? Just kidding, accessibility is crucial. HTML5 has made strides in this department with elements like <figcaption> and attributes like aria-*. However, many developers still overlook accessibility best practices (cough link-only navigations cough).
<figure>
<img src="image.jpg" alt="A very important image">
<figcaption>This is a caption that actually describes the image!</figcaption>
</figure>
HTML has come a long way, and we've laughed, cried, and groaned through it all. So next time your browser renders a jumbled mess because you forgot to close that one pesky tag, remember: HTML is only as annoying as the hands that wield it. Embrace the quirks of this surprisingly resilient language and hope it keeps evolving for the better.
Grok.foo is a collection of articles on a variety of technology and programming articles assembled by James Padolsey. Enjoy! And please share! And if you feel like you can donate here so I can create more free content for you.