Section · 01

What a markup language actually is

A markup language is a way to add structure and meaning to text by wrapping it in tags. The text inside the tags is the content. The tags describe what kind of content it is. Think of a highlighter — the text doesn’t change, but yellow means important and pink means definition.

Markup languages separate structure (what this is) from presentation (how it looks). That separation is the whole reason we can restyle a site without rewriting it, or feed the same content to a phone, a printer, and a screen reader.

Section · 02

HTML — the web

HTML (HyperText Markup Language) is the markup of the web. Every page in your browser is HTML at the root, even if a framework generates it.

<article>
  <h1>How to make sourdough</h1>
  <p>Start by feeding your <strong>starter</strong>.</p>
  <a href="/recipes">More recipes</a>
</article>

The tags here say: article, heading, paragraph, strong emphasis, hyperlink. A browser uses that information to display the page. A screen reader uses it to read the page aloud. A search engine uses it to figure out what the page is about.

Section · 03

XML — a more general cousin

XML(Extensible Markup Language) is HTML’s older, more flexible cousin. Where HTML has a fixed set of tags (<p>, <div>, etc.), XML lets you invent your own tags for any data you have.

<library>
  <book>
    <title>The Pragmatic Programmer</title>
    <author>Andy Hunt</author>
    <year>1999</year>
  </book>
</library>

XML was huge in the 2000s — RSS feeds, SOAP web services, config files. It’s still used in a few places (Microsoft Office files, RSS, SVG, some enterprise APIs) but for transferring data between systems it’s mostly been replaced by JSON.

Section · 04

JSON — the data format that ate the web

JSON(JavaScript Object Notation) is technically a data format, not a markup language — but you’ll meet it every day and it’s easier to learn alongside the others. JSON is what almost every modern web API returns.

{
  "title": "The Pragmatic Programmer",
  "author": "Andy Hunt",
  "year": 1999,
  "topics": ["software", "craft", "career"]
}

Compare it to the XML version above. Half as many characters, easier to read, and it maps directly to data structures in any language — objects/dicts, arrays/lists, strings, numbers, booleans, null. JSON won the API wars sometime around 2012 and isn’t losing.

Section · 05

SVG — vector graphics that are actually XML

SVG (Scalable Vector Graphics) is XML for images. Instead of a grid of pixels (PNG, JPG), an SVG describes shapes — circles, paths, lines — as math. Result: an SVG looks sharp at any size, from a 16px favicon to a billboard.

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#e63946" />
</svg>

That’s a red circle. You can paste it directly into an HTML file and it renders. SVG is the right choice for logos, icons, simple illustrations, and charts. Photographs still want to be JPGs or WebPs.

Section · 06

Markdown — the prose-friendly markup

Markdownis a lightweight markup language designed to look like the text you’d write in a notebook. You don’t see angle brackets. You use asterisks for bold, underscores for italic, hashes for headings.

# How to make sourdough

Start by feeding your **starter**.
- Flour
- Water
- Patience

[More recipes](/recipes)

Markdown gets converted to HTML when published. Most of the web’s technical writing — README files, GitHub issues, blog platforms, this very lesson — is authored in Markdown.

Section · 07

When you use which

HTML       — anything you put in a browser
JSON       — talking between systems (APIs, configs, data)
XML        — legacy systems, SVG, a few config files
SVG        — logos, icons, simple graphics
Markdown   — anything you write that needs to become HTML later

Don’t memorize the syntax of all of them. Recognize them when you see them and you’ll be fine. The next lesson dives into HTML for real — the structure every web page on the internet uses.

Markup languages, five formats that run the web.