Introduction
HTML stands for: Hyper Text Markup Language and its job is to describe the structure and content of web pages. HTML is composed of elements that describe what do we want to display in the browser.
A Little Bit of History
HTML was created by Tim Berners-Lee between 1989 and 1990 with the purposes of:
Having a simple standard format to publish scientific and technical documents.
Allowing these documents to be easily shareable with the help of the Internet.
That’s basically all that there is to HTML; A simple standard to write documents that anyone could read and share through the Internet.
This first version of HTML was all about text and links. As time went through, with Internet speeds going up and being more accessible to the regular people like you and me, new versions of HTML emerged to add new features to the language like; New Tags, Images, Sound, Video and even GeoLocation.
The current version of HTML is HTML5, which is what we are going to be learning on this section and it includes all of the features we see above and more.
High Level Overview
HTML is made of ‘elements’ that allow us to describe the
contents of our website. For example, we have a <p></p> element for paragraphs.
As of right now, this <p> element is made out of two tags; <p> and </p>.
Think of these two separate
tags as two pieces of bread in a sandwich; They “close over” the
contents of said sandwich. In our case, HTML tags “close over” the content
that we are trying to represent in our website.
As a simple example, to name the days of the week in a single paragraph of HTML, we’d simply write something like this:
<p>Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday</p>
Notice how we enclose our content with the two tags:
<p> and </p>. The first tag (called opening tag) doesn’t have a slash
and the last tag (called closing tag) does have a slash after the
‘Less-than sign’.
We could define a regular paragraph in any HTML documents as:
- An opening
<p>tag. - The content of the paragraph in the middle
- A closing
</p>tag.
If I wanted to describe something a little bit more complex, like the beginning of Moby Dick, I would do it like this:
<h1>Moby-Dick Chapter 1</h1>
<p>
Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation...
</p>
In this short excerpt we see a new element; <h1> (used for headings)
that describes in which chapter
are we located at the moment, and a paragraph element that begins to tell the story.
Why is HTML important?
HTML represents the basic structure of almost all of the web pages in the world. To make a simple analogy, think of HTML as your bone structure. Without your bones holding your body, you’d be just a puddle of skin and guts on the floor :(
As Front-End/Full-Stack developers we’re going to see a lot of HTML (at least at the beginning of our journey) and to be honest, you could learn almost 90% of the HTML you need to know in a couple of days. It is going to be simple, fun and good for your career.