🗿 Why Humans Invented HTML - Learning Frontend Deeply - Part 1

Why Should You Read This?

If you have ever watched Kubrick’s 2001: A Space Odyssey, you should’ve noticed its popular cutscene, in which an ape-man throws a bone into the sky and when the bone reaches it’s climax, it cuts into a scene in which a spacecraft is accelerating in the space.

It contains an indirect and heroic message: “The same ape-man who threw a bone into the sky, out of joy and curiosity, was also the same man who sent spaceships to the outer space.”

It’s the idea of evolution. How humans learnt to develop better solutions and tools, based on their past discoveries and knowledges.

But how can all this stuff be related to HTML? We’re living in an age, where the web is rocking! There are web apps, websites, blogs, e-commerce stores, social medias, web games and much more. How could such a thing be related to an ape-man and his bone? The answer lies in how and for what purpose and based on what concepts, previously developed by humans, HTML was introduced.

And this is what we’re going to learn about in this post. Fasten your seatbelts as we’re going to have a blazing journey throughout the history of HTML and the World Wide Web foundation!

Before We Start...

Question: Like everything made by humans, HTML too has been developed in order to overcome a challenge. But what was the challenge and how could HTML specifically help to solve it?

The short answer is that: HTML is the human solution for sharing documents. It's a Markup Language that simplifies the process of structuring documents that can be shared on the context of the World Wide Web.

But the long answer is something more thorough. We should first learn how HTML was developed...

👨‍🔬 Born In A Physics Laboratory❕

No. HTML wasn't meant to create webpages by using the energy released from atom excitation. But it was founded by Sir Tim Berners-Lee, who was in a position in the computing services section of CERN (the European Laboratory for Particle Physics in Geneva, Switzerland) in order to ease the process of document transportation.

Hence Tim came up with the idea of a kind of a Hypertext which could behave like a paper document and let the reader navigate the pages and the contents by clicking on what became to be known as Hyperlinks. And all of these documents were going to be transferred through HTTP (HyperText Transfer Protocol), which helped the physicists access them around the world by having an internet connection.

Surely, the internet we're talking about was different from what it looks today and the initial web browsers and webpages had many differences. Tim's idea for the HTML Document Type Definition was a blend of SGML and Hypertext. But what are these two? Let's find out together.

🦸‍♂️ Hypertext: Texts That Only Superman Can Read

In defining Hypertext we should note that the word "Hyper" isn't used in the sense of a very long text or something that is about 1 million of words. Of course the internet and the Hypertext are useful tools that facilitate the access to billions of pages of documents, but Hypertext specifically means: "Documents that contain special anchors to other documents. These anchors can be accessed via mouse click or keypress or touch screens. Activating these anchors would make the browser jump to another document."

• The Anchor Tag ⚓ (click to expand)

  <a href="http://example.com">Link Text</a>: The <a> tag is one of the main HTML tags. The word a is the first letter of 'Anchor'. And it accepts an attribute called href which stands for Hypertext Reference and it's value is the destination to which the browser must jump, upon the anchor's activation. This tag will render a link on the Hypertext document, whose address is the href's value.

The Hypertext terminology had been known among the academics since the 1940s. But it wasn't until the first graphical PCs came to life, that Hypertexts could become a reality.
The development of Hypertexts on PCs included document files which consisted of buttons by clicking on which, the system decided what content had to be displayed. Those were buttons like next page and previous page or Chapter Titles in a table of contents.

Yet these Hypertexts only worked on a PC and couldn't access documents on other PCs on the other side of the world. For this, Tim decided to implement HTTP.

• Explaining what HTTP is and how it works, is out of the scope of this article. We will learn about it in some future articles of this series where we shall read about ajax.

Then let's see what a Markup Language is and how SGML inspired Tim.

🧾 Markup Language: How To Define Elements In A Document

I have many times come across people on the internet who debated whether HTML is a Programming Language or not. To me the answer can be found as easily as looking up it's name.
HTML stands for Hypertext Markup Language. Well, the name itself doesn't claim it's a programming language but instead it's a markup one. A markup language is a human-readable text that uses tags to define elements within a document.

For a better understanding you can have a look at the current post. There's a title which says 'Why Humans Invented HTML'. Now let's suppose that we need to print a copy of this post and we fancy the title to be printed on the top-left corner of the page. The position is set beforehand in the printer, but the printer needs to know what the title is. Instead of passing the title to the printer separately, we define it in the document itself. But how?
That's where the Markup Language comes to our rescue.
In the text containing the Markup Language we define a title tag and pass it the title we desire. The printer, while parsing the text, would store the value for the title and print it in the correct position.
Here's an example:

