From 3f3b10626f27d8061b5b6e6f9bb89f74efd1358e Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Fri, 22 Mar 2024 13:25:58 +0100 Subject: [PATCH] fix(html): Make script elements children of head or body elements --- .htmlvalidate.json | 4 + abort-api/index.html | 4 +- audiocontext-setsinkid/index.html | 32 +- drag-and-drop/DnD-support.html | 313 ++++++++------- fetch/basic-fetch/index.html | 41 +- fetch/fetch-array-buffer/index.html | 95 ++--- fetch/fetch-json/index.html | 69 ++-- fetch/fetch-request-with-init/index.html | 63 +-- fetch/fetch-request/index.html | 43 +- fetch/fetch-response-clone/index.html | 55 +-- fetch/fetch-response/index.html | 63 +-- fetch/fetch-text/index.html | 59 +-- fetch/fetch-with-init-then-request/index.html | 3 +- fetch/object-fit-gallery-fetch/index.html | 3 +- indexeddb-examples/idbcursor/index.html | 4 +- indexeddb-examples/idbindex/index.html | 6 +- indexeddb-examples/idbkeyrange/index.html | 3 +- insert-adjacent/insertAdjacentElement.html | 195 ++++----- insert-adjacent/insertAdjacentText.html | 110 +++-- matchmedia/index.html | 117 +++--- mediaquerylist/index.html | 118 +++--- pointerevents/Multi-touch_interaction.html | 346 ++++++++-------- pointerevents/Pinch_zoom_gestures.html | 297 +++++++------- touchevents/Multi-touch_interaction.html | 378 +++++++++--------- web-crypto/derive-bits/index.html | 3 +- web-crypto/derive-key/index.html | 3 +- web-crypto/encrypt-decrypt/index.html | 125 ++++-- web-crypto/export-key/index.html | 3 +- web-crypto/import-key/index.html | 119 ++++-- web-crypto/sign-verify/index.html | 26 +- web-crypto/unwrap-key/index.html | 3 +- web-crypto/wrap-key/index.html | 3 +- web-storage/event.html | 34 +- web-storage/index.html | 81 ++-- 34 files changed, 1502 insertions(+), 1319 deletions(-) create mode 100644 .htmlvalidate.json diff --git a/.htmlvalidate.json b/.htmlvalidate.json new file mode 100644 index 00000000..32ed1aa8 --- /dev/null +++ b/.htmlvalidate.json @@ -0,0 +1,4 @@ +{ + "$schema": "https://html-validate.org/schemas/config.json", + "extends": ["html-validate:recommended", "html-validate:prettier"] +} diff --git a/abort-api/index.html b/abort-api/index.html index fcbde298..42bb80d0 100644 --- a/abort-api/index.html +++ b/abort-api/index.html @@ -36,7 +36,7 @@

Simple offline video player

Sintel © copyright Blender Foundation | www.sintel.org.

- + - + diff --git a/audiocontext-setsinkid/index.html b/audiocontext-setsinkid/index.html index 9ab6e04b..ebc4817a 100644 --- a/audiocontext-setsinkid/index.html +++ b/audiocontext-setsinkid/index.html @@ -1,7 +1,6 @@ - @@ -14,27 +13,22 @@ -

- SetSinkId test example -

- - - -
- -
- - - +

SetSinkId test example

+ + + +
+ + + - diff --git a/drag-and-drop/DnD-support.html b/drag-and-drop/DnD-support.html index e4165416..c0db00d8 100644 --- a/drag-and-drop/DnD-support.html +++ b/drag-and-drop/DnD-support.html @@ -1,152 +1,177 @@ - -Feature tests for DnD interfaces - - - - -

Log support of DnD objects' methods and properties

-
-

- Select this element, drag it to the Drop Zone and then release the mouse. The console log will contain data about the DnD interfaces supported.

