smolweb.org

Adding noscript element

2026-03-10T00:00:00+00:00

Adding noscript element

2026-03-10

The <noscript> element has been added to the smolweb HTML subset.

Since smolweb guidelines already require that sites must be readable without JavaScript, the <noscript> element is a logical addition. It allows authors to provide fallback content for users with JavaScript disabled or unavailable.

If you use <script> tags, it is now recommended to use <noscript> to inform users or provide alternative content.

Adding semantic table elements

2025-11-06T00:00:00+00:00

Adding semantic table elements

2025-11-06

After discussions with smolweb fans, it appears to be a good idea to add <thead>, <tbody> and <tfoot> to the smolweb HTML subset.

Their semantic roles add more accessibility to the table structure.

Smolweb-validator

2025-08-17T00:00:00+00:00

Smolweb-validator

2025-08-17

smolweb-validator is a CLI tool to check if a web page respects smolweb HTML subset.

This tool uses jsoup HTML5 parser, a java library distributed under MIT License.

You need a Java Runtime Environment to execute it, and/or a Java Development Kit if you want to build it.

Usage

./smolweb-validate <URL> [--verbose]
java -cp "jsoup-1.21.1.jar:." SmolwebValidator <URL> [--verbose]
jre -cp "jsoup-1.21.1.jar:." SmolwebValidator <URL> [--verbose]

Examples:

./smolweb-validate https://example.com
./smolweb-validate https://example.com --verbose
java -cp "jsoup-1.21.1.jar:." SmolwebValidator https://example.com
java -cp "jsoup-1.21.1.jar:." SmolwebValidator https://example.com --verbose
jre -cp "jsoup-1.21.1.jar:." SmolwebValidator https://example.com
jre -cp "jsoup-1.21.1.jar:." SmolwebValidator https://example.com --verbose

Options:

--verbose    Show all errors and detailed statistics

Script: smolweb-validate is a useful script detecting java or jre

$  ./smolweb-validate https://smolweb.org/
🔍 Validating: https://smolweb.org/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

📊 VALIDATION SUMMARY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✅ VALID: This page conforms to the smolweb HTML subset!

📈 Statistics:
  Total elements: 48
  Valid elements: 48
  Invalid elements: 0

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Validation complete.

New smolweb symbol could be a lowercase w between angle brackets in monospaced font

2025-04-20T00:00:00+00:00

New smolweb symbol could be a lowercase w between angle brackets in monospaced font

2025-04-20

<w>

The angle brackets < and > recall HTML tags, giving a nod to the DIY, hand-coded nature of many smolweb sites. It signals that the web can be understandable and writeable by humans, not just something consumed through complex platforms. It carries the scent of rawness and control, not abstraction and obfuscation.

A single, lowercase w stands in for “web” in a modest, almost shy way. It’s not the grand “www” of the mainstream web, but a small w, lowercase and self-aware. It hints at an alternative web, not the bloated, surveillance-driven one, but a quieter, slower, more intimate one.

<w> is compact, echoing the idea that less is more. That brevity is not a compromise but a strength. It suggests that meaning and value can come in small, lightweight package, just like a well-crafted static HTML page.

The whole symbol feels like something you might type into a terminal or a text editor. It invites tinkering. It feels like the smolweb: accessible, understandable, and remixable.

<w> quietly says a lot: it’s webby, small, and stripped-down, no frills, all signal. Perfect shorthand for the smolweb !

`w.` is the preferred subdomain for smolweb sites

2025-04-20T00:00:00+00:00

`w.` is the preferred subdomain for smolweb sites

2025-04-20

A simple way for a website to indicate that it adheres to the smolweb guidelines is to use the subdomain w instead of www. This short subdomain is very much in the spirit of smolweb.

This is not a requirement, just a suggestion.

w.example.org is visually different from www.example.org or example.org.

this standard has been proposed by Santiago on the Fediverse

Simple.css: a minimalist css framework

2024-07-22T00:00:00+00:00

Simple.css: a minimalist css framework

2024-07-22

If building a stylesheet in css from scratch seems too complicated for you, Simple.css is a solution. This lightweight framework stands on HTML elements (and their semantic specs) and not on specific classes. So, your pages can fully follow the smolweb guidelines and get a responsive design that respect the choices of the user such as font sizes and light/dark preference.

Allowing JavaScript in smolweb

2024-06-15T00:00:00+00:00

Allowing JavaScript in smolweb

2024-06-15

Following the poll on the Fediverse and the discussion under it, JavaScript could be allowed on smolweb sites under some conditions :

The site must remain usable without JavaScript, if the browser has no JavaScript engine or if the user disable it ;
All scripts must be embedded directly in the pages of the smolweb site or in external .js files coming from the same host.

Adding figure and figcaption tags

2023-12-23T00:00:00+00:00

Adding figure and figcaption tags

2023-12-23

As suggested by @reiver on the Fediverse, the semantic tags <figure> and <figcaption> have been added to the smolweb subset.

