Preface | Motivation

A little hypertext and small programs.

HTML|> is a usable standard for presentation and interaction, especially on mobile devices|>. Recent web browsers|> support accessible|>Accessibilty hypertext|> with stylesheets|>CSS and numerous JavaScript|> Web APIs|m>Web/API to multimedia|> (camera|>digital camera, Audio|>Digital audio), clipboard|>clipboard (computing), GPS|> and sensors|>.

Widespread input/output devices are smartphones|>, tablet computers|>, laptops|>, smart TVs|> and desktop computers|>.

Nevertheless, simple well-formed HTML documents are rarely rendered ergonomically by default:

  1. Touchable or even clickable areas too small to touch or click.
  2. User preferred color-scheme|m>Web/CSS/color-scheme ignored - no dark mode|>.
  3. Missing "table of contents" navigation, derived from the structuring HTML Section Heading elements|m>Web/HTML/Element/Heading_Elements.
  4. Missing a horizontal counterpart of the vertically scrolling view, horizontal text lines get too long to be read nicely.

Images|m>Web/HTML/Reference/Elements/img with image maps|m>Web/HTML/Reference/Elements/map might be used to include diagrams|> and graphs|>graph (abstract data type). Also, user input elements|m>Web/HTML/Reference/Elements/input are quite limited.

So there is good reason for numerous web frameworks and authoring tools that help building powerful web applications and sites. Is there a good choice for creating just a little hypertext and small programs?

A cautious wish list

  1. Easy integration into editing environments / small toolchain|>
  2. Adjustment of touch-target sizes
  3. Split long HTML documents into separate scrollable "panels"
  4. Automatic elements
    • Document title / top heading h1: use meta data
    • Top menu: navigation, orientation, theme and fullscreen
    • Navigation: table of contents
    • Lazy reference links to common sources like Wikipedia|> or MDN|>MDN Web Docs
    • HTML/CSS validators (even to generated content)
  5. Small programs need
    • a little console
    • simple source code documentation tool
    • enhanced input elements
  6. Good print style
  7. A multi-column view mode with horizontal snap to column and fast page scroll steps (number of visible columns minus one)

Conclusion: vanilla software|>

The basic materials are DOM|>Document Object Model, CSS|>Cascading Style Sheets and JavaScript|>, as delivered by the most common browsers|>Webbrowser: the scratch to build from.

See: Tags|m>Web/HTML/Element, events|m>Web/API/EventTarget/addEventListener, identifiers|h>named-access-on-the-window-object, loading|h>delay-the-load-event, hashChange|h>the-hashchangeevent-interface