-
-
Drop Zone
- + for (var i = 0; i < properties.length; i++) { + if (dti === undefined) { + console.log("... items." + properties[i] + " = undefined"); + } else { + var supported = properties[i] in dti; + console.log( + "... items." + properties[i] + " = " + (supported ? "Yes" : "No") + ); + } + } + for (var i = 0; i < methods.length; i++) { + if (dti === undefined) { + console.log("... items." + methods[i] + "() = undefined"); + } else { + var supported = typeof dti[methods[i]] == "function"; + console.log( + "... items." + methods[i] + "() = " + (supported ? "Yes" : "No") + ); + } + } + } + function check_DataTransferItemList(dtil) { + // Check the DataTransferItemList object's methods and properties + var properties = ["length"]; + var methods = ["add", "remove", "clear"]; + + console.log("DataTransferItemList ... " + dtil); + + for (var i = 0; i < properties.length; i++) { + if (dtil === undefined) { + console.log("... items." + properties[i] + " = undefined"); + } else { + var supported = properties[i] in dtil; + console.log( + "... items." + properties[i] + " = " + (supported ? "Yes" : "No") + ); + } + } + for (var i = 0; i < methods.length; i++) { + if (dtil === undefined) { + console.log("... items." + methods[i] + "() = undefined"); + } else { + var supported = typeof dtil[methods[i]] == "function"; + console.log( + "... items." + methods[i] + "() = " + (supported ? "Yes" : "No") + ); + } + } + } + function dragstart_handler(ev) { + ev.dataTransfer.dropEffect = "move"; + check_DragEvents(); + var dt = ev.dataTransfer; + if (dt === undefined) { + console.log("DataTransfer is NOT supported."); + } else { + // Make sure there is at least one item + dt.setData("text/plain", "Move this."); + check_DataTransfer(dt); + } + } + function dragover_handler(ev) { + ev.dataTransfer.dropEffect = "move"; + ev.preventDefault(); + } + function drop_handler(ev) { + if (ev.dataTransfer === undefined) { + console.log("DataTransferItem NOT supported."); + console.log("DataTransferItemList NOT supported."); + } else { + var dti = ev.dataTransfer.items; + if (dti === undefined) { + console.log("DataTransferItem NOT supported."); + console.log("DataTransferItemList NOT supported."); + } else { + check_DataTransferItem(dti[0]); + check_DataTransferItemList(dti); + } + } + } + + + +

Log support of DnD objects' methods and properties

+
+

+ Select this element, drag it to the Drop Zone and then release the + mouse. The console log will contain data about the DnD interfaces + supported. +

+
+
+ Drop Zone +
+ diff --git a/fetch/basic-fetch/index.html b/fetch/basic-fetch/index.html index 034973a1..ac630920 100644 --- a/fetch/basic-fetch/index.html +++ b/fetch/basic-fetch/index.html @@ -14,25 +14,26 @@

Fetch basic example

- - + + diff --git a/fetch/fetch-array-buffer/index.html b/fetch/fetch-array-buffer/index.html index 6403df07..34663179 100644 --- a/fetch/fetch-array-buffer/index.html +++ b/fetch/fetch-array-buffer/index.html @@ -18,55 +18,58 @@

Fetch arrayBuffer example


-  
-  
+      // dump script to pre element
+      pre.innerHTML = myScript.innerHTML;
+    
+  
 
diff --git a/fetch/fetch-json/index.html b/fetch/fetch-json/index.html
index 801d9df0..87cc1371 100644
--- a/fetch/fetch-json/index.html
+++ b/fetch/fetch-json/index.html
@@ -13,39 +13,40 @@
   
     
Fetch json example

     
+
+    
   
-  
 
diff --git a/fetch/fetch-request-with-init/index.html b/fetch/fetch-request-with-init/index.html
index fc03bf82..3074db60 100644
--- a/fetch/fetch-request-with-init/index.html
+++ b/fetch/fetch-request-with-init/index.html
@@ -13,36 +13,37 @@
   
     
Fetch Request with init example

     
+
+    
   
-  
 
diff --git a/fetch/fetch-request/index.html b/fetch/fetch-request/index.html
index ab63d5db..40b62f3b 100644
--- a/fetch/fetch-request/index.html
+++ b/fetch/fetch-request/index.html
@@ -11,26 +11,27 @@
   
     
Fetch Request example

     
-  
-  
+    
+  
 
diff --git a/fetch/fetch-response-clone/index.html b/fetch/fetch-response-clone/index.html
index 0d1eeded..fd2ee226 100644
--- a/fetch/fetch-response-clone/index.html
+++ b/fetch/fetch-response-clone/index.html
@@ -21,33 +21,34 @@
     
Fetch response clone example

     
     
-  
-  
+      function useResponse(response, image) {
+        response
+          .blob()
+          .then((myBlob) => {
+            const objectURL = URL.createObjectURL(myBlob);
+            image.src = objectURL;
+          })
+          .catch((error) => {
+            const p = document.createElement("p");
+            p.appendChild(document.createTextNode(`Error: ${error}`));
+            document.body.insertBefore(p, image);
+          });
+      }
+    
+  
 
diff --git a/fetch/fetch-response/index.html b/fetch/fetch-response/index.html
index b8ed3615..4a88e281 100644
--- a/fetch/fetch-response/index.html
+++ b/fetch/fetch-response/index.html
@@ -13,38 +13,39 @@
   
     
Fetch basic response example

     
-  
-  
+      const myBlob = new Blob();
+      const options = { status: 200, statusText: "SuperSmashingGreat!" };
+      const myResponse = new Response(myBlob, options);
+    
+  
 
diff --git a/fetch/fetch-text/index.html b/fetch/fetch-text/index.html
index df062045..82868c05 100644
--- a/fetch/fetch-text/index.html
+++ b/fetch/fetch-text/index.html
@@ -18,35 +18,36 @@ 
Fetch text example

       
  • Page 3
    • 
     
     
    
-  
-  
+        fetch(myRequest)
+          .then((response) => {
+            if (!response.ok) {
+              throw new Error(`HTTP error, status = ${response.status}`);
+            }
+            return response.text();
+          })
+          .then((text) => {
+            myArticle.innerText = text;
+          })
+          .catch((error) => {
+            myArticle.innerText = `Error: ${error.message}`;
+          });
+      }
+    
+  
 
