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>