The station sits at an EASL of 1840 meters and measures four quantities.
`; 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 ------ 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: `
` is an opening tag, `
` 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.