Posted on April 6th, 2021
No matter your profession or level of technical skill - you should master the HTML programming1 language. It's used everywhere on the internet and is very simple to grasp. Since HTML uses logical standards for rendering content it becomes fairly simple to pickup and learn. More on that later.
HTML is not a difficult language to understand. I also believe it is fairly easy to master, since the core concepts and structure of HTML is so intuitive. Let's look at a made-up example and you'll see what I mean.
Let's pretend that you want to display a page on the big world wide web showcasing your skills at baking cupcakes. Similar to creating a text or Word document on your computer using an application, you probably have a general idea of how the content should be displayed:
Seems simple enough, right? That's because it is. We can now start to work our way through these items one piece at a time.
Since this is the heading of our document (or web page in this context) we will use the HTML heading tag(s):
<h1>My Amazing Cupcakes</h1>
Remember how I mentioned HTML being fairly intuitive? Using h1 tags, you're telling the browser to render the content within this tag as a number 1 level heading → h-1. If you instead wanted to render your headings at smaller sizes (or give them less importance in the document) you can cycle through all available heading tags 2 through 6. Feel free to learn more about HTML heading elements.
A document item like a set of ingredients would normally best be rendered out into a list. HTML has us covered with that as well:
<ul>
<li>Some sugar</li>
<li>Some flour</li>
<li>Some butter</li>
<li>Chocolate</li>
<li>Frosting</li>
</ul>Which would render like this in the browser:
The ul tag stands for unordered list and the li elements inside reference list items. Starting to see a simple pattern here? If you wanted to set your list to display as a set of ordered items, just set the parent tag as ol instead of ul. I bet you probably already figured that out though ;) Feel free to learn more about unordered and ordered list items.
Now, you could set the recipe details/instructions to be set as another list element, but for this example we are going to render them as paragraph elements:
<p>Mix all the ingredients together however you think is best. These cupcakes aren't a real recipe anyway!</p>
<p>Make sure you don't burn the cupcakes. That would suck.</p>I know- you're probably shocked that HTML renders p tags as paragraphs.
The content above would be more than enough for users to read our document and understand how to bake our delicious cupcakes. But a picture is worth a thousand words:
<img src="path/to/your/cupcakes/image" alt="Delicious chocolate cupcakes">Yet more intuitive greatness from the HTML gods! An image is represented within an img tag. You use the src (source) attribute to point the browser to the image's location. The alt (alternate text) is a helpful snippet of text that describes what the picture contains (required for those with disabilities or accessibility issues).
That's it!
By becoming fluent in HTML, you gain a much better understanding on how all websites across the web are constructed. Though a greater understanding of HTML has many benefits, I find having the ability to troubleshoot bugs or issues through a browser's devtools to be the most beneficial.
No matter your current job or future career path, being able to mention your expertise of HTML can only be seen as an added bonus to your skill-set. Do not underestimate the power to build website skeletons!
The other benefits of learning HTML posted above are great - but I believe the best reason to become an HTML master is the web freedom associated with it. You gain the ability to create, edit and share your own website without the help of any 3rd party builders or locked-in content management systems. Instead, your workflow might be something like:
And with free hosting services such as Netlify or DigitalOcean it's not like you'll be breaking the bank to have that website live on the interwebs! (You could go down the rabbit-hole of increasing your web freedom by self hosting your content etc - but I'll save that for another day)
There can only be positives to gain from jumping into HTML and eventually mastering the language. It's the core skeleton implemented across the web (no matter how complex the framework used to get there might be) and isn't going away anytime soon. Some might advocate for becoming fluent in Markdown or a similar formatted text language but I would strongly advocate for the real deal: HTML.
1. This is a common debate - but for simplicity sake I'm just calling it this.