diff --git a/fetch/fetch-with-init-then-request/index.html b/fetch/fetch-with-init-then-request/index.html
index 56c7e324..43bdbbee 100644
--- a/fetch/fetch-with-init-then-request/index.html
+++ b/fetch/fetch-with-init-then-request/index.html
@@ -13,7 +13,7 @@
   
     
    Fetch with init then Request example
    
     
-  
+
   
+  
 
diff --git a/fetch/object-fit-gallery-fetch/index.html b/fetch/object-fit-gallery-fetch/index.html
index eaf23fda..7561f80a 100644
--- a/fetch/object-fit-gallery-fetch/index.html
+++ b/fetch/object-fit-gallery-fetch/index.html
@@ -36,6 +36,7 @@
       
     
     
+
+    
   
-  
 
diff --git a/indexeddb-examples/idbcursor/index.html b/indexeddb-examples/idbcursor/index.html
index d8fa6c6e..e8ef4fa1 100644
--- a/indexeddb-examples/idbcursor/index.html
+++ b/indexeddb-examples/idbcursor/index.html
@@ -18,7 +18,7 @@ 
    Basic IDBCursor example — Rush studio albums 74-85
    
     
     
     
-  
 
-  
+    
+  
 
diff --git a/indexeddb-examples/idbindex/index.html b/indexeddb-examples/idbindex/index.html
index 99fdaef4..51f59d1c 100644
--- a/indexeddb-examples/idbindex/index.html
+++ b/indexeddb-examples/idbindex/index.html
@@ -6,8 +6,7 @@
     
+      type="text/css" />
     
   
   
@@ -32,7 +31,6 @@ 
    Basic IDBIndex example — contacts directory
    
     
    
       Click/focus each table column heading to sort the data by that column.
     
    
+    
   
-
-  
 
diff --git a/indexeddb-examples/idbkeyrange/index.html b/indexeddb-examples/idbkeyrange/index.html
index 8ad516f9..7a901d32 100644
--- a/indexeddb-examples/idbkeyrange/index.html
+++ b/indexeddb-examples/idbkeyrange/index.html
@@ -88,7 +88,8 @@ 
    
 
       
     
-  
+
 
   
+  
 
diff --git a/insert-adjacent/insertAdjacentElement.html b/insert-adjacent/insertAdjacentElement.html
index 511908f1..45e30958 100644
--- a/insert-adjacent/insertAdjacentElement.html
+++ b/insert-adjacent/insertAdjacentElement.html
@@ -1,99 +1,102 @@
 
 
-
-  insertAdjacentElement() demo
-  
-
-
-
-
    Click colored box to select it, then use the first two buttons below to insert elements before and after your selection.
    
