All web pages, by definition, are composed of HTML. Web browsers are basically apps that parse HTML.
HTML stands for “Hypertext Markup Language,” which is easier to understand than you would think.
I had a professor in college who pointed out that when an author used footnotes, he wanted people to read the notes, and when he used endnotes, he didn’t. This has nothing to do with the Internet, but it’s a terribly useful observation.Hypertext is just the original word for link. The idea came from footnotes. You’re reading something, you see there’s a footnote, you follow the link to the note, and then you pop back to where you were reading. That’s where the whole architecture of the Web came from. So now you’ll never skip a footnote again, right?1
Markup Language takes a little more explaining, but it’s not actually complicated. Let’s go back to academia.
I’m using “she” and “her” as pronouns here because the professor I’m thinking of is my mom, who was a research professor at Washington University. Her name was not J. McNeil Flintlock, though. That’s a clever pseudonym.In the old days, a professor would write the text of a paper. She’d sweat over the information, edit the hell out of it, and then the final version would be typed up by her secretary on an IBM Selectric.2
But the typewritten version wasn’t what got published. That text would be relayed to the Publications Department of whatever journal was going to run it, and that department would go through the typed manuscript and mark up the pages for formatting. For instance, the front page of the typewritten manuscript might look like this:
VERY IMPORTANT TREATISE ON COMPLICATED SUBJECT
An Examination of the Epistemology of Fake Document Names
Professor J. McNeil Flintlock, PhD.
Washington University Department of Esoterica
And the marked-up version might look like this
<h1>VERY IMPORTANT TREATISE ON COMPLICATED SUBJECT</h1>
<h2>An Examination of the Epistemology of Fake Document Names</h2>
<h3>Professor J. McNeil Flintlock, PhD.<h3>
<p>Washington University Department of Esoterica <p>
The bracketed letters are called tags. The first line is tagged <h1>, which means that everything between those tags is Heading Level 1. <h2> means Heading Level 2, <h3> means Heading Level 3, and <p> means standard paragaph.
At this point, the Publications Department would check its style sheets, which might be pinned up on the wall, to see how to format every one of these marked-up styles.
OUR STYLES
<h1> = 21pt/18pt Helvetica Bold, all caps, centered
<h2> = 18pt/20pt Helvetica Bold, centered
<h3> = 14pt/15pt Helvetica Bold Italic, centered
<p> = 12pt/15pt Times New Roman, centered
And they’d set the type by those guides, so it looked like this:
VERY IMPORTANT TREATISE ON COMPLICATED SUBJECT
An Examination of the Epistemology of Fake Document Names
Professor J. McNeil Flintlock, PhD
Washington University Department of Esoterica
That’s effectively how a webpage works. Your browser reads an HTML file, which contains the text, marked up with tags and links to provide the structure – and simultaneously accesses a linked style sheet to set the formatting.
CSS, by the way, stands for “Cascading Style Sheets” because one style sheet can cascade over (i.e., supersede or supplement) another linked style sheet. CSS is pretty powerful. It affects not just the appearance but also the placement on the page of every element in your document.
HTML is not a programming language. It’s designed to display information. Except for linking and hover effects, HTML doesn’t really allow the user to do anything interactive.