Wiby, a search engine for the smolweb

2023-10-16T00:00:00+00:00

Wiby, a search engine for the smolweb

While looking for smolweb resources, I met Wiby! This search engine indexes websites compatible with old browsers. You will find simple HTML and non-commercial sites, and, if you have a smolwebsite, you can submit it to their database.

It also works with http protocol.

A very good resource for smolweb surfers!

A smolweb bash generator

2023-10-11T00:00:00+00:00

A smolweb bash generator

I publish this ugly code just to show that it is very easy to build and regenerate a smolwebsite with a few lines of bash script.

It uses discount markdown converter to generate html code from .md files.

All files

The source directory contains the converter, favicons, a page template and markdown content of each page. Two folder would be used to store image (/img) and documents (/doc).

.
├── convert.sh
├── doc
│   └── index.html
├── favicon-32x32.png
├── favicon-64x64.png
├── favicon.ico
├── guidelines.md
├── img
│   └── index.html
├── index.md
├── news.md
├── page.tpl
├── posts
│   ├── 2023-10-09-1st-post.md
│   ├── 2023-10-09-an-other-smallweb-definition.md
│   └── 2023-10-11-smolweb-bash-generator.md
├── style.css
└── subset.md

The bash script

This script (called convert.sh) uses files put in the same directory to generate the content of smolweb.org

#!/bin/bash

