folk.zone Wiki

a public knowledge base

Site Tools


indieweb:html_css

Hand-Written HTML and CSS

The tilde-native way: write the HTML yourself. It is small, it loads on anything, and you control every byte.

Page Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page title - ~you</title>
<meta name="description" content="one line for link previews">
<link rel="stylesheet" href="tilde.css">
<link rel="alternate" type="application/rss+xml" title="feed" href="feed.xml">
</head>
<body>
<header><h1>~you</h1><nav><a href="index.html">home</a> · <a href="blog/">blog</a></nav></header>
<main>
  <!-- content -->
</main>
<footer><p>made by hand · <a href="guestbook.txt">sign my guestbook</a></p></footer>
</body>
</html>

Tags You Will Actually Use

<h1>…<h6>          headings (one h1 per page)
<p> <br> <hr>      paragraph, break, rule
<a href="x">link</a>          relative links for local pages
<em> <strong> <code> <pre>   emphasis, code: <pre> keeps ascii art intact
<ul>/<ol> → <li>     lists   <dl><dt>term<dd>def</dl> definition list
<blockquote> <q>             quotes (block vs inline)
<img src="x.png" alt="description">        alt text is mandatory etiquette
<table><tr><th><td>          tables
<details><summary>q?</summary>answer</details>   collapsible, no JS
<article> <section> <nav> <aside>  semantic containers
<time datetime="2026-10-05">Oct 5</time>   machine-readable dates

Forms

No server-side handling on most pubnixes: mailto forms or a shared file (guestbook.txt with a “leave a note” instruction) is the convention.

<form action="mailto:you@host" method="get">
<label>Name <input name="name"></label>
<textarea name="msg" rows="5"></textarea>
<button>Send</button>
</form>

CSS: The Useful 80%

/* selectors */
p {} .class {} #id {} main p {} a:hover {} a[href^="http"] {}
 
/* custom properties: theming */
:root { --bg: #282828; --fg: #ebdbb2; --accent: #fabd2f; }
body { background: var(--bg); color: var(--fg); }
 
/* the small-web layout recipe */
body {
  font-family: monospace;
  max-width: 80ch;             /* readable line length */
  margin: 0 auto;              /* centered */
  padding: 20px;
  line-height: 1.4;
}
 
/* dark mode that follows the OS */
@media (prefers-color-scheme: dark) {
  :root { --bg: #282828; --fg: #ebdbb2; }
}

Units: ch (character widths, the tilde layout unit), em/rem, %, px for hairlines and borders only.

Little Recipes

pre { overflow-x: auto; }                    /* code blocks don't break layout */
img { max-width: 100%; }                     /* images never overflow */
a:visited { opacity: .7; }                   /* subtle visited marker */
nav a + a::before { content: "·"; margin: 0 .5ch; }   /* link separators */

Validation and Testing

  • tidy -errors -q page.html (apt tidy) catches unclosed tags
  • View in w3m or lynx: if it is readable there, it is right for a pubnix. See Testing Without JavaScript.
  • python3 -m http.server to preview locally

88x31 Buttons

The small-web badge format. Copy the ones you like, save them to your site, and link back to the source. tilde.town's town square has a web badge club directory. See also Web 1.0 Aesthetics.

Accessibility That Costs Nothing

  • alt on every img, lang on html, one h1 per page
  • Semantic tags over divs
  • <label> on inputs
  • No fixed font sizes: use em or %

See Also

indieweb/html_css.txt · Last modified: by 127.0.0.1