Understanding why Semantic HTML is important, as told by TypeScript.

HTML isn’t just the foundation that we build our websites on it plays a vital role in making our websites function as expected across those platforms and technologies. If you use HTML to it’s full potential from the beginning, you’re not just making the most out of built in features you’re making it more functional for people, bots, and for any tech, not just now but in the future as well.

With the increasing focus on JavaScript in Front End Development and the seemingly increasing devaluing of HTML I recently spent some time trying to figure out how to explain to JavaScript orientated developers why understanding and learning HTML was important.

This brings me to:
“ Understanding why Semantic HTML is important, as told by TypeScript.”.

TypeScript Interface about a dog.

TypeScript can often be found on JavaScript heavy tech stacks, if you aren’t familiar with TypeScript this post probably isn’t for you.

If you are still intrigued, TypeScript is essentially a typed JavaScript language that does everything JavaScript does plus some extra stuff. It makes use of static typing so, for example, you can give your variables a type when you write your code and then TypeScript checks the types at compile time and will throw an error if the variable is given a value of a different type.

A simple example of a Typescript Interface defining a dog.

interface dog {
name: string
age: number
isFluffy: boolean

Here I defined my interface called dog. I have a name with a type of string, an age with a type of number and isFluffy with a type of boolean. (All dogs are good but they are not all fluffy).

If I try to give name a value that is of the type number TypeScript will throw an error and say, WOAH, you said you wanted a string, you’ve supplied a number, and it will give you an error.

We essentially tell TypeScript what we expect it to be and this makes debugging, writing, reading and working with our code a lot easier because we are being explicit about what shape our data should take.

This is essentially what we do with our HTML. We are explicit about what our content should be.

Simple Semantic HTML example

We specify whether we want a heading, what kind of heading it should be, whether its a list, a header, navigation, bold, italic, dates, image, paragraph, section— there is a whole suite of elements we can choose in order to best represent our content.

And we do this to define the shape of our content to make it easier to write, read and work with, not just for us, but other technologies as well.

In TypeScript, we have the concept of an any type. When you assign a type of any it means the content can be anything. So name can be a number a string or even a boolean value. This might be useful on occasion but if everything in your interface is typed as any then you lose the benefits of the language.

interface dog {
name: any
age: any
isFluffy: any

You no longer get the type checking, and the safety that Typescript provides, it becomes pointless.

Image demos simple HTML page using only the <div> element

This is the same with HTML. If you use the <div> everywhere, you aren’t making the most of language. Because of this it’s important that you actively choose what the right element is and don’t just use the default <div> .

To quote Jeffery Zeldman

“…to build for people and the long term, then simple, structural, semantic HTML was best — each element deployed for it’s intended purpose. Don’t use a div when you mean a p” — Jeffery Zeldman

That’s it pretty simple. Get to know the HTML elements available to you, and use the appropriate one for your content. Make the most it, like you would any language you choose to code with.

Note: I’ve had some criticisms of this article not giving enough good reasons for Semantic HTML. The purpose of this post was not to give you an in depth run down of the many reasons that semantics is important, so apologies if the title was misleading. What I was aiming to do was try and provide a simple analogy to something which a lot of JS developers are familiar with and understand.

There are many great resources out there on HTML and it’s value, so I highly recommend reading up on it. Here are some places to get started.

Lover of CSS, and Batman. Front End Developer, Writer, Speaker, Development Manager | Founder & Organiser @fendersperth | Organiser @mixinconf