-
-
    
-  
    
-
    
-
-
-
-
-
-
-
-
-
+  
+    insertAdjacentElement() demo
+    
+  
+  
+    
    
+      Click colored box to select it, then use the first two buttons below to
+      insert elements before and after your selection.
+    
    
+
+    
    
+      
    
+      
    
+      
    
+      
    
+    
    
+
+    
+    
+    
+
+    
+  
 
diff --git a/insert-adjacent/insertAdjacentText.html b/insert-adjacent/insertAdjacentText.html
index 86aa5abc..c51d3570 100644
--- a/insert-adjacent/insertAdjacentText.html
+++ b/insert-adjacent/insertAdjacentText.html
@@ -1,57 +1,55 @@
-
+
 
-
-  insertAdjacentText() demo
-  
-
-
-
-
    Enter some text to add, then use the first two buttons below to insert your text after the existing text.
    
-
-
    
-  
    This is my text
    
-
    
-
-
    
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+  
+    insertAdjacentText() demo
+    
+  
+  
+    
    
+      Enter some text to add, then use the first two buttons below to insert
+      your text after the existing text.
+    
    
+
+    
    
+      
    This is my text
    
+    
    
+
+    
    
+    
+    
+    
+
+    
+  
+
diff --git a/matchmedia/index.html b/matchmedia/index.html
index fd6c93cb..5440f748 100644
--- a/matchmedia/index.html
+++ b/matchmedia/index.html
@@ -1,60 +1,59 @@
-
+
 
-
-  matchMedia test file
-  
-
-
-  
    matchMedia test
    
-
-  
    
-    
-
-
-
-
-
-
\ No newline at end of file
+  
+    matchMedia test file
+    
+  
+  
+    
    matchMedia test
    
+
+    
    
+
+    
+  
+
diff --git a/mediaquerylist/index.html b/mediaquerylist/index.html
index 0412d239..de4c654b 100644
--- a/mediaquerylist/index.html
+++ b/mediaquerylist/index.html
@@ -1,64 +1,60 @@
 
 
-
-  
-  
-  MediaQueryList example
-  
-
-
-  
    matchMedia test
    
-
-  
    
-
-
-
-
-
-
+  
+    
+    
+    MediaQueryList example
+    
+  
+  
+    
    matchMedia test
    
+
+    
    
+
+    
+  
 
diff --git a/pointerevents/Multi-touch_interaction.html b/pointerevents/Multi-touch_interaction.html
index bf5fc535..c62d8a1a 100644
--- a/pointerevents/Multi-touch_interaction.html
+++ b/pointerevents/Multi-touch_interaction.html
@@ -1,176 +1,186 @@
 
-
-
-
-Pointer Events multi-touch interaction
-
-
-
-
-
-
-
    Multi-touch interaction
    
- 
- 
    Tap, Hold or Swipe me 1
    
- 
    Tap, Hold or Swipe me 2
    
- 
    Tap, Hold or Swipe me 3
    
-
- 
- 
- 
- 
    
- 
-
+  
+    Pointer Events multi-touch interaction
+    
+    
+
+    
+  
+  
+    
    Multi-touch interaction
    
+    
+    
    Tap, Hold or Swipe me 1
    
+    
    Tap, Hold or Swipe me 2
    
+    
    Tap, Hold or Swipe me 3
    
+
+    
+    
+    
+    
    
+    
+  
 
diff --git a/pointerevents/Pinch_zoom_gestures.html b/pointerevents/Pinch_zoom_gestures.html
index 635be623..6d4bcce6 100644
--- a/pointerevents/Pinch_zoom_gestures.html
+++ b/pointerevents/Pinch_zoom_gestures.html
@@ -1,148 +1,159 @@
 
-
-
-
-Pointer Events pinch/zoom example
-
-
-
-
-
-
-
    Pointer Event pinch/zoom gesture
    
- 
- 
    Touch and Hold with 2 pointers, then pinch in or out.
    
-    The background color will change to pink if the pinch is opening (Zoom In) 
-    or changes to lightblue if the pinch is closing (Zoom out).
    
- 
- 
- 
- 
    
