HTML Refresher and Detailed Study - Index
Introduction
Period: 11 April 2026 to 14 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 page is an index page having 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 Accessability
- 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, Accessability, 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 accessability
- 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
Comments
Post a Comment