Hypertext Markup Language

As a creative medium, the Web has three core coding languages at the center of its craft: HTML, CSS and JavaScript. The most fundamental of these is HTML, or Hypertext Markup Language. HTML is used to create the structure of a Web project. In order to fully grasp the creative potential of this language, we need to understand two concepts, hypertext (or hypermedia) and markup languages.

content <tag> </tag> an element

Table of Contents:

  1. what's a markup language?
  2. what's hypertext?
  3. what's hypertext markup language (HTML)?
  4. HTML exmapes

Markup Languages

Markup languages are a family of coding languages that share the same syntax and structure, but differ in their specific vocabulary. This vocabulary consists of a predefined set of elements and attributes. An element is used to annotate some content by surrounding that content with tags.

human rights <title> </title> opening 'title' tag closing 'title' tag the 'title' element the element's name the element's content

In markup languages tags are written with the following syntax: a < (less-than) bracket, followed by the name of the element and then the > (greater-than) bracket. Tags usually come in pairs, an opening <tag> followed by some content and then a closing </tag> (differentiated by the forward slash). We typically refer to the pair of tags and it's content as the element. While most elements consist of both an opening and closing tag, some are merely opening tags, these are called singleton or void elements. Like the <br> element for example, which is used to create a line-break.

Hypertext and Hypermedia

Hypertext is essentially non-linear, interactive text. The physical/material limitations of old media (ex books, newspapers, magazines) forced a linear paradigm onto the medium of text. But in a metamedia like computers, text need not conform to those limitations. A hypertext document can, at various points, link to other hypertext documents, which means texts can be enganged with non-linearly, allowing each reader to chart their own unique journey through that text (compare the experience of reading a book vs reading on Wikipedia).

Hypermedia is the same concept extended to other forms of media. Radio, television and film were all similarly restricted to non-interactive linear experiences by the limitations of their physical material. On a computer, audio and video can be interacted with linearly (ex conventional media players) but they can also become parts of interactive non-linear systems, like video games.

Hypertext Markup Language (HTML)

HTML is a specific markup language designed to create nonlinear documents (hypertext) and interactive applications (hypermedia, software, games). HTML is how we code the frame or structure of a website or web app (though it can also be used to structure native desktop and mobile apps as well). Like all markup languages it consists of a set of predefined elements and attributes (though it is possible to create your own custom elements). The most important of these is arguably the <a> element (aka the "anchor" element), which is used to transform a specific piece of content into a "link", the most fundamental characteristic of hypertext.

content <a> </a> opening 'a' tag closing 'a' tag

By itself, the <a> element won't convert a piece of content into a link, we need to use the href attribute to specify where we want this link to take us when we click it. Attributes are always placed within the opening tag, always after the name of the element (separated by a space) and before the > bracket.

home page <a href=""> </a> attribute name attribute value

Like tags, attributes have their own syntax: the attribute name is usually followed by an = (equal) symbol and then some value specified within " (quote) marks. Though most attributes require you specify some value, some of them do not.

HTML Examples

You can review all the core concepts with netnet in its editor, I've also got a hypermedia HTML Crash Course tutorial you can watch/interact with. There are also loads of great books and online tutorials if you'd like to dive deeper. Below are some (interactive) examples of different HTML snippets you might want to make use of in your documents. You can edit any of these examples to experiment with it as well as double click any piece of code to learn more about it.