cd "$(dirname "$0")"
export docroot="../smolweb.org"
export urlroot="https://smolweb.org"
cp -vu *.{ico,png,css} $docroot
cp -vu img/* $docroot/img/
cp -vu doc/* $docroot/doc/


echo "# News" > news.md
echo '<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom"
    xmlns:thr="http://purl.org/syndication/thread/1.0"
    xml:lang="en">
    <title type="text">smolweb.org</title>
    <subtitle type="text">Smolweb news</subtitle>
    <updated>'"$(date -u -Isecond)"'</updated>
    <link rel="alternate" type="text/html" href="'"$urlroot"'/" />
    <id>'"$urlroot"'/</id>
    <link rel="self" type="application/atom+xml" href="'"$urlroot"'/atom.xml" />' > $docroot/atom.xml
# posts
for f in `ls -1r posts/*.md`;
do
    head -n 3 "$f" | grep "^# " | sed -e "s/^# //" > /tmp/title.tmp
    cat "$f" |  markdown -f fencedcode > /tmp/content.tmp
    cat "$f" |  markdown -f fencedcode -f cdata > /tmp/cdata.tmp
    cat page.tpl | sed -e "/PAGE_TITLE/r /tmp/title.tmp" -e '//d' -e "/PAGE_CONTENT/r /tmp/content.tmp" -e '//d' > $docroot/${f%.*}.html
    echo "* $(echo $f | grep -oP "[0-9]{4}-[0-9]{2}-[0-9]{2}") [$(cat /tmp/title.tmp)](${f%.*}.html)" >> news.md
    
    echo '  <entry xml:lang="en">
        <author><name>Adële</name><uri>'"$urlroot"'/</uri></author>
        <title type="html">'"$(cat /tmp/title.tmp)"'</title>
        <link rel="alternate" type="text/html" href="'"$urlroot"'/'"${f%.*}.html"'" />
        <id>'"$urlroot"'/'"${f%.*}.html"'</id>
        <published>'"$(echo $f | grep -oP "[0-9]{4}-[0-9]{2}-[0-9]{2}")"'T00:00:00+00:00</published>
        <updated>'"$(date -u -Isecond --date=$(stat -c '@%Y' $f))"'</updated>
        <content type="html">' >> $docroot/atom.xml
    cat /tmp/cdata.tmp >> $docroot/atom.xml
    echo '      </content>
    </entry>'>> $docroot/atom.xml
done
echo '</feed>' >> $docroot/atom.xml

# pages
for f in *.md
do
    head -n 3 "$f" | grep "^# " | sed -e "s/^# //" > /tmp/title.tmp
    cat "$f" |  markdown -f fencedcode > /tmp/content.tmp
    cat page.tpl | sed -e "/PAGE_TITLE/r /tmp/title.tmp" -e '//d' -e "/PAGE_CONTENT/r /tmp/content.tmp" -e '//d' > $docroot/${f%.*}.html
done

The markdown files

The files with .md extension contain text in markdown format. The first line begining with with a # and a space is the H1 and the title of the page.

Example index.md:

# About smolweb

_Promoting a simple unbloated web!_

Nowadays, hardware resources of our personal devices are essentially
oversized to manage bloated websites. If we incite web designers to
return to a lighter web, small devices such as old PC, old smartphones,
retro-machines and small boards could be usable.

...

The site template

The file page.tpl contains the template of a page for the site. the line PAGE_TITLE and PAGE_CONTENT are replaced dynamically to generate each page of the site.

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
                <meta name="viewport" content="width=device-width, initial-scale=1.0" >
                <meta name="description" content="smolweb.org promotes simple unbloated web. It provides resources to actors who want to participate." >
                <link href="/style.css" rel="stylesheet" type="text/css" >
                <link href="/atom.xml" rel="alternate" type="application/atom+xml" title="Smolweb news" >
                <link rel="icon" href="/favicon.ico" type="image/x-icon" >
                <link rel="icon" href="/favicon-64x64.png" type="image/png" >
                <title>
                        PAGE_TITLE
                </title>
        </head>
        <body>
                <header>
                <p>
                        <small><code>(w)</code></small> smolweb
                </p>
                <nav><ul>
                        <li><a href="/index.html">Home</a></li>
                        <li><a href="/guidelines.html">Guidelines</a></li>
                        <li><a href="/subset.html">HTML subset</a></li>
                        <li><a href="/news.html">News</a></li>
                        <li><a href="/atom.xml">RSS feed</a></li>
                </ul></nav> 
                </header>
                <main>
                        <article>
                                PAGE_CONTENT
                        </article>
                </main>
                <footer>
                         <p><a property="dct:title" rel="cc:attributionURL" href="https://smolweb.org/">Smolweb</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="https://mastodon.tetaneutral.net/@adele">Adële</a> is licensed under <a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="license noopener noreferrer">CC BY-SA 4.0</a></p> 
                </footer>
        </body>
</html>

The stylesheet

The file style.css is the stylesheet for the whole site.

body {
    margin: 0 auto;
    padding: 0;
    max-width: 1024px;
    font-family: Verdana, Sans-Serif;
} 
main {
    margin: 0 1em;
}
header {
    color: #a0a;
    background-color: #ddf;
    padding: 0.2em;
    border-bottom: 1px solid black;
}
header p {
    line-height: 2em;
    font-size: 2em;
    margin: 0;
    padding-left: 1em;
    font-weight: bold;
}
header p small {
    font-size: 0.5em;
}
nav ul {
    list-style-type: none;
    border-left: 1px solid black;
    margin: 0;
    padding: 0;
}
nav ul li {
    display: inline-block;
    border-right: 1px solid black;
    padding: 2px 10px;
    margin: 0;
}
nav ul li a.active {
    font-weight: bold;
}
img#logo {
    vertical-align: middle;
    max-width: 80px;
    max-height: 80px;
} 
pre, code {
    font-family: Monaco, Courier, monospace;
    tab-size: 1em;
}
pre {
    padding: 1em;
    margin: 1em 0;
    overflow-x: auto;
    background-color: #111;
    color: #6f6;
    border-radius: 0.5em;
}
li {
    margin-left: 1em;
}
p {
    margin: 1em 0;
    line-height: 1.5em;
}
a {
    color: #009;
    text-decoration: none;
}
blockquote {
    background: #eee;
    padding: 0.5em 1em;
    margin: 0 0 0 0.5em;
    border-radius: 0.5em;
}
div.inline-img img {
    max-width: 100%;
}
footer {
    margin-top: 20px;
    border-top: 1px solid black;
}
footer img {
    height:22px!important;
    margin-left:3px;
    vertical-align:text-bottom;
}

@media (prefers-color-scheme: dark) {
    body {
        color: #eee;
        background: #444;
    }
    a {
        color: #99f;
    }
    blockquote {
        color: #fff;
        background: #333;
    }
}

An other Small Web definition

2023-10-09T00:00:00+00:00

An other Small Web definition

2023-10-09

As mentioned on the homepage of smolweb.org, this site gives one definition and some guidelines to build a better and unbloated web.

But there are many solutions to reach this goal. Aral Balkan give a different definition of the Small Web, and it is interesting have a look.

In addition, he proposes several tools, such as Kitten to build this new web.

You can follow him on Mastodon.

First post

2023-10-09T00:00:00+00:00

First post

2023-10-09

I will try to publish information about smolweb here. I’m not sure to be very productive, I have no goal, I just need an area available for posting some news.

If you see some resources about this subject, share it with me on mastodon.

smolweb.org

Adding noscript element

Adding noscript element

Adding semantic table elements

Adding semantic table elements

Smolweb-validator

Smolweb-validator

Usage

New smolweb symbol could be a lowercase w between angle brackets in monospaced font

New smolweb symbol could be a lowercase w between angle brackets in monospaced font

`w.` is the preferred subdomain for smolweb sites

w. is the preferred subdomain for smolweb sites

Simple.css: a minimalist css framework

Simple.css: a minimalist css framework

Allowing JavaScript in smolweb

Allowing JavaScript in smolweb

Adding figure and figcaption tags

Adding figure and figcaption tags

Wiby, a search engine for the smolweb

Wiby, a search engine for the smolweb

A smolweb bash generator

A smolweb bash generator

All files

The bash script

The markdown files

The site template

The stylesheet

An other Small Web definition

An other Small Web definition

First post

First post

`w.` is the preferred subdomain for smolweb sites