Markup Language Concept

The How the Internet Works course established how a name typed into the address bar reaches a server, and that the server returns a response body. How that body is carried, which header describes it, and how the connection is established were explained there. One question was left open: what is the body itself?

This course answers that question. The response body is most often an HTML document, and HTML is a markup language. This lesson defines what markup is, what it does and does not define, and why it exists as a separate language.

Markup Is a Declaration Added to Text

Markup is extra information interspersed into plain text that states what its parts are. The term comes from proofreading marks in print publishing: on a manuscript sent to the typesetter, a word underlined would say “set this in emphasis,” a note in the margin would say “this is a heading.” The mark itself was never printed; it described what would be printed.

HTML does the same job. In the text below, there are two kinds of bytes: the ones meant to be read, and the ones that describe what is meant to be read.

// markup.mjs — separates markup from text
const document_ = `<h1>North Slope Station</h1>
<p>The station sits at an <abbr title="elevation above sea level">EASL</abbr> of 1840 meters
and measures <strong>four</strong> quantities.</p>`;

let content = "";
let structure = "";
let i = 0;
while (i < document_.length) {
  const k = document_.indexOf("<", i);
  if (k === -1) { content += document_.slice(i); break; }
  content += document_.slice(i, k);
  const end = document_.indexOf(">", k);
  structure += document_.slice(k, end + 1);
  i = end + 1;
}

console.log("--- content only ---");
console.log(content.trim());
console.log("--- structure only ---");
console.log(structure);
console.log("--- byte count ---");
console.log("total     :", Buffer.byteLength(document_));
console.log("content   :", Buffer.byteLength(content));
console.log("structure :", Buffer.byteLength(structure));

--- content only ---
North Slope Station
The station sits at an EASL of 1840 meters
and measures four quantities.
--- structure only ---
<h1></h1><p><abbr title="elevation above sea level"></abbr><strong></strong></p>
--- byte count ---
total     : 172
content   : 92
structure : 80

Neither part is complete on its own. The content part is readable but structureless: which line is a heading, what the abbreviation EASL stands for, is lost. The structure part carries no content at all. A document is the union of both, and in this example the two are close in size — the structure declaration is not far behind the content itself. This ratio differs from document to document; as information density rises, structure’s share falls.

What matters here is that the structure declaration does not disappear. Even though the explanation carried in the abbr element’s title attribute is not shown on screen, it stays in the document; a program or a person who cannot expand the abbreviation can still consult it. Markup is a layer that is invisible but queryable.

Three Separate Responsibilities

A web page answers three separate questions, and these three questions are answered by three separate languages.

Question	Layer	Language
What is this content?	Structure	HTML
How will it look?	Presentation	CSS
What happens when the user interacts?	Behavior	JavaScript

This split is not a matter of style, it is a decision about maintenance cost. The same document can be shown with different presentations: on a narrow screen, on a printer, on a screen reader, in a search engine’s indexer. All of these read the same structure; only the presentation layer changes. Had structure and presentation been defined in the same place, the document itself would need to be rewritten for every new environment.

The split’s violation is seen in a concrete example. Using an h1 element to show text large and bold is making a structural declaration for a presentational purpose: it tells the document “this is a first-level heading,” and every program that reads that declaration is misled. The reverse holds too: writing a heading with a p element and only enlarging it with styling destroys the structural information.

This course builds the structure layer. The presentation layer is covered in the next course, the behavior layer in the JavaScript courses; throughout this course, styling and scripting appear only to the extent that they relate to structure.

A Declarative Language

The Programming Fundamentals course defined statements, expressions, and control flow. HTML is not a programming language in that sense: it cannot build a condition, compile a loop, hold a variable, or perform a computation. What is written is not a sequence of commands, it is a declaration.

Being declarative has two consequences.

First, the order in which the document is processed is not under the author’s control. When a document is written, it does not say “do this, then do that”; it says “this is a heading, this is a list, this is a link.” The program reading these declarations decides what to do with them. The same document is rendered in a browser, parsed by an indexer, converted to another form by a converter.

Second, behavior in the face of an error is different. The syntax-error concept from the Programming Fundamentals course does not work the same way here: a flawed HTML document does not refuse to be processed. The parser applies defined error-recovery rules and produces a result. We will look at these rules in detail in a later lesson; what matters for now is that there is no such output as “invalid document.” Every document is turned into some result — the question is whether the result it is turned into matches the author’s intent.

A third consequence concerns the language’s extensibility. When the parser meets an element name it does not recognize, it does not reject the document; it builds an element carrying that name and processes its content normally. It also keeps an unrecognized attribute. So when a new element is added to the language, implementations that do not yet recognize it do not lose the document entirely: the new element’s extra meaning is lost, its content remains. We saw the same principle for HTTP headers in the How the Internet Works course; an unrecognized header is ignored, not treated as invalid. Extensibility, in both designs, is bought with tolerance toward error.

Element, Tag, and Document

Three words are often confused; their distinctions will be kept throughout the course.

A tag is the writing between angle brackets in the source text: <p> is an opening tag, </p> is a closing tag. A tag is a part of the source text.

An element is the whole formed by an opening tag, a closing tag, and the content between them. An element is the conceptual unit that exists after parsing; it is found not in the source text, but in the structure produced from it.

A document is the whole formed by elements.

This distinction may look like unnecessary precision, but it will be decisive in the next lesson when parsing stages are examined: some elements have no tag at all in the source text, and yet they are present in the document.

The Document Followed Throughout the Course

This course proceeds on a single example document: a measurement station page. A station named North Slope is built at an elevation of 1840 meters above sea level and measures temperature, relative humidity, wind speed, and precipitation. The page will carry the station’s identification, a measurement table, a location image, and finally a form where observers can report a data correction.

The document grows throughout the course. In this lesson it is only a single sentence’s worth; by the course’s end it will be a complete, multi-section page carrying media and a validatable form. Every lesson adds a layer to this document and justifies why the added layer takes the form it does.

Summary

• Markup is a declaration layer, mixed into the text, that states what the text’s parts are; markup bytes are carried in the same document as content bytes but are not part of the text meant to be read.
• A page answers three separate questions: what the content is (structure), how it will look (presentation), what happens (behavior). This course builds only the structure layer.
• HTML is a declarative language: it carries no control flow, variables, or computation; the program reading the declaration decides what to do.
• A flawed document does not refuse to be processed; the parser always produces a result using defined error-recovery rules.
• A tag is part of the source text, an element is the unit formed after parsing; the two do not map onto each other one to one.

Next Step

This lesson defined what markup is, but not what the browser does with it. The What the Browser Does lesson in the How the Internet Works course listed the stages under headings: parsing, layout, painting. The next lesson takes up these stages from the document’s own point of view, and follows which transformations the incoming bytes pass through to become something on screen, showing each stage’s output.