<title>Why Humans Invented HTML</title>

The above example uses HTML tags. But since there are different Markup Languages, we could use any of them in their own respective environment.
The following is an example of the Scribe Markup Language:

@Title(Why Humans Invented HTML)

So now that we have a good idea of how a Markup Language defines elements in a document, let's find out what SGML is.

📋 SGML: The Way Markup Languages Should Be Defined

SGML stands for 'Standard Generalized Markup Language'. It's not a Markup Language in itself, instead it's a standard registered by ISO (International Standard Organization) which defines the standards for a Markup language.

• How can SGML be useful?

  If new Markup Languages were about to be developed, this standard can be applied to them in order to make the Markup language supported on different platforms. Since the Markup languages based on this standard behave close to each other and obey the same rules, they can easily be ported to different formats and be printed easily. That's how HTML can easily be transformed into PDFs, EPUBs, XML and etc.

The SGML itself was developed based on GML (Generalized Markup Language), earlier developed by IBM for it's printer devices. A document's structure in GML might look like this:

:h1.The Title Goes Here!
:p.A paragraph about the content.
:h2.A title for a list.
:ol.
:li.List Item 1.
:li.List Item 2.
:eol.

• What's the ':ol' Markup?

  ❗ Notice how ol (ordered list) is used to start an ordered list and eol (end ordered list) is used to declare that the list element ends there.

The Markup would print the following document:

The Title Goes Here!

A paragraph about the content.

A title for a list.

1. List Item 1.
2. List Item 2.

SGML replaced :tagname. :etagname. with <tagname></tagname>, which was also implemented into HTML.

Now a new question pops up. How did HTML implement SGML?

✅ HTML Comes To Life.

When Sir Burners-Lee, first began to publicize his idea about sharing Hypertexts through the internet, it became well known among the researchers who taught it would become the main communication tool in the future.

• What did companies think about the HTTP at first? (click to expand)

  The big companies like HP or IBM saw it useful only for the researchers who wanted to share their documents and make referencing simpler. To them, the communication future depended heavily on the telephone companies and the solutions they could find for its development.

  Well as it turns out they were wrong. Right now the WWW is the home to billions of websites, which nowadays are about more than just the research and the official documents.

But even so, Tim was alone at first. He had to use his own computer abilities to bring his concepts into reality. He blended other concepts like Hypertexts, SGML and etc. and also developed his own sharing protocol which is HTTP. Then he was able to gather small teams and develop the world of communication!

But what did the HTML look like at the beginning?

HTML: The First Version.

For a real example you can visit this page: The World Wide Web Project
The above link will redirect you to the first page ever written in HTML. If you want to see how the page was Marked up, you can do so by right clicking on the browser page and selecting 'View Page Source', or other options like this.

We can have a close look at it's source:

<HEADER>
  ...
</HEADER>
<BODY>
  ...
</BODY>

The source as you can observe consists of human-readable tags. There are two main tags: <HEADER> & <BODY>.

Now that we've learnt that a Markup language tries to stimulate a paper document, we can easily understand what these two tags are about. They define the two main parts of a document: 'Details' & 'Contents'. It's like many document folders you can find in offices and schools and elsewhere. Chances are you have yourself written such a document too.

Let's zoom into the <HEADER> tag:

<HEADER>
  <TITLE>The World Wide Web project</TITLE>
  <NEXTID N="55">
</HEADER>

Since this is a very elementary version of HTML, just two tags have been defined inside <HEADER>.

One of them is title, which is simply a title or a name given to the current document. Since browsers have to inform the user about what they are looking at; the title is what the browser, shows at the top most position.

• The title is one of the most important elements in a HTML document, based on the fact that if no title is defined, the user must rely on the HTTP Address URL to identify what document he/she's looking at.

The <NEXTID> tag was used in the elementary HTML versions and produced by the Next HTML editor to generate name attributes for Anchor tags. It's a long-deprecated tag and honestly I myself don’t perfectly know how it was used. 😅 It's not used anymore.

How can a deep understanding of HTML's development help you in developing modern web?

• I can guess what you might be thinking by now: All we've learnt thus far, is how Markup languages have been developed and resulted in HTML's creation. But the facts about documents and their paper-like structures might seem irrelevant to how the web environment functions and looks nowadays.
• But that's the trick about it. Nothing has really changed. Everything you see on the web, from the HTML5 games to the Progressive Web Apps to the smoothly maintained animations and SVG graphics, all this and more is built upon document structure concept. This concept is known as Document Object Model or DOM, which I will write about in the next part of this series.
• I know reading this might seem boring and long and time consuming, but I can bet that by gathering this knowledge you can dive deeper into HTML5 Semantic Tags, Best CSS Layout Practices, SEO and How a Search Engine will treat and analyze your web application's <body> and <head>, JSX's data pipeline and how a Virtual DOM can become real and many more things.
• Believe me, these are all based upon the simple Hypertext idea 😊.

