Add new Scripts section with async, defer, and integrity examples

joshbuchea · web-flow · commit 40a1e0760993 · 2026-04-29T09:26:12.000-10:00
diff --git a/README.md b/README.md
@@ -12,6 +12,7 @@
 - [Elements](#elements)
 - [Meta](#meta)
 - [Link](#link)
+- [Scripts](#scripts)
 - [Icons](#icons)
 - [Social](#social)
   - [Facebook Open Graph](#facebook-open-graph)
@@ -269,6 +270,38 @@ These elements provide information for how a document should be perceived, and r
 
 - 📖 [Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml)
 
+## Scripts
+
+```html
+<!--
+  Scripts: place <script> tags at the end of <body> when possible.
+  The following attributes control loading behavior when placed in <head>:
+-->
+
+<!-- Blocks HTML parsing and content rendering until the script is fetched and executed -->
+<script src="script.js"></script>
+
+<!-- The script will be fetched in parallel with parsing and executed as soon as it is available (before parsing completes) -->
+<script async src="script.js"></script>
+
+<!-- The script will be fetched in parallel with parsing and executed when the page has finished parsing -->
+<script defer src="script.js"></script>
+
+<!-- async takes precedence in modern browsers; defer acts as a fallback for older browsers that don't support async -->
+<script async defer src="script.js"></script>
+
+<!-- Inline script -->
+<script>
+  // function(s) go here
+</script>
+
+<!-- Subresource Integrity (SRI): use the integrity attribute to verify that the fetched resource has been delivered without unexpected manipulation -->
+<script src="https://example.com/script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"></script>
+```
+
+- 📖 [async vs defer attributes](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)
+- 📖 [Subresource Integrity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)
+
 ## Icons
 
 ```html