- 
-
+  
+    Pointer Events pinch/zoom example
+    
+    
+
+    
+  
+  
+    
    Pointer Event pinch/zoom gesture
    
+    
+    
    
+      Touch and Hold with 2 pointers, then pinch in or out.
    
+      The background color will change to pink if the pinch is opening (Zoom In)
+      or changes to lightblue if the pinch is closing (Zoom out).
+    
    
+    
+    
+    
+    
    
+    
+  
 
diff --git a/touchevents/Multi-touch_interaction.html b/touchevents/Multi-touch_interaction.html
index 5fd6c6ec..1541a352 100644
--- a/touchevents/Multi-touch_interaction.html
+++ b/touchevents/Multi-touch_interaction.html
@@ -1,6 +1,6 @@
 
-
-
-
-Touch Events tutorial
-
-
-
-
-
-
-
    Multi-touch interaction
    
- 
- 
     Tap, Hold or Swipe me 1
    
- 
     Tap, Hold or Swipe me 2
    
- 
     Tap, Hold or Swipe me 3
    
- 
     Tap, Hold or Swipe me 4
    
-
- 
- 
- 
- 
    
- 
-
+  
+    Touch Events tutorial
+    
+    
+
+    
+  
+  
+    
    Multi-touch interaction
    
+    
+    
    Tap, Hold or Swipe me 1
    
+    
    Tap, Hold or Swipe me 2
    
+    
    Tap, Hold or Swipe me 3
    
+    
    Tap, Hold or Swipe me 4
    
+
+    
+    
+    
+    
    
+    
+  
 
diff --git a/web-crypto/derive-bits/index.html b/web-crypto/derive-bits/index.html
index 74fa62e9..f7ac07de 100644
--- a/web-crypto/derive-bits/index.html
+++ b/web-crypto/derive-bits/index.html
@@ -49,7 +49,8 @@ 
    ECDH
    
       
     
 
-  
+
   
   
+
 
diff --git a/web-crypto/derive-key/index.html b/web-crypto/derive-key/index.html
index 23770a08..ca19acb3 100644
--- a/web-crypto/derive-key/index.html
+++ b/web-crypto/derive-key/index.html
@@ -179,8 +179,9 @@ 
    HKDF
    
         
       
     
-  
+
   
   
   
+
 
diff --git a/web-crypto/encrypt-decrypt/index.html b/web-crypto/encrypt-decrypt/index.html
index 25b2a0c8..8d8ccc93 100644
--- a/web-crypto/encrypt-decrypt/index.html
+++ b/web-crypto/encrypt-decrypt/index.html
@@ -1,9 +1,9 @@
 
 
   
-    
+    
     Web Crypto API example
-    
+    
   
 
   
@@ -11,29 +11,49 @@
       
    Web Crypto: encrypt/decrypt
    
 
       
    
-        
    This page shows the use of the encrypt() and decrypt() functions of the Web Crypto API. It contains four separate examples, one for each encryption algorithm supported:
    
+        
    
+          This page shows the use of the encrypt() and
+          decrypt() functions of the
+          Web Crypto API. It contains four separate examples, one for each encryption
+          algorithm supported:
+        
    
         
-        
    
+        
    
         
    Each example has five components:
    
         
         
    Try it:
    
         
       
    
 
@@ -43,13 +63,21 @@ 
    RSA-OAEP
    
           
    
             
    
               
-              
+              
             
    
-            
    Ciphertext:
    
-            
    Decrypted:
    
-            
-            
+            
    
+              Ciphertext:
+            
    
+            
    
+              Decrypted:
+            
    
+            
+            
           
    
         
 
@@ -58,13 +86,21 @@ 
    AES-CTR
    
           
    
             
    
               
-              
+              
+            
    
+            
    
+              Ciphertext:
             
    
-            
    Ciphertext:
    
-            
    Decrypted:
    
-            
-            
+            
    
+              Decrypted:
+            
    
+            
+            
           
    
         
 
@@ -73,13 +109,21 @@ 
    AES-CBC
    
           
    
             
    
               
-              
+              
+            
    
+            
    
+              Ciphertext:
             
    
-            
    Ciphertext:
    
-            
    Decrypted:
    
-            
-            
+            
    
+              Decrypted:
+            
    