Now that you're again full of energy and motivated to search for the deep roots of HTML, let's see what an HTML document BODY is.

This is how the <BODY> part is written in the example above:

<BODY>
  <H1>World Wide Web</H1>The WorldWideWeb (W3) is a wide-area<A NAME=0 HREF="WhatIs.html"> 
hypermedia</A>
  ...
  <DL>
    <DT><A NAME=44 HREF="../DataSources/Top.html">What's out there?</A>
    <DD> Pointers to the
    world's online information,<A NAME=45 HREF="../DataSources/bySubject/Overview.html"> 
    subjects</A>
    , <A NAME=z54 HREF="../DataSources/WWW/Servers.html">W3 servers</A>, etc.
    <DT><A NAME=46 HREF="Help.html">Help</A>
    <DD> on the browser you are using
    ...
  </DL>
</BODY>

What the body renders is a set of elements. Each element is identified by using tags. What text you put inside a tag is called its inner text and tags that you nest into it are called it’s children. The main tag itself is called the parent.
The inner text is the part which is printed in the browser page.

Question: But why should we use such sibling terms like children and parents for a HTML structure?
Answer: Because the HTML Document Structure behaves in an inheriting way.

The inheritance concept becomes more important when you need to handle layout, positioning and display. There's a good example in the above HTML markup which demonstrates how inheritance helps in layout designing.

The tag <DL> defines a Description List. What a Description List demonstrates is a list of items with each of them having a description of their own.

The above example uses <DL> to show a list of Hyperlinks. It can be said that each Hyperlink is written like a term, which in turn is defined with a description to tell the user about where the Hyperlink leads them to. This is the obvious purpose for the implementation of the DL in this document. But there's also another use for it...

It's layout. If you're already familiar with web design and CSS, you'd know how CSS properties like Flexbox or Grid help with the layout.
But the initial Hypertext project had defined no way of styling. And this was for good reason. Because Burners-lee anticipated the fact that HTML had to only contain document structure and markup, concluding that the styling logic shouldn't be implemented in HTML itself. This made HTML more flexible. One document structure could be styled in different ways, either by the user or the author or the browser.

• What is Flexbox or Grid? Hell, what is CSS? (click to read if you don't know)

  CSS stands for Cascading Style Sheets. A style sheet is a set of rules that apply styles to a document. And cascading means these rules act like cascades of water which override everything beneath themselves.

  Thus certain style rules can be changed or overridden in certain parts of a document. This property is different from HTML's inheritance behavior and will be covered in future parts of this series.

  
  

  Flexbox and Grid are some properties of CSS used for HTML layout. They align contents in a list-like and table-like way respectively.

  
  

What this means is that the description list element is used to give the printed (or the rendered) content some visual layout and structure.
The structure is implemented by showing only one Hyperlink on each line and it's description in the next line. This structure makes it easier for the reader to read the document.

I hope this example has demonstrated how the HTML documents were initially structured. Even the newest HTML versions follow many of these rules. So you can observe how and for what purposes HTML was developed.

And That's All For Now...!

We've come a long way, describing many things, that you may have already known.

• But what I was trying to achieve by writing this long article, was to give you a fundamental sense of how the frontend technologies have been defined.
• In my opinion, it's all based on the document structure, whether it's about online video meetings or social applications, or graphical animations.
• Having a firm knowledge of the markup language and the inheritance methodology will surely help us throughout our journey to learn frontend deeply.
• One important thing about the DOM is the usage of the semantic tags. You've seen different kinds of these tags in this article. They include title, h1, list and etc. Such tags are semantic in the sense that they let the browser know what role their content has in the document.
• For example, a h1 tag means that its text is the most important title in the current document and surely its text contains some important and descriptive information about the current section.
• Learning semantic tags is important for SEO, layout and even mastering the declarative and component-based programming. And in the latest definitions of HTML, newer semantic tags have been introduced which play a key role in developing better frontend applications.
• In the upcoming parts we're going to use the knowledge gathered in this article to dive deeper into the sea of the frontend programming!

Feedbacks please!

This is a long post, and it took me a while to write it down. And since I'm planning to extend it into a series I would like to know your opinions and ideas about it.

And most important than all: Many things written in this post can be categorized as opiniated explanations. Therefore opposite or better explanations and theorizations might exist. If you have such ideas, please comment them.

In the next part we'll be back with the DOM.

Thanks for the reading! ❤️