indieweb:html_css
Table of Contents
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(apttidy) catches unclosed tags- View in
w3morlynx: if it is readable there, it is right for a pubnix. See Testing Without JavaScript. python3 -m http.serverto 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
alton everyimg,langonhtml, oneh1per page- Semantic tags over divs
<label>on inputs- No fixed font sizes: use
emor%
See Also
indieweb/html_css.txt · Last modified: by 127.0.0.1