+            
+            
           
    
         
 
@@ -88,22 +132,29 @@ 
    AES-GCM
    
           
    
             
    
               
-              
+              
+            
    
+            
    
+              Ciphertext:
             
    
-            
    Ciphertext:
    
-            
    Decrypted:
    
-            
-            
+            
    
+              Decrypted:
+            
    
+            
+            
           
    
         
-
       
     
 
+    
+    
+    
+    
   
-  
-  
-  
-  
 
diff --git a/web-crypto/export-key/index.html b/web-crypto/export-key/index.html
index 21d0fa88..9d0b65af 100644
--- a/web-crypto/export-key/index.html
+++ b/web-crypto/export-key/index.html
@@ -43,9 +43,10 @@ 
    Web Crypto: exportKey
    
 
     
 
-  
+
   
   
   
   
+
 
diff --git a/web-crypto/import-key/index.html b/web-crypto/import-key/index.html
index 209d39e7..b71f0e06 100644
--- a/web-crypto/import-key/index.html
+++ b/web-crypto/import-key/index.html
@@ -1,9 +1,9 @@
 
 
   
-    
+    
     Web Crypto API example
-    
+    
   
 
   
@@ -11,37 +11,63 @@
       
    Web Crypto: importKey
    
 
       
    
-        
    This page shows the use of the importKey() function of the Web Crypto API. It contains four separate examples, one for each import format supported:
    
+        
    
+          This page shows the use of the importKey() function of
+          the
+          Web Crypto API. It contains four separate examples, one for each import format
+          supported:
+        
    
         
-        
    Each example has the same structure: you get a message a button labeled "Import Key".
    
-        
    If you click "Import Key" then the example imports a particular key:
    
+        
    
+          Each example has the same structure: you get a message a button
+          labeled "Import Key".
+        
    
+        
    
+          If you click "Import Key" then the example imports a particular key:
+        
    
         
-        
    A new button is then displayed, labeled "Sign" or "Encrypt", depending on the key that was imported. You can click it to use the imported key to perform the appropriate operation and display the result.
    
+        
    
+          A new button is then displayed, labeled "Sign" or "Encrypt", depending
+          on the key that was imported. You can click it to use the imported key
+          to perform the appropriate operation and display the result.
+        
    
       
    
 
       
    
-
         
    
           
    Raw
    
           
    
             
    
               
-              
+              
+            
    
+            
    
+              Ciphertext:
             
    
-            
    Ciphertext:
    
-            
-            
+            
+            
           
    
         
    
 
@@ -50,12 +76,22 @@ 
    PKCS #8
    
           
    
             
    
               
-              
+              
+            
    
+            
    
+              Signature:
             
    
-            
    Signature:
    
-            
-            
+            
+            
           
    
         
    
 
@@ -64,12 +100,22 @@ 
    SubjectPublicKeyInfo
    
           
    
             
    
               
-              
+              
             
    
-            
    Ciphertext:
    
-            
-            
+            
    
+              Ciphertext:
+            
    
+            
+            
           
    
         
 
@@ -78,21 +124,30 @@ 
    JSON Web Key
    
           
    
             
    
               
-              
+              
+            
    
+            
    
+              Signature:
             
    
-            
    Signature:
    
-            
-            
+            
+            
           
    
         
-
       
     
 
+    
+    
+    
+    
   
-  
-  
-  
-  
 
diff --git a/web-crypto/sign-verify/index.html b/web-crypto/sign-verify/index.html
index a184a484..5df26c5e 100644
--- a/web-crypto/sign-verify/index.html
+++ b/web-crypto/sign-verify/index.html
@@ -88,8 +88,7 @@ 
    RSASSA-PKCS1-v1_5
    
                 id="rsassa-pkcs1-message"
                 name="message"
                 size="25"
-                value="The owl hoots at midnight"
-              />
+                value="The owl hoots at midnight" />
             
             
    
               Signature:
@@ -109,8 +108,7 @@ 
    RSA-PSS
    
                 id="rsa-pss-message"
                 name="message"
                 size="25"
-                value="The tiger prowls at dawn"
-              />
+                value="The tiger prowls at dawn" />
             
    
             
    
               Signature:
@@ -130,8 +128,7 @@ 
    ECDSA
    
                 id="ecdsa-message"
                 name="message"
                 size="25"
