HTML

Notes

• As a general rule, if there will be only one such element on the page, you can use an id. Otherwise, use a class.
• <form method=post\> is good to communicate a mutation.
• When I work on a website, I set the body to contenteditable="true". This allows you to edit all text on the page, which I find helpful to improve the content, and also enables spell checking.
• span is an inline div, it doesn't go to a new line.
• use span for text, div for everything else (buttons, lines etc.)
• HTML file inputs can access photos, videos, and audio captured directly by the device's camera

Code

<!-- Embed email inside link -->
<a href="mailto:[email protected]">Email me</a>

<!-- Add image to the side with link -->
<!-- Useful in GitHub readmes. Can adjust width or add height. -->
<img
  src="https://i.imgur.com/hZe2AUY.png"
  align="right"
  width="70"
/>](https://nodejs.org)

<!-- Breaking space. Can use in readme to separate things. -->
&nbsp;

<!-- Collapsable content -->
<details>
  <summary>Table of Contents</summary>

  * [About](#about) * [Screenshots](#screenshots) * ..
</details>

<!-- line break -->
<br />

Examples

<!-- to see difference of span with inline -->
<p>
Hi<span> I'm inline</span>
</p>
<p>
Hi<div>oh no break</div>
</p>

Links

• HTML reference
• HTML Standard (Twitter)
• DOM Enlightenment - Exploring the relationship between JavaScript and the modern HTML DOM.
• Virtual DOM is pure overhead (2018) (HN) (HN)
• Folding the DOM (2019)
• About HTML semantics and front-end architecture (2012)
• Simple HTML form for your website
• HEAD - List of everything that could go in the head of your document.
• HTML Living Standard (Multipage version) (Code)
• Learn to Code HTML & CSS book
• Native HTML Autocomplete with datalist
• HTML isn’t done! (Chrome Dev Summit 2019)
• A History of HTML Parsing at Cloudflare (2019)
• html-tags - List of standard HTML tags.
• hast - Hypertext Abstract Syntax Tree format.
• Optimal Virtual DOM (2019)
• tags-input - Input element with tag input.
• HTML attributes to improve your users' two factor authentication experience (2020) (HN)
• Native HTML Elements with CSS superpowers
• A Complete Guide to Links and Buttons (2020)
• pup - Parsing HTML at the command line.
• How to Build HTML Forms Right: Semantics (2020)
• sal - Performance focused, lightweight scroll animation library.
• MVP.css - Minimalist stylesheet for HTML elements. No class names, no frameworks, just semantic HTML. (Code)
• HTML DOM - Common tasks of managing HTML DOM with vanilla JavaScript. (Code) (HN)
• hyper(HTML) - Fast & Light Virtual DOM Alternative available for Node.js and NativeScript too.
• Open Graph Image as a Service - Serverless service that generates dynamic Open Graph images that you can embed in your <meta> tags.
• Responsive Images the Simple Way (2020)
• sahtml-query - Fast and low memory query API for HTML (node.js).
• HTML is more complicated than you think (2020)
• X GIF - Custom element for flexible GIF playback.
• HTMLHint - Static code analysis tool you need for your HTML. (Code)
• Can I Include - Understand which tag you can include in another.
• htmx - High power tools for HTML. (Code) (HN) (Lobsters) (Lobsters 2)
• What if we'd had better html-in-js syntax all along? (2020) (Lobsters) (HN)
• PostHTML - Tool for transforming HTML/XML with JS plugins.
• All Visible HTML Elements - Simple list of all visible and style-able HTML elements. The list itself does not style any of these elements. (Code)
• pdf2htmlEX - Convert PDF to HTML without losing text or format.
• htmlparser2 - Forgiving html and xml parser.
• Awesome lit-html
• Grid.js - Free and open-source HTML table plugin written in TypeScript. (HN) (Code) (Grid.js Website code)
• keen-slider - HTML touch slider carousel with the most native feeling.
• HTML Tutorial for Beginners 101 (Including HTML5 Tags) (2020)
• ElaAdmin HTML5 Admin Dashboard Template
• HTML5 Boilerplate - Professional front-end template for building fast, robust, and adaptable web apps or sites. (Code)
• H5BP projects
• HTML Road Guide
• Why Forking HTML Into A Static Language Doesn't Make Sense (2020) (Lobsters)
• Building GitHub-style Hovercards with Stimulus and HTML-over-the-wire (2020)
• Slingcode - Personal computing platform in a single html file.
• ThebeLab - Turns your static HTML pages into interactive ones, powered by a kernel. (Docs)
• HTML+CSS Tutorial
• drag-drop - HTML5 drag & drop for humans.
• HTML APIs: What They Are And How To Design A Good One (2017)
• Creating a sitemap.xml from a pile of HTML files
• DOM Expressions - Fine-Grained Runtime for Performant DOM Rendering.
• Form Design
• xm - Extensible HTML. (Docs)
• DOMPurify bypass: XSS via HTML namespace confusion (2020) (HN)
• The usability of HTML elements (2020) (HN)
• Awfice - Collection of tiny office suite apps. (Article) (HN)
• croquis.js - HTML5 drawing tool library.
• Emmet - Web-developer’s toolkit for boosting HTML & CSS code writing. (Web)
• This page is a truly naked, brutalist HTML quine (HN)
• Konva - HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. (Web)
• Typed HTML - TypeSafe HTML templates using TypeScript. No need to learn a template library.
• he - Robust HTML entity encoder/decoder written in JavaScript.
• bluemonday - HTML sanitizer implemented in Go. It is fast and highly configurable.
• vanilla-colorful - Tiny color picker custom element for modern web apps.
• HTML forms, Databases, Integration tests (2020)
• Tocbot - Build a table of contents from headings in an HTML document. (Web)
• async-htm-to-string - Renders a htm tagged template asyncly into a string.
• HTML and CSS simple tips and tricks for your website
• Headers.CSS - Blueprint HTML and CSS for 17+ website headers. (Code)
• minify-html - Fast and smart HTML + JS minifier, available for Rust, Node.js, Python, Java, and Ruby.
• HTML & CSS Is Hard | Friendly web development tutorial
• imperative-html - Small JavaScript library for creating HTML (and SVG) elements in a web browser.
• lit-html-server - Render lit-html templates on the server as strings or streams (and in the browser too).
• hypertag - HTML tag parser built for speed.
• DomStorm - Dashboard for interesting DOM tricks/techniques. (Code)
• Alt vs Figcaption (2020)
• Ultralight - Next-Generation HTML Renderer for Desktop Apps and Games. (Code)
• The Zen of index.html (2020)
• PostHTML - Use variables, JS-like expressions, and even markup-powered logic in your HTML. (Web)
• Hotwire - Alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. (Tweet) (HN) (Lobsters) (Article) (Why Hotwire Could be the Future of Front-end Dev) (The time is right for Hotwire) (Lobsters) (Hotwire in Action) (Reddit) (Hotwire Newsletter)
• entities - Encode & decode HTML & XML entities with ease & speed.
• HTML5 still doesn't replicate what mattered about Flash (2020) (HN)
• The unreasonable effectiveness of simple HTML (2021) (HN)
• Managing focus in the shadow DOM (2021)
• rehype - HTML processor powered by plugins part of the unified collective. (Awesome)
• linkedom - Triple-linked lists based DOM implementation.
• bin2png - Embed binary data inside an HTML file in an efficient way.
• litehtml - Fast and lightweight HTML/CSS rendering engine. (Web)
• Gorillas’ nav: a case study (2021)
• Under-Engineered Select Menus (2021)
• Parsed HTML Rewriter - DOM-based implementation of Cloudflare Worker's HTMLRewriter.
• htmlq - Like jq, but for HTML. Uses CSS selectors to extract bits content from HTML files. (HN) (Lobsters)
• Beautiful PDFs from HTML (Code) (HN)
• SelectMadu - Replacement for the select menu, with support for searching, multiple selections, async data loading and more.
• Sortable Table Columns (2021)
• My current HTML Boilerplate (2021) - Summarized which elements I use for the basic structure of a HTML document in 2021, with explanations why. (HN)
• Ammonia - Repair and secure untrusted HTML.
• Modeling and Reasoning about DOM Events
• html-parsed-element - Base custom element class with a reliable parsedCallback method.
• focus-trap - Trap focus within a DOM node.
• Incremental DOM - Library for building up DOM trees and updating them in-place when data changes.
• The Humble <img> Element And Core Web Vitals (2021)
• Update Canvas 2D API
• Google Docs will now use canvas based rendering (2021) (HN) (Lobsters)
• DOM Events - Learn about the DOM Event system through exploration.
• The Button Cheat Sheet (HN)
• HTML Parser Book - Idiosyncrasies of the HTML parser. (Code) (HN)
• Declarative Shadow DOM
• Your Ultimate Guide to Understanding DOM Events
• Stampino - Fast and extremely powerful HTML template system.
• Million - Lightweight compiler-augmented Virtual DOM. (HN) (Web) (HN)
• The right tag for the job: why you should use semantic HTML (2021)
• html5parser - Super fast and tiny HTML5 parser.
• templ - Strongly typed HTML templating language that compiles to Go code, and has great developer tooling.
• Capsid - Declarative DOM programming library based on TypeScript decorators.
• html5ever - High-performance browser-grade HTML5 parser.
• HTML Recipes - Collection of quick copy HTML snippets for a variety of common scenarios. (Code)
• xPath Finder - Click on any element to get the xPath.
• Marko - Declarative, HTML-based language that makes building web apps fun. (Web) (Marko Tags)
• Why are there no PUT and DELETE methods on HTML forms? (Lobsters)
• Improving responsiveness in text inputs (2021)
• Does shadow DOM improve style performance? (2021)
• Don't attach tooltips to document.body (HN)
• Accessible autocomplete - Autocomplete component, built to be accessible.
• DOM Testing Library - Simple and complete DOM testing utilities that encourage good testing practices. (Docs) (Discord)
• On the <dl> (2021)
• LazyHTML - HTML5-compliant parser and serializer than enables building transformation pipeline in a pluggable manner.
• tiny-vdom - Smallest possible virtual DOM implementation.
• 7GUIs in Vanilla HTML, CSS, JavaScript (HN)
• ct.css - Diagnostic CSS snippet that exposes potential performance issues in your page’s <head> tags. (Web)
• Get Your Head Straight Talk
• html-to-image - Generates an image from a DOM node using HTML5 canvas and SVG.
• Safe DOM manipulation with the Sanitizer API (2021)
• HTML Sanitizer API (Code) (Article)
• HTML Segmentator - Small library for splitting an HTML string into its top-level sections. Based on htmlparser2.
• Embetter - Embed 3rd-party media with lazy-loaded iframes.
• Inline Everything Cheat Sheet - Examples for inlining different file types. (Code)
• HTML Compendium - Omnibus HTML file you can test your CSS cascade and formatting with.
• writable-dom - Utility to stream HTML content into a live document.
• Tasty HTML buttons
• HTMHell - Collection of bad practices in HTML, copied from real websites.
• HTML Tips & Tricks
• The HTML video element needs to go back on the drawing board (2021) (HN)
• Percollate - Command-line tool that turns web pages into beautifully formatted PDF, EPUB, or HTML files.
• In Defence Of Dialog (2021)
• python - Generate HTML with python 3.
• rehype-prism-plus - Rehype plugin to highlight code blocks in HTML with Prism (via refractor) with line highlighting and line numbers.
• A Clever Sticky Footer Technique (2021)
• Canvas Txt - Better way to render text on HTML5 Canvas.
• sanitize-html - Simple HTML sanitizer with a clear API.
• Cross-fading any two DOM elements is currently impossible (2021) (Tweet)
• html5gum - WHATWG-compliant HTML tokenizer in Rust.
• Super OG Images - API to create opengraph images programmatically. (Code)
• hq - jq but for HTML.
• mailgen - Node.js package that generates clean, responsive HTML e-mails for sending transactional mail.
• domutils - Utilities for working with htmlparser2's DOM.
• carota - Simple, flexible rich text rendering/editing on HTML Canvas.
• html2text - Rust library to render HTML as text.
• xj - HTML to JSON. (HN)
• parse5 - HTML parsing/serialization toolset for Node.js.
• Entire website in a single HTML file (HN)
• HTML Standard FAQ
• Div Divisiveness (2022) (HN)
• Hibiki HTML - Powerful new web framework for creating modern, dynamic, frontend applications without JavaScript, that can be fully scripted and controlled by backend code. (HN)
• DOM is not slow. Misconception that the DOM is slow comes from misuse.
• Introducing the Dialog Element (2022)
• PageCrypt - Client-side password-protection for HTML.
• details-utils - Suite of utilities to add more features to the <details> element.
• Replace JavaScript Dialogs With New HTML Dialog (2022)
• rasterizeHTML.js - Renders HTML into the browser's canvas.
• tl - Fast, zero-copy HTML Parser written in Rust.
• AcadHomepage - Modern and Responsive Academic Personal Homepage.
• Pikaso - Seamless and headless HTML5 Canvas library.
• metatags - Ensure your HTML is previewed beautifully across social networks.
• Explain the first 10 lines of Twitter's source code to me (2022) (HN)
• Obscure HTML Tags (HN)
• It's always been you, Canvas2D (2022) (HN)
• html5lib - Pure-python library for parsing HTML.
• HTML-friendly spaCy Tokenizer
• Building a loading bar component (2022)
• Hotwire Example Template - Collection of branches that transmit HTML over the wire.
• djLint - Find common formatting issues and reformat HTML templates.
• worker-tools/html - HTML templating and streaming response library for Service Worker-like environments such as Cloudflare Workers.
• HTML Modules Explainer
• Fast HTML Parser - Very fast HTML parser, generating a simplified DOM, with basic element query support.
• html2runes - HTML to Text converter program written in Rust.
• One way to archive web pages
• Hyntax - Straightforward HTML parser for JavaScript.
• Those HTML Attributes You Never Use (2022) (HN) (Reddit)
• Picture perfect images with the modern img element (2022)
• How To Build A Progressively Enhanced, Accessible, Filterable And Paginated List (2022)
• Designing Better Breadcrumbs (2022)
• HTML to Text - Advanced converter that parses HTML and returns beautiful text.
• Why the GOV.UK Design System team changed the input type for numbers (2022)
• HTML Rewriter - WASM-based implementation of Cloudflare's HTML Rewriter for use in Deno, browsers, etc.
• HTMLJS-Parser - HTML parser recognizes content and string placeholders and allows JavaScript expressions as attribute values.
• Open Graph Image as a Service (Code)
• jtml - Write HTML in JavaScript, using template-tags.
• Broken Link Checker - Find broken links, missing images, etc within your HTML.
• Under-Engineered Multi-Selects (2022)
• Progressive Enhancement and HTML Forms: use FormData (2022)
• Lucid - Clear to write, read and edit DSL for writing HTML.
• HTML5 Parser - Fast C based HTML 5 parsing for python.
• hast-util-from-html - hast utility that turns HTML into a syntax tree.
• Media Element Syncer - Synchronize two or more HTML5 media elements.
• tabbable - Find descendants of a DOM node that are in the tab order.
• Two levels of customising \<selectmenu> (2022)
• Muffet - Fast website link checker in Go.
• Avoiding \<img> layout shifts: aspect-ratio vs width & height attributes
• Able Player - Fully accessible cross-browser HTML5 media player.
• Tabler - Free and open-source HTML Dashboard UI Kit built on Bootstrap. (HN)
• HTML Parser - Simple and general purpose html/xhtml parser lib/bin, using Pest.