Franca

Posted on May 8, 2020 • Edited on Nov 13, 2020

Hands-on HTML and Why All Programming Languages Look So Cryptic

#beginners #webdev #html

Computers need rules

Computers can read, it's called parsing. They read one character after another, like H-e-l-l-o. It looks like an elementary student. Most of us have learned reading by hiding the following letters with some piece of paper to not get confused, slowly uncovering letter by letter.

We don't want the computer to read everything in the same intonation – there should be headlines, paragraphs, important sections. Even the driest paper needs a line break at some point.

The HTML language concept

HTML isn't about the looks of a website, but it helps to structure it, prioritize, divide content into sections.

To be able to do this, HTML's inventor Tim picked special characters which normally don't occur in texts: angle brackets. Symbols which immediately shut out the non-programmer.

I still remember looking at HTML for the first time and it felt just wrong. Being a designer, it didn't look visually pleasing. It looked scary, not human-readable. It felt like looking at something that I was not supposed to see, almost like looking at organs inside a human body, which is not far away from the truth.

<p>Click <a href="#" target="blank">here</a></p>

So, why do we need these scary brackets again? To section the content. The browser won't read the brackets as normal text. On the contrary, it will stop and look carefully at the character. For everything the computer isn't supposed to just display but to interpret, we need special symbols and keywords. This is the reason for all programming languages looking like somebody just randomly pounded on the keys...

Rules for the browser #1

normal letters: continue reading
numbers: continue reading
angle bracket: STOP!!

It would look like this:

Hello bla bla bla < Oh! Hold on. That's a special character. We aren't supposed to read this out loud.

Rules for the browser #2

special character < : Don't read it, start listening.
special character > : Ok, continue reading...

Let's try to add a heading to our text.

Bla bla bla <Now a heading, please> My glorious heading ✨

The browser doesn't really understand English, it reads the characters bluntly one by one. But it knows that angle brackets do have a special meaning and it is not supposed to display them on the page.

Tim had to think about what to write inside the brackets. How could we label a heading? He decided on h1 for an important heading: h for heading and 1 for important.

The three puzzle pieces of HTML

It's always the same:

open the bracket <
add the abbreviation for the content h1
close the bracket >

The brackets hug the content. You always need them both. It's like a little family: 👩‍👩‍👧

Bla bla bla <h1> My glorious heading ✨

<h1> won't be read out loud, only what follows afterward.

That's very short. Tim, as every smart person, loves abbreviations. His train of thought is so complex that it needs quick tools in order to not forget his thoughts.

For people that know the English language (like Tim), h1 is simple to remember. Others have to get used to the fact that the world of programming is based on the English language and western culture. But we can still shape the future, my friends!

Let's look at our heading again. If we continue writing, everything after h1 will be part of the heading – that's what we told the browser.

Look at the black and white rectangle below. It's a small website preview.

On the left side, you see the HTML. It's the representation of a .html document.
On the right side, you find the visual result which is displayed by the browser. It's like an opened .html document.

We don't want the paragraph to belong to the heading. Our heading should look more like this:

Bla bla bla <h1> My glorious heading ✨ <Ok, now STOP IT!> This is a paragraph again.

You have to tell the browser in some way to stop thinking everything that follows should be read the same way. Like a good story, it needs a beginning and an end.

Almost done! The last step to write valid HTML

As always, the end needed to be nice and short. Tim had the idea to use h1 again, but this time with a slash /:

These brackets and the abbreviations inside it are called tags. Don't get confused with the tags on Instagram. <h1> is the OG tag, my friend.

Every tag consists of 3 elements, remember the family. 👩‍👩‍👧
To create a heading, you need two of them:

The opening tag <h1>
The closing tag </h1>

Inside these two tags, you add the content. Look at the result:

Here's a flock of sheep. The sheep is our content. They graze inside a fence, which has an entry and an exit. You always need both: entry and exit.

Tags are not visible on websites but they are all over the place. Everything you read is put into tags that get interpreted by the browser.

Silent instructions to the browser how to display our websites.

But, as said before, secret writing. There are many tags: paragraphs, quotes, line breaks and so much more. The browser obediently reads them all.

A heading with a paragraph would look like this:

<h1>My glorious heading ✨</h1>
<p>I don't know what I'm doing here</p>

Here's a new tag, the <p>, which stands for paragraph. We use it all the time.

In my previous article, we learned about HTML meaning HyperText Markup Language. Every language that consists of tags is called Markup Language. HTML is not the only one, for example in React you need XML.