-                value="The eagle flies at twilight"
-              />
+                value="The eagle flies at twilight" />
             
    
             
    
               Signature:
@@ -151,8 +148,7 @@ 
    HMAC
    
                 id="hmac-message"
                 name="message"
                 size="25"
-                value="The bunny hops at teatime"
-              />
+                value="The bunny hops at teatime" />
             
    
             
    
               Signature:
@@ -172,8 +168,7 @@ 
    Ed25519
    
                 id="ed25519-message"
                 name="message"
                 size="25"
-                value="The lion roars near dawn"
-              />
+                value="The lion roars near dawn" />
             
    
             
    
               Signature:
@@ -184,10 +179,11 @@ 
    Ed25519
    
         
       
     
+
+    
+    
+    
+    
+    
   
-  
-  
-  
-  
-  
 
diff --git a/web-crypto/unwrap-key/index.html b/web-crypto/unwrap-key/index.html
index 4bbbe9ba..28bfe6d0 100644
--- a/web-crypto/unwrap-key/index.html
+++ b/web-crypto/unwrap-key/index.html
@@ -54,7 +54,8 @@ 
    PKCS #8/RSA-PSS/AES-GCM
    
       
     
 
-  
+
   
   
+
 
diff --git a/web-crypto/wrap-key/index.html b/web-crypto/wrap-key/index.html
index f16d25a2..b84fb8a5 100644
--- a/web-crypto/wrap-key/index.html
+++ b/web-crypto/wrap-key/index.html
@@ -44,9 +44,10 @@ 
    Web Crypto: wrapKey
    
 
     
 
-  
+
   
   
   
   
+
 
diff --git a/web-storage/event.html b/web-storage/event.html
index 253bf586..24eb7e8c 100644
--- a/web-storage/event.html
+++ b/web-storage/event.html
@@ -1,31 +1,29 @@
 
 
   
-    
-    
-    
+    
+    
+    
 
     Web Storage API storage event output
 
-    
+    
   
 
   
-  
    
-    
    Event output
    
+    
    
+      
    Event output
    
 
-    
      
-      
    • Key: 
      • 
-      
    • Old value: 
      • 
-      
    • New value: 
      • 
-      
    • URL: 
      • 
-      
    • Storage area: 
      • 
-    
    
+      
      
+        
    • Key: 
      • 
+        
    • Old value: 
      • 
+        
    • New value: 
      • 
+        
    • URL: 
      • 
+        
    • Storage area: 
      • 
+      
    
 
-    
    Go back to the main example page.
    
-
-
-  
    
+      
    Go back to the main example page.
    
+    
    
+    
   
-  
 
diff --git a/web-storage/index.html b/web-storage/index.html
index 9733dbfb..005da490 100644
--- a/web-storage/index.html
+++ b/web-storage/index.html
@@ -1,48 +1,61 @@
 
 
   
-    
-    
-    
+    
+    
+    
 
     Web Storage API example
 
-    
+    
   
 
   
-  
    
-    
    Web storage
    
+    
    
+      
    Web storage
    
 
-    
    This example is designed to demonstrate usage of the W3C Web Storage API. It should work as far back as IE8. Choose custom background colours, logos and fonts from the below drop down menus, then try closing and reopening the page — you will find that your choices are remembered, as they are stored using Web Storage. You can also visit the storage event output (opens in new tab). Open this, change some values in the index page, then look at the events page — you'll see the storage changes reported.
    
+      
    
+        This example is designed to demonstrate usage of the
+        W3C Web Storage API. It should work as far back as IE8. Choose custom background colours,
+        logos and fonts from the below drop down menus, then try closing and
+        reopening the page — you will find that your choices are remembered, as
+        they are stored using Web Storage. You can also visit the
+        storage event output (opens in
+        new tab). Open this, change some values in the index page, then look at
+        the events page — you'll see the storage changes reported.
+      
    
 
-    
    
-      
    
-        
-	    
-      
    
-      
    
-        
-        
-      
    
-      
    
-        
-        
-      
    
-    
    
+      
    
+        
    
+          
+          
+        
    
+        
    
+          
+          
+        
    
+        
    
+          
+          
+        
    
+      
    
 
-    
    
-    
-  
    
+      
    
+      
+    
    
+
+    
+    
   
-  
-