HTML Refresher and Detailed Study - Table of Contents for Post Series
Last updated on 26 May 2026
Introduction
Period: 11 April 2026 to 26 May 2026 (part-time)
This is an ongoing refresher on HTML topics that I had quickly studied perhaps in end 2024 and early 2025, and then referred to when needed for software development learning or work I was doing.
But there were many HTML topics covered by w3schools.com which I had not got into in detail earlier on. This time around I did study most of these topics in some detail. I also studied some advanced topics like Web Service Workers.
So it is a refresher cum detailed study. I have put up a a series of longish blog posts related to this HTML refresher and detailed study, with each post having a Contents section with internal links to the sections. This post lists all the Contents of all the posts in the series with the internal links going directly to the related section in the post.
HTML Refresher and Detailed Study - Part 1
Contents
Misc: title attr, formatting elements, link rel (and more)
- title attribute
- HTML Formatting Elements
- Investing time for Accessibility
- HTML Formatting Elements Continued
- link rel
- _parent and _top values for target attribute
- href mailto
- Confusion Due To React and Next.js Components That Replace HTML elements
img element, Image Maps, picture element
- img element width and height attributes
- Image Maps - map and area tags not used nowadays
- picture element
Misc: Description lists, boolean attributes, meta viewport, base element (and more)
- link type attribute
- HTML Description Lists
- Using CSS property float:left to display a list horizontally not used nowadays
- class and id attribute values are case sensitive
- Boolean attributes like disabled
- title attribute and title element
- meta viewport typical statement
- base element
- When to use href attribute and when to use src attribute
Misc elements: footer, aside, figure, figcaption, details, summary, time (and more)
- footer element
- var, kbd and samp elements
- aside element
- figure and figcaption elements
- Most MERN software I saw Had Limited Use of HTML Semantic elements (like figure, footer etc.)
- details and summary elements
- time element
- Quick overview of ARIA
Misc: UTF-8, nbsp, Unicode, Emojis (and more)
- meta charset UTF-8 - recommended
- UTF-8 is comprehensive. So why have UTF-16
- UTF-8 is good choice even for Devanagari, Chinese or Japanese web documents
- nbsp (Non-Breaking Space)
- Unicode characters can be copy-pasted to VS Code. Unicode character list sites
- XHTML is not so relevant now
- Emojis history. XML related tech less used in web nowadays
- UTF-8 has no versions typically but UNICODE has versions
- What to look at if some UTF-8 characters (like Devanagari characters) are not rendered on web page
HTML Refresher and Detailed Study - Part 2
Contents
Forms
- About HTML Forms
- name attribute in Forms
- FormData in Client and Server side
- Scenarios where using same string for id and name attributes will not work
- Scenario where name attribute is useful for input button elements
Some elements not typically used in React projects: datalist, output, datatime-local, input type image
- datalist is not used often in React projects
- output element is not typically used in React projects
- output element is not so popular in plain JavaScript projects
- datetime-local is not used much in React projects
- input type image is not commonly used in React projects
Misc elements: input type number, input range, search
- input type number with step handles decimals
- input range does not show selected value
- search element
React, Astro and HTML
- React impact on HTML elements usage
- Plain HTML dev today is rare. It will typically be with framework like React or Astro
Misc: autocomplete, input form, formaction, formmethod
- autocomplete attribute default value is On
- input form attribute is rarely used
- formaction, formmethod attributes are rarely used
canvas and SVG
- canvas element usage
- SVG more commonly used in React apps than canvas
- canvas is used when svg struggles due to scale (over 1000 objects)
- getContext method
- getContext method holds keys to graphics card (GPU)
Misc: video..source element, html plugins, geolocation API, Storage API
- In video .. source element, providing type attribute is recommended
- html plugins: object and embed elements are rarely used nowadays
- geolocation success function time interval
- geolocation API is universally supported
- Drag and Drop API is typically not used in React apps
- typeof Storage used in early 2010s for feature detection
- Better to use getItem and setItem methods of localStorage instead of JavaScript properties shorthand
HTML Refresher and Detailed Study - Part 3
Contents
Web Workers and Service Workers
HTML Standards and who controls them
- HTML standard is massive now
- HTML Living Standard
- W3C is no longer Boss of HTML; Browser vendors are in charge
- Chromium (Google/Microsoft), WebKit (Apple) and Gecko (Mozilla) are bosses of the web now
- Living Standard is followed by Platform Engineering (Browsers). Product Engineering (.NET, Java) uses versions
- Big Tech has great power over web but Mozilla provides some balance
Misc Web APIs: Server-Sent Events (EventSource) API, Notifications API, History API, Intersection Observer API
- HTML Server-Sent Events API
- Push Notifications (Firebase Cloud Messaging)
- HTML Living Standard Notifications Support
- Basic Web APIs not mentioned in W3Schools
- History API and IntersectionObserver API
Fetch Web API
- fetch API is Web API and not JavaScript language feature
- Node.js 18 onwards provides fetch API
- Historical background of fetch API
Misc: dialog element, Accessibility, search element, Client-Side Web Communication APIs (and more)
- W3Schools is a good site for HTML refresher and detailed study from typical web dev perspective
- dialog and ARIA
- a11y short form for accessibility
- click here is a problem for a11y
- search element
- dialog closedby attribute
- dialog with command attribute
- dialog popover attribute
- The "Local File" Security Barrier for iframe with youtube video and Web Workers
- Client-Side Web Communication APIs like postMessage API
HTML Refresher and Detailed Study - Part 4
Contents
Data attributes
- Data attributes in HTML
- Some React libraries use data attributes
- W3Schools HTML tutorial has limited coverage of data attributes
- MDN guide page for data attributes is recommended by Gemini
- Dynamically generated HTML elements may be more easily targetted via data attributes
- Backend server populates elements with data attributes to identify them
- State tracking using data attributes
- Passing small bits of configuration using data attributes
- Some React libraries using data attributes to identify elements it interacts with
- React Styling libraries like Headless UI using data attributes to signal state to CSS
- React library using data attributes for metadata avoiding prop drilling
- Data attributes store data in DOM itself in contrast to JavaScript variables
- Data attributes are more easily visible in Chrome Inspector/DevTools as compared to JavaScript variables
- Small data-attributes.html sample test file
XSS security vulnerability of innerHTML; textContent is safe
- textContent needs newline escape character and CSS white-space pre-line for line breaks
- XSS security vulnerability of innerHTML
- innerHTML security flagging is a problem. textContent avoids that
- Use textContent with specific CSS instead of innerHTML for multi-line content to avoid security flagging
Misc: Notifications API, IndexedDB, Cookies, Authentication, Fetch API
- HTML Notifications API are for system notifications and so useful only when combined with service worker
- IndexedDB
- Video: IndexedDB - What is it, and when you should choose it
- Official Google Video: IndexedDB - Progressive Web App Training
- Cookies rarely used by App Dev nowadays but HttpOnly Cookie used for better security for tokens like JWT
- Google services access: API Key and OAuth 2.0 / OpenID
- Plain JS libraries for cookies
- Header-based Authentication common for React SPAs
- More detailed: Cookies rarely used at App dev level now. Libraries use HttpOnly cookie for JWT as it is more secure
- Fetch API Refresher Using Modern Async Await for Promises
- In React/Nextjs apps I typically used Axios library for fetch type operations
- Handling Fetch Promises: Modern Async/Await is preferred over Legacy .then() Chaining
- Promise.all can be used with Async/Await; Avoiding overloading mind with .then() promise chaining syntax details
HTML Refresher and Detailed Study - Part 5
Contents
Misc: <noscript>, aside element not used for sidebar, code and pre elements used together, figure element used with picture element
- Gemini Summary of the <noscript> Discussion
- Gemini Summary of aside element not being used for sidebar as nav element is enough for semantics and a11y
- Gemini Summary about <code> and <pre> Elements Used Together
- Can figure element be used with picture element?
Misc: HTML entities, symbols and emojis, URL ASCII limitation, URL Encoding, autocomplete enumerated attribute
- HTML entities, symbols and emojis
- URL ASCII limitation
- URL Encoding
- autocomplete is an enumerated attribute and not a boolean attribute
Misc: Select dropdown size, React apps use custom combobox, picture element, thead, tbody and tfoot
- HTML Select dropdown size cannot be specified
- React apps use custom combobox type components instead of input with datalist HTML elements
- Picture Element - Detailed Look
- Using thead, tbody and tfoot is good practice
addEventListener safer than inline JS; Vanilla JS vs React security; package.json enables GitHub Dependabot security
- In Plain JS, using addEventListener() is best practice for wiring event handlers
- Inline JavaScript: Vulnerable to XSS in plain JS, but protected in React's event system
- Plain JS app security has to be handled by dev. React provides security by default.
- Dependency Manager model (like package.json) enables security systems like GitHub's Dependabot
HTML Refresher and Detailed Study - Part 6
Contents
WebSockets Intro
- WebSockets Basic Exposure
- MDN docs for WebSockets is too complex
- WS/WSS are protocols but use a hack to piggyback over HTTP protocol for initial handshake/setup
- After HTTP piggyback handshake, WebSocket connection is somewhat similar to BSD TCP socket connection
- WebSocket communication is called real-time by Web devs
- Technical precision wise, WebSockets are 'soft real-time' and not 'hard real-time'
- 'real-time' terminology drift between early 2000s and now
Vanilla JS real-time data visualization app using Web Sockets, Canvas API and JSON data
- Plain JS (soft) real-time data visualization app using Web Sockets, Canvas API and JSON data
- Performance aspects of Canvas API draw functions including specific case of Windows 11
- Short overview of WebGL
- Implementation of 'high-performance live dashboard' WebSockets, Canvas and JSON plain JS app
- Server-Sent Events vs. WebSockets for Live Telemetry Dashboard app
- Using Two-way communication over WebSockets for Live Telemetry Dashboard app
- Global/Broadcast architecture over WebSockets when serving thousands of concurrent clients
- Common practice to stringify JSON data before sending on WebSockets using Text Frames; Massive scale may need Binary Frames
HTML Refresher and Detailed Study - Part 7
Contents
Top-Level design of chat application with offline support using WebSockets and Service Worker
Very Basic Service Worker
- Very basic Service Worker example with only console logs
- Calling register() on every page load is not a problem
- skipWaiting() forcibly removes old service worker version but has risk of mismatch with other app JS code
- Activate event is fired when browser promotes installed script to active worker
- if ('serviceWorker' in navigator) is best practice for feature detection
- Automatic Service Worker uninstallation (unregistration) is rare
- Large number of registered Service Workers in Chrome is normal and not a performance drain
- Unused service worker should be unregistered manually as automatic cleanup may not happen
- Service Worker status change from Running to Stopped is based on idle time
- Chrome DevTools SW panel keeps Running SW in Running state; chrome://serviceworker-internals/ does not do that
- Testing Service Worker Running and Stopped states
- On Win 11 Service Worker is a separate OS thread; Stateless architecture due to transient lifetime of thread
- Service Worker (transient) lifetime is very different from Web Worker lifetime
- self.clients.claim() immediately gets control of all active pages
- Activate event is fired only once for a particular version of Service Worker JS file
Service Worker with Offline Caching
- Service Worker with Network First caching example - Brad Traversy
- UI does not show whether app is showing live data or offline data
- waitUntil() prevents browser from killing thread until promise passed is settled (resolved or rejected)
- Deciphering chained invocations and nested code of Traversy example
- For top-level navigation, when offline, Browser usually will show network error even if it has required files in cache
- waitUntil() code in Traversy example omits error handling
- In waitUntil() code, catching errors for logging purposes and passing it up
- In JavaScript, throw does not need to be inside a try-catch block
- Service Worker with Cache First example that has Zombie app risk; Network First and Stale-While-Revalidate strategies
- Cache management strategies; Google Workbox
- MDN Service Worker sample code using async await which uses Cache First strategy
- Standard browser HTTP cache comes into play in Network First Service Worker caching strategy
- When online, browser will serve top-level navigation page directly from HTTP cache if file is present and within cache-expiry
- Even with no-cache, browser will save resource in cache but check with server for updated version; no-store results in resource not being saved
- Heuristic caching (guesswork based on some factor(s)) is used if server does not send any Cache-Control or Expires headers
- GitHub Pages and Netlify default Cache-Control headers
- For standard static sites, plain refresh (F5) usually gives latest page; Hard refresh (Ctrl+F5) bypasses HTTP cache and Service Worker cache
- Duplication of cache by browser and Service Worker
- Service Worker API does not have cache expiry support; Google Workbox provides expiration support
- Industry Standard is to avoid plain vanilla Service Worker caching and use Google Workbox or similar for SW caching
Service Worker Misc: Next.js, React, PWA hype
- My Next.js Gita app could get offline functionality if Service Worker caching is added
- By default, Next.js app does NOT have Service Worker functionality but it can be added
- Create React App (CRA) (deprecated) earlier versions added Service Worker functionality by default but was later discontinued
- PWA marketing hype in 2018-2022
HTML Refresher and Detailed Study - Part 8
Contents
Web Push API
- How Service Workers get Push Notifications (Web Push) from a server like in a chat application
- How small browser vendors handle Web Push infrastructure needs
- Tutorial Videos on Push Notifications (Web Push)
- JavaScript does not have interface keyword; Web IDL uses interface term which does not map directly to Java/C++ interface
- Akhilesh Rao Web Push, Service Worker and Notification tutorial
- Running and testing app
- Push Services queues messages for TTL if destination device is disconnected from Internet
Vanilla JS Chat with WebSockets
- Difficult to get tutorial combining vanilla JS, WebSockets and Service Worker
- Vanilla JS Real-Time Chat with WebSockets Tutorial Text Articles
- socket.io package is very popular for JS real-time applications; socket.io overview
- Vanilla JS Real-Time Chat with WebSockets Tutorial Video
- Broadcast functionality is not suitable for this task's objective
- Limit server to uppercase echo functionality to keep it simple
- Production (real world) chat app architecture
- In uppercase echo server app, use case of user sending message when app is offline
- In uppercase echo server app, use case of server having message to send to user but client app is offline
- Service Worker is needed to provide cached client files when client device is offline
- Service Worker in context of chat app is worth knowing
- Chat app use case (details): App is offline when user sends a message
- Chat app use case (details): User closes tab with pending message - Background Sync
- Chat app use case (details): Server sends Web Push Notification as client app is offline
- Concise capture of technologies involved in chat app with offline capability
Vaibhav Thakur vanilla JS Chat and WebSockets tutorial
- Vaibhav Thakur Chat with WebSockets tutorial
- Chat client WebSocket auto-reconnect code is mandatory in production
- Debouncing the sendTyping(true) message
Thomas Sentre vanilla JS Chat and WebSockets tutorial
- Thomas Sentre Chat with WebSockets tutorial
- Explanation of client blob message reading code - by Gemini
- Server-Side Message Handling and Binary Data (by Gemini)
Dave Gray vanilla JS Chat and WebSockets tutorial
- Dave Gray Chat tutorial - Intro to WebSockets
- WebSocket Node.js server Buffer.from() defensive programming; Implicit Coercion of Buffer to string using Template Literal
Node.js third party ws package (WebSockets) returns Buffers not strings
HTML Refresher and Detailed Study - Part 9
Contents (sections and/or jump-links)
Private GitHub repo folder for uppercase Echo Chat server: uppercase-echo-chat
Private GitHub repo folder for advanced version uppercase Echo Chat server: adv-uppercase-echo-chat
Implementation of uppercase Echo Chat application with offline support using WebSockets and Service Worker
Stage 1: Simple delayed uppercase Echo Chat server and client with WebSockets but without Service Worker
Stage 2: Adding Service Worker Network First Caching (Offline App Shell)
- Stage 2: Adding Service Worker Network First Caching (Offline App Shell)
- Why have Pre-caching when we already have dynamic caching?
- Stage 2 Testing
- How to prevent Service Worker deleting another Service Worker's cache for projects having subfolders with separate Service Workers
- Adding network online/offline detection code (navigator.onLine)
- Stage 2: Further Testing
Stage 3A: Offline Message Queuing with IndexedDB implemented with custom IndexedDB wrapper functions
- Stage 3A: Offline Message Queuing with IndexedDB implemented with custom IndexedDB wrapper functions
- Stage 3: Test plan
- IndexedDB tutorials
- Custom wrapper functions provided by Gemini for IndexedDB code
- Stage 3 idb variant possibility
- Test Results for Stage 3A: Offline Message Queuing with IndexedDB (custom IndexedDB wrapper fns)
Stage 3B: Offline Message Queuing with IndexedDB implemented with idb package
- Stage 3B: Offline Message Queuing with IndexedDB implemented with idb package
- Better to use idb with ES modules (type module in script element) and not with legacy global variables (iife)
- LiveServer origin (http://127.0.0.1:5501) local storage, IndexedDB and Service Workers data shared by all apps run at that origin; Cleaning this data
- Separate subdomain apps have unique origins; Same subdomain apps (GitHub pages) have same origin (cross-app browser data leak danger)
- Custom Subdomains (purchased) mapped to GitHub Pages (free) provides unique Origins across Subdomains
- Netlify and Vercel use separate subdomains for separate apps and so provide unique Origins
- Stage 3B: Testing
Plan for WebSocket auto-reconnect and advanced Progressive Web App features in uppercase Echo Chat app
Stage 4: WebSocket auto-reconnect
- Stage 4: WebSocket auto-reconnect
- Stage 4: Testing
- WebSocket auto reconnect attempts with exponential backoff
- Service Worker cache interference with update of web page on refresh
- Shared dbPromise object holding IndexedDB database connection leverages JS Promise settled value caching
Disabling Live Server browser auto refresh for a project
Implementation of advanced (PWA) version of uppercase Echo Chat application
- Plan for advanced Progressive Web App features in uppercase Echo Chat app (Stages 5 to 7)
- Tested advanced version app baseline in new folder adv-uppercase-echo-chat initialized as copy of Stage 4 app
- Small bug possibly in Gemini web chat UI related to network connectivity resilience
- Stage 5 Chat History Persistence
- Stage 5 snapshot folder created
HTML Refresher and Detailed Study - Part 10
Contents (sections and/or jump-links)
Private GitHub repo folder for advanced version uppercase Echo Chat server: adv-uppercase-echo-chat
Stage 6 Background Sync API (Offline Sending) Server refactor
- Initial Code Changes for Stage 6 Background Sync API Server refactor
- ws library Server method port and server parameters
- Testing stage 6 server with POST requests using VS Code "REST Client" Extension and PowerShell Invoke-RestMethod
Stage 6 Background Sync API Client refactor
- Initial suggested code changes for Stage 6 Background Sync API Client refactor
- Background Sync API limited availability - Not supported on Firefox and Safari
- register method for sync is functionally different from register for Service Worker
- Duplicate register calls for sync are ignored
- MDN documentation for Background Sync API is poor (as it is not an official standard)
- Background Sync spec site has 'UNOFFICIAL DRAFT' plastered over it
- MDN vendor neutrality
- MDN is now jointly sponsored by Mozilla, Google, Microsoft, and others; MDN history
- Microsoft and Google both multi-trillion dollar companies seem to be main financiers of Core Browser level Web Dev Reference documentation
- Stage 6 Client refactor implementation
- Initial client testing and bugfixing
- Preventing client race condition for syncing offline messages between UI thread and Service Worker
- Using IIFE inside event.waitUntil()
- MDN documentation for Clients API is good (as it is ratified W3C standard)
- Testing prevention of race condition for offline sync in client between UI thread and Service Worker
- Checking Service Worker console logs when no associated client tab is open
- Service Worker fetch does not automatically retry like browser and so results in LiveServer fetch network failure at times
- Stage 6 completion snapshot folder created
- 2002 vs 2026 Global Top Market Cap Companies
Comments
Post a Comment