HTML, Grandfather of the Web: What it is and why it matters

Written by Santiago Castro
Technology

HTML stands for HyperText Markup Language and it is the standard markup language for creating web pages. It was first developed by physicist Tim Berners-Lee, a contractor at the European Organization for Nuclear Research (CERN), between 1988 and 1991, and is still the basis of the world’s 4.2 billion web pages. It can be combined with scripting languages (like JavaScript) and the style sheet language CSS (Cascading Style Sheets) to render and run dynamic and visually complex web pages. The current iteration of HTML, HTML5, became the standard in use after 2014 and continues to be today.

Why was HTML created?

In 1989, Berners-Lee was one of many physicists working in the computing services department at CERN when he faced a common challenge: he wanted a way to exchange and share research information between labs, without having to send papers and documents in ways that required download on multiple computers. Berners-Lee came up with a simple solution: why not create a system by which documents could be linked within themselves to other documents, so you could create a “web” of documents in and of itself?

Little did Berners-Lee suspect that what he envisioned would become an idea that would practically take over the information world. He created a hypertext language, where “tags” inside each article would allow data, images, and information from other texts to appear directly as a link from within each piece. By clicking a button, you could jump from a research paper by an American team exploring particle physics, to a French study exploring the same topic or theme.

The hypertext language he created for the sharing of scientific research became the basis for HTML.

How does HTML work?

The genius of Tim Berners-Lee’s idea -- and the likely reason it became the basis for the web as we know it today -- was its simplicity. While hypertext languages had been in development and in use since the 1940s, only Berners-Lee’s version was built to be easily read and understood on any computer, and shared across any system, using the new, and newly popular, Internet.

Based on SGML (Standard Generalized Mark-up Language), Berners-Lee’s HTML broke text up into blocks, and marked these blocks in easy-to-remember, easy-to-use, and very simple ways. Like SGML, HTML uses paired tags to indicate how text should be rendered by any computer processor, anywhere. For example, a title would be coded between the tags <TITLE> and </TITLE> , a paragraph by <p> and </p>, a heading between <H1> and </H1>, etc.

Where Berners-Lee broke new ground, however, was with hypertext links. Unlike any hypertext language before, Berners-Lee’s “HREF” attribution allowed authors to imbed access to another article in the body of the piece they were publishing, so that an image or link on one piece of information could be connected to another one elsewhere, and so the www.word.com method was born. Before this original idea, hypertext didn’t have a reliable or consistent way to communicate from one machine to another, from one page to another, across systems and styles of processes -- across the one, unified internet.

Even today with HTML5, the coding system is essentially the same.

The following remains true:

All HTML documents must start with a document type declaration so that a computer reading the code knows it’s about to process HTML: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

In effect, it looks like this:

<!DOCTYPE html>

<html><body>

<h1>My First Heading</h1>

<h2>My Second Heading</h2>

<p>My first paragraph.</p>

</body></html>

This basic HTML script, if applied to a web page would look like this when rendered online:

My First Heading

My Second Heading

My first paragraph.

For more information on how to build a basic web page using HTML, plenty of simple tutorials exist online. The following is one such helpful example:


How to Learn HTML

As we’ve seen above, HTML is a “markup language,” and it uses things called tags to create format or links for content when it’s rendered online. Each tag is enclosed within angle braces <Like This>. With almost all tags, they have corresponding closing tags </Like This>. We see this in the above example, where <html> is paired with its closing tag </html> and <body> is paired with the closing tag </body>.

Once you understand this basic concept, learning HTML is the process of learning a number of those tags, which will determine how you want your web page to look, from headings to textual qualities (like bold, italics, underlined, etc), or more. There are hundreds of such tags, for rendering forms, lists, media, video, and more.

For Berners-Lee, web pages were tools for scientific expression, so style and aesthetics were of minimal importance -- not to mention graphics, animations, and other dynamic features. But today, coupled with CSS, JavaScript, and other features, web pages can look a multitude of dynamic and wild ways, but no matter what, they all are built on the sturdy platform of HTML.

For those starting out in their journey of web design, there are myriad languages and technologies to learn, but it all starts with HTML. It is the backbone of all web pages, landing pages, online applications, and more.

Want to learn? We recommend starting with some simple HTML tutorials, and then, once it gets easier to understand, explore CSS and JavaScript. It’s the basis of everything that’s come since, but it never hurts to start from the beginning!

--

If you want to stay up to date with all the new content we publish on our blog, share your email and hit the subscribe button.

Also, feel free to browse through the other sections of the blog where you can find many other amazing articles on: Programming, IT, Outsourcing, and even Management.

Share
linkedIn icon
Written by Santiago Castro
LinkedIn

With over +16 years of experience in the technology and software industry and +12 of those years at Jobsity, Santi has performed a variety of roles including UX/UI web designer, senior front-end developer, technical project manager, and account manager. Wearing all of these hats has provided him with a wide range of expertise and the ability to manage teams, create solutions, and understand industry needs. At present, he runs the Operations Department at Jobsity, creating a high-level strategy for the company's success and leading a team of more than 400 professionals in their work on major projects.