<w> smolweb

script: The Script element

The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.

In all case, a smolwebsite must be readable without any CSS and JavaScript code.

The recommendations about this point is:

JavaScript should be avoided, many old browsers can’t execute script. Moreover, this code is often the cause of the swelling of sites by increasing computing effort. However, JavaScript is allowed only if all scripts are embedded in pages with the <script> tags, or from .js files on the same host linked with <link> tag. External script, from other sites of CDN is forbidden. In all cases, the site must remain usable without JavaScript.

To indicate the browser that you respect these contrainsts, you should add Content Security Policy (CSP) in the headers sent by the web server. If you can’t set them, use a meta tag in the <head> of your pages:

<meta http-equiv="Content-Security-Policy" content="default-src 'self';">

Attributes

Specific attributes

Recommended attributes

src="[URL]" specifies the URI of an external script; this can be used as an alternative to embedding a script directly within a document.

type="[MIME type]" indicates the type of script. Common values include text/javascript (default) and module for ES6 modules.

Allowed attributes

async indicates that the script should be executed asynchronously as soon as it is available.

defer indicates that the script should be executed after the document has been parsed.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<head>
  <script src="/js/main.js" type="text/javascript" defer></script>
  <script src="/js/analytics.js" type="text/javascript" async></script>
</head>

<script type="module">
  import { setupWebmentions } from '/js/webmentions.js';
  setupWebmentions();
</script>

<script>
  // Simple progressive enhancement for personal websites
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/sw.js');
  }
</script>