All About HTML

Where did HTML come from?

HTML stands for HyperText Markup Language. HyperText refers to its ability to interact with other documents using HyperLinks, or what we now simply refer to as links between different web pages. (We see HyperText referenced in another common acronym while browsing the web: HTTP stands for HyperText Transfer Protocol.)

HTML is a markup language. This is different from a programming language. Programming languages tell a computer to perform actions. Markup languages tell an interpreter (such as an internet browser) how to display a document.

The grandfather of HTML is GML, which stands for General Markup Language. This was used by an old text editing program called SCRIPT on IBM machines as far back as the 1970s. The text was marked up according to the specifications of GML so that when it was printed out, certain passages would be parsed as headers, paragraphs, etc. Here's an example:

:h1.Chapter 1:  Introduction
:p.GML supported hierarchical containers, such as
:ol
:li.Ordered lists (like this one),
:li.Unordered lists, and
:li.Definition lists
:eol.
as well as simple structures.
:p.Markup minimization (later generalized and formalized in SGML),
allowed the end-tags to be omitted for the "h1" and "p" elements.

Which would be rendered as such:

Chapter 1: Introduction

GML supported hierarchical containers, such as

  1. Ordered lists (like this one),
  2. Unordered lists, and
  3. Definition lists

as well as simple structures.

Markup minimization (later generalized and formalized in SGML),
allowed the end-tags to be ommitted for the "h1" and "p" elements.


How is an HTML file structured?

HTML is defined by a structure called the Document Object Model or the DOM. The person writing the HTML document uses the DOM as a guide to write a structurally sound website the same way an architect uses best practices to build a house. You wouldn't build walls before pouring a foundation. In the same way, the DOM lays out the order and structure an HTML file should follow.

DOM Elements

Every HTML file needs the following tags to be considered valid HTML5 (the current standard of HTML):

These tags are considered elements of the DOM. Other tags, like header and paragraph are also considered elements of the DOM. Some tags, like strong and emphasis can be directly manipulated within the DOM, but aren't considered a part of its structure necessarily. We will discuss the DOM in more detail as we learn more about CSS and JavaScript, but for right now just know that tags exist as elements of the DOM and can be manipulated within the DOM.


Where can I learn more about HTML?

A good place to start when learning HTML is to look at the HTML that makes up simple websites and try to decipher how it's being displayed in the page. You can see the HTML that makes up a page by viewing its source. The way to do this is slightly different in every browser, and this page shows how to do it for all the popular browsers on the web. Try viewing the source of this file. (There are lots of comments in this file to help you understand more about HTML.)

Another nice website to help you understand how different HTML tags work is W3Schools' HTML Tutorial Pages. You can look up information on HTML in general or how individual tags work on this website. I still reference W3Schools all the time when working with CSS, as it's impossible to memorize everything that these languages have to offer.


Lessons: 1, 2, 3, 4, 5

Previous | Next