HyperText Markup Language (HTML)

HyperText Markup Language (HTML) is the backbone of the web, and is contained on almost every webpage that exists.

History

Like so many things in software development, HTML started as a problem that needed to be solved. CERN researchers found their ability to share information with each other was disorganized at best, and researchers were worried the lack of a central source of information would mean that information would be lost, especially on larger projects.

To solve this problem, Tim Berners-Lee created a program internal to CERN that defined a structure with which scientists could share information with each other. This program worked well for them. Based on this project, Tim Berners-Lee proposed an internet-based markup language to allow for easier information sharing over the internet. This was the proposal for HTML.1

So what is HTML?

To understand the purpose of HTML, we should first understand where the name comes from. Breaking it down, there are two things we should care about:

HyperText

HyperText is text which contains links to other text you can immediately access, and these links are called Hyperlinks. This Playbook is an example of a simple collection of HyperText, as throughout the book you can click on other links to go to a different section of the book, read something external, etc.

Another example of HyperText is the Wikipedia article on Hypertext. In this article, you can click to other articles, descriptions, references, and read them instantly.

Markup Language

A Markup Language is a standard set of rules that are defined for writing text. We use Markup Languages to ensure that text is written in a standard way that can be understood by computers, and processed accordingly. By following the rules of a markup language, computer programs are able to understand the intent behind how you'd like your content to be displayed.

Other examples of markup languages aside from HTML include Markdown and LaTeX.

Putting it together: HTML

HTML then is a set of rules on how to create documents that can be linked together. Web Browsers understand what the rules mean, and so they will link web pages together without you needing to do any additional work to make references work.

Lecture Exercise - First HTML Page

HTML Pages are very simple and can be created in just a few lines of code. Your existing web browser already knows how to handle HTML files, and so you don't need to install anything to get up and running right away. Try the following:

  1. In your COMP205 directory, create a new file. Call it hello_world.html
  2. Copy the text below into the file.
  3. Save the file, and exit.
  4. In your File Explorer, double-click on the HTML file to open it.

Your file should open up your default web browser. You just created your first web page! It's a pretty boring web page, but it's a web page. If you send this page to someone else, they'll see your heading in larger, bold text, and your regular text. This was encoded directly in the HTML file.

<h1>Hello, COMP205</h1>
<p>This is a fully functional webpage, although maybe a bit boring...</p>

Now, modify your file to add some new text. Add a sub-heading (<h2>) and write whatever you want. What happens when you make these changes?

Tip: If you modified your file and nothing's changing, close and re-open the file. Why do you think you have to do that?

1

Original HTML Proposal: HTML Proposal: Tim Berners-Lee