The Internet's Most Important Language
Tags: beginners, webdev, html
Published: 2020-05-08 12:23:18

## Don't know much about HTML? Here's a starter.

![HTML Hollywood](https://dev-to-uploads.s3.amazonaws.com/i/redt1197xlahdp74w655.png)

Think of a cake. There are some basic ingredients you need – eggs, milk, flour. You mix everything, put it into a baking tin, place it in the oven. I don't know what's happening inside, but in the end, you get a tasty cake. 

In reality, cooking is a process that begins way before the supermarket. Somebody *produces* the butter, the flour, feeds the chicken. We buy these ready to use products and prepare our food.

Nobody *codes* a website from beginning to end these days. We take products from shelves just like in the supermarket. In a digital oven, our code will get transformed in a mysterious way until others can see our website. You can even use a platform like Wordpress which is even easier.

![Buying groceries at a web supermarket](https://dev-to-uploads.s3.amazonaws.com/i/4h378vlzfw3n2c756cgq.png)

Although baking for several years, only recently I became interested in the basics of ingredients. What happens before I buy them? I finally understood the word "buttermilk" when I made some butter myself. Oh my, that took a long time.

Chances are high that you spend a lot of time on the web, especially at this point in time. Maybe you upload content as well. Of course, nobody has to code anymore to do this, you can simply get yourself an account on a platform and start. Even if you're not familiar with code or just began to dive into the code world, you may be curious how web pages are constructed at their core. Maybe you'll experience an aha moment just like me. Let's go!


## The Tower of Babel

File formats are annoying for every one of us. A .doc file can only be opened by a program like Word. Only Word can understand what's inside the file. To our mail program, it's pure gibberish. When Word gets a .doc file, it thinks: *Thank god. FINALLY someone I can understand. Totally HATE this rubbish .pdf and .mp3 files populating the desktop of this stupid person.*

![Opening a Word file](https://dev-to-uploads.s3.amazonaws.com/i/sgk4rd3w28zri96v0ty0.png)

For opening Websites, you need a different program: Firefox or something similar.

**Firefox is a *program*, like Word.**

For this program, everybody knows the term *browser*. The browser can read special files. Not .doc files, of course. But what kind of files exactly?

**In the end, websites are only files.**

Actually, there are files with a .html extension. If you click on one of those files, the Browser will open just like Word will open for .doc files.

![Opening an HTML file in a browser](https://dev-to-uploads.s3.amazonaws.com/i/j0drrjuqryzjhukn9jyg.png)

**An .html file is the base of every(!) website.**

Keep in mind that these files don't exist on your computer, but on servers (big computers). That's why you haven't seen any files with this extension. They are sent to you via the internet as soon as you type the website's name in the address bar. You are basically telling the internet: *give me the file of this website!* That's why your browser has to be connected to the internet and Word doesn't.


## HTML is the old internet grandma

HTML is really basic website stuff. It's holding everything together. Nonetheless, nobody cares. It's there, don't care, old dinosaur.
We call a document with an .html extension an *HTML document*. HTML stands for _HyperText Markup Language_. What does this mean? _It's a document written in a language that can be understood by a browser_. But what's meant with _language_?

**HTML is a language**.

If you want to create a layout in Word, it provides you with a visual interface that you can interact with: buttons, menus, windows. What you see when opening Word is called *graphical user interface (GUI)*.

![Example of a graphical user interface](https://dev-to-uploads.s3.amazonaws.com/i/58dwzvx34ux991juuwun.png)

I didn't know what other programmers meant with *GUI* for the longest time, haha. 

Developers distinguish themselves from the *common mob* by using programs _without_ a graphical user interface. It's very important to only use black obscure windows with unreadable small cryptic text. Only then, you're a real programmer.

![Terminal Windows](https://dev-to-uploads.s3.amazonaws.com/i/kis4o0xnyomjdvttp7z0.png)

Just kidding. It's not Matrix out there. But back to HTML.

You create an HTML document *without* a graphical user interface. Not by drag and drop or selecting stuff, but by *writing* what you wanna do. You program the document, literally. It's the highest level of freedom, congratulations! You write the language which can be understood by the browser manually. You are communicating with machines.

**Tip: never start talking more to machines than to humans.**

HTML is *not* a programming language, developers always emphasize this quite clearly. But even if it's not a programming language, it still consists of cryptic characters, incomprehensible for most of us.

```html
<p>Click <a href="#" target="blank">here</a></p>
```
HTML consists of _many_ brackets, as you can see. Most people will be scared off by this, except the French. Their quotation marks look similar.

Brackets played a big role in my teenage years. Imported from Japan, they were the first opportunity to express emotions visually, without describing them in words: ^_^  >.<  >__< ...
Our parents laughed at us, but look at them now: using smileys way too much! The brackets < and > are called angle brackets, used in mathematics as well. But don't worry – this word will never appear again in this text!

## A short journey to... Switzerland!🇨🇭

The internet and with it HTML was invented by scientists, mainly from a clever person named Tim, who wanted to share his papers more easily. A common person would think: *Well, it will never be possible to show my fancy new paper to my scientist friends all over the world in seconds. What a shame.* But Tim was really smart and invented the Internet and started, as an aside, a new era and we are all now addicted.

Of course, Tim didn't think his idea would blow up this much, because then he would have thought of a more beautiful way to write HTML. Well, now we have angle brackets that don't compare anything or less describe emotional states.

In the next article, we'll explore HTML in a much more practical way.

---

## Interesting links about this topic

Who is Tim?
https://www.britannica.com/biography/Tim-Berners-Lee

A short history of the web
https://home.cern/science/computing/birth-web/short-history-web

HTML intro at Mozilla Web Docs
https://developer.mozilla.org/en-US/docs/Web/HTML

Basic cake recipe (german)
https://www.chefkoch.de/rezepte/773171180182809/Grundrezept-fuer-Kuchen-und-Muffins.html

---

By the way: since this is my first article, please give me some feedback! 💙