I have no particular qualifications or expertise in the field of web programming and design. I learned to do it the old-fashioned – and still the best – way: at 11 years of age, in my parents’ basement, using abstract intellectual structures as a substitute for friendship.
It strikes me that the kind of clear, methodical, and organized thinking that comes from learning how to use computers well on an advanced level is sorely needed in today’s world. And as the Internet gains prominence in our everyday lives, understanding how it works is an increasingly important survival skill.
To that end, I’d like to talk a little bit about the basics of how webpages work. The obvious place to start is at the beginning.
Hypertext Markup Language (HTML)
The simplest kind of web page possible is a single file that doesn’t do much of anything and doesn’t contain much more than plain text. Of course, other kinds of files can be transmitted over the Internet, but these are not web pages as such. A web page, in its most basic form, is an HTML file.
HTML stands for Hypertext Markup Language. A markup language is a computer language that allows you to specify a complex hierarchical structure for data. We sometimes talk about HTML code, but HTML is not really code – it doesn’t do anything, it just organizes things.
Markup languages are visually intuitive, and in fact they have become a minor touchstone of Internet slang – you may have seen someone end a passionate tirade with “</rant>” or enclose a snide remark in “<sarcasm></sarcasm>” tags. Markup languages use enclosed bits of text in these tags, which can be nested inside each other to create hierarchy.
HTML is just the particular markup language that is used to mark up hypertext – plain text that is meant to be read by web browsers and can be enriched with things like images and links.
By enclosing a bit of text in a certain tag and specifying the destination URL, you instruct the user’s browser to render the text as a link pointing to that destination URL. Links are really the great strength of the web. It’s easy to forget now, but the ability to effortlessly travel from page to page by clicking links was a novel and exciting thing only 20 years ago.
Most of the other functions of HTML are less revolutionary, but no less useful. With HTML tags you tell the user’s browser what is text to be displayed and what is metadata (information about the page). You tell the browser what bits of text function as headings and what is the actual text body of the page. You can create lists, tables, forms, and more.
What you can’t do is control how the page looks. HTML provides some control over formatting, but these controls are clunky and tend to make for extremely ugly web pages – and web pages that are designed in this way are extremely difficult to redesign in the event of a rebranding.
For the most part a plain HTML file will be black text in a plain font against a white background. Paragraphs run all the way to the edge of the screen and it’s impossible to place different blocks of text side by side without resorting to hacks like using tables for layout.
The more elaborate layouts you’re used to seeing on the web come from a different technology.
Cascading Style Sheets (CSS)
CSS is the language that provides designers with control over the way an HTML page is displayed. CSS is also not a programming language – like HTML, it doesn’t do anything by itself. All it does is tell the user’s browser how a web page should look.
CSS is “cascading” because of the order in which its design rules are applied – rules that are more specific and rules that appear later in the CSS file override earlier or less specific ones.
With CSS, designers have the ability to place blocks of text in different spots on the page – CSS is what allows many websites to use two- or three-column layouts that pack more information into less space and generally make websites easier on the eyes.
CSS also gives greater control over fonts, colours, spacing, borders, and much more.
The philosophy behind CSS is that an HTML file should specify the hierarchical organization of different elements on a page, while the CSS file should specify how this hierarchy is to be represented visually. The HTML provides the skeleton, giving you the shape of the page, while the CSS is the skin, which determines how it will ultimately look.
Taking to its extreme, this philosophy spells total separation of content and design, and that is the method that many web designers promote. However, in practice it’s rarely so simple.
For example, HTML provides <b> and <i> tags to bold and italicize text. Under a strict separation of content and design, these ought to be discarded in favour of the <strong> and <em> tags, which usually have the same respective visual effects but carry semantic connotation of strength and emphasis.
However, strength and emphasis are not the only reasons we bold or italicize text. For example, we italicize movie titles not to emphasize them, but to separate them from the surrounding text to avoid confusion. HTML doesn’t provide tags for these situations, and someone who is not seeing a web page – for example, a visually impaired user who uses a screen reader – might be confused if their software emphasizes a movie title.
For this reason, it is sometimes better to use the deprecated <b> and <i> tags, breaking this separation of content and design.
Function
HTML and CSS together provide everything you need to make a web page look good. However, web pages don’t stop there. When we’re viewing a page, we usually don’t just want to passively read. We want to do things. We search, we post, we reply, we log in and out.
Aside from links, HTML and CSS do not allow for much in the way of interactivity. HTML does allow you to create forms, but these forms by themselves don’t do anything. You need some actual executable code “under the hood” to make them work.
It was not long into the web’s existence before people realized that pure HTML by itself is quite limited.
Today, almost nothing is done in pure HTML – even Google’s home page, which was for a long time one of the simplest popular pages on the Internet, is now loaded down with all kinds of interactive crap. Now it is almost always a combination of HTML and something else.
What else? Well, getting into that would take a whole new article.
