Markup 101

Joseph Reagle

Web HTTP

HTTP Client request

You type:

http://www.example.com/Index.Html

Your browser sends:

GET /Index.Html HTTP/1.1
Host: www.example.com

HTTP Server response

HTTP/1.1 200 OK
Date: Mon, 23 May 2005 22:38:34 GMT
Server: Apache/1.3.3.7 (Unix) (Red-Hat/Linux)
Last-Modified: Wed, 08 Jan 2003 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Content-Type: text/html; charset=UTF-8
Content-Length: 131
Accept-Ranges: bytes
Connection: close

<html>
<head><title>An Example Page</title></head>
<body>
<h1>An example page</h1>
<h2>Intro</h2>
<p>Hello World, this is a <em>very</em> simple 
    <a href="http://w3.org/">Web</a> document.</p>
<img src="http://placecats.com/200/300" alt="kitten" />
</body>
</html>

Markup

HTML e.g.

<html>
<head><title>An Example Page</title></head>
<body>
<h1>An example page</h1>
<h2>Intro</h2>
<p>Hello World, this is a <em>very</em> simple 
    <a href="http://w3.org/">Web</a> document.</p>
<img src="http://placecats.com/200/300" alt="kitten" />
</body>
</html>

HTML

is a type of markup
used to structure elements of a document using tags
- head, body, headings, paragraphs, links, etc.
tags need to be paired
<title>An Example Page</title>
or singular and closed
<img src="http://placecats.com/200/300" />

This markdown

# An example page

## Intro

Hello World, this is a *very* simple 
[Web](http://w3.org/) document.

![kitten](http://placecats.com/200/300)

↪ this HTML

<html>
<head><title>An Example Page</title></head>
<body>
<h1>An example page</h1>
<h2>Intro</h2>
<p>Hello World, this is a <em>very</em> simple 
    <a href="http://w3.org/">Web</a> document.</p>
<img src="http://placecats.com/200/300" alt="kitten" />
</body>
</html>

Markdown

easy to type
human readable, easily converted to HTML, Word, PDF, etc.
used on many Websites and in text editors (including Reddit and AI chatbots)
limited styling, but you can include HTML

HTML in Markdown e.g.

## A kitten

<img src="http://placecats.com/200/300" alt="kitten" />

A kitten

kitten

Image hosting

There is a difference between the URL of the page and the URL of an embedded image.

ex. Hosted screenshot

Take a screenshot of something on your device.
Upload it to imgur.com (‘New post’)
Visit the HTML page that has your image embedded in it.
- https://imgur.com/a/hKAJIHP
Alt-click to Copy image address or Open image in new tab.
- https://i.imgur.com/JmK9iw4.jpeg (a jpeg/jpg, png, etc.)
Embed that image in a page on your wiki.

HackMD can accept and host small images, but you need to know how to host and embed an image from imgur as well.

Embedding Video

## Nixie catching a ball

<!-- iframe not working on HackMD as of 2026-01-12 https://github.com/hackmdio/hackmd-io-issues/issues/422 -->
<!-- <iframe width="853" height="480" src="https://www.youtube.com/embed/hisd3dZbbvA" frameborder="0" allowfullscreen></iframe> -->

{%youtube hisd3dZbbvA %}

Nixie catching a ball

NOTE: Not all videos permit embedding. Also, if embed isn’t working, try HackMD shortcuts

Styling / CSS

<h1 style="color:blue;">This is a Blue Heading</h1>

yes you can

ex. Structure your wiki

Break into groups and make sure can:
1. create two new pages: tutorial and first reading set.
2. create links to those pages from home page.
3. make the permissions on all pages public.
4. embed an image and a video on tutorial page.
5. enable spell checking.

hackmd.io

Tips

you can share, edit synchronously, and set permissions
share/publish to snapshot a public version (send me original)
menu/revision to see versions
menu/export to backup
picture to automatically upload and embed an image

Paragraphs

Unfortunately, there are different variations of markdown.
By default, HackMD doesn’t require blank lines between paragraphs, but I recommend you do so.
- Use blank lines between paragraphs.
- Don’t worry about indenting paragraphs.