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.
Table of Contents:
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.
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.
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.
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.