#html

128 bookmarks tagged with #html · RSS Feed · ← All Tags

Antiquated HTML Snippets and Artefacts | Vale.Rocks

https://vale.rocks/posts/html-relics
This article doesn’t cover once-specced but now obsolete bits of HTML but instead looks at all the snippets that have wormed their way into websites as result of, or in combat against, third-party integrations, browser competition, vendor extensions, and platform-specific hacks. The bits of HTML that were included for reasons, and which have been forgotten for present irrelevance. The snippets that live on only in the markup of sites from bygone eras and in the minds of those who fought during the browser wars.

How building an HTML-first site doubled our users overnight

https://mohkohn.co.uk/writing/html-first/
It is not acceptable to bounce users on old browsers, users with bad network connections, users using assistive technologies. Certainly not from a monopoly public service. A lot of hype and noise is pressing us to extend the cowboy, wild-west phase of the software industry’s expansion. We should set that aside, and take ourselves seriously as a mature industry. Build a web application that works on a playstation portable on a 3G connection - if you do, it will work for all your users, and it will still work 30 years from now.

How to Make a Damn Website

https://lmnt.me/blog/how-to-make-a-damn-website.html
A lot of people want to make a website but don’t know where to start or they get stuck. That’s in part because our perception of what websites should be has changed so dramatically over the last 20 years.

You can make up HTML tags: (Maurycy's blog)

https://maurycyz.com/misc/make-up-tags/
Browsers handle unrecognized tags by treating them as a generic element, with no effect beyond what’s specified in the CSS. This isn’t just a weird quirk, but is standardized behavior. If you include hyphens in the name, you can guarantee that your tag won’t appear in any future versions of HTML.

The Web Platform is a Triumph of Object-Oriented Programming | That HTML Blog

https://thathtml.blog/2025/12/the-dom-is-a-triumph-of-object-oriented-programming/
It’s not just that web APIs often take advantage of OOP. They would not exist without OOP! Virtually every web API you have ever used is designed specifically within the OOP paradigm. And every entity in the lifecycle of a web page is based on objects. These objects are instances of classes and in a great many cases these classes are subclasses of other classes. This means that key functionality is spread across a class hierarchy. That isn’t a bug, it’s a feature! And this means that it’s absurd to think that to write a web app you need to reach for a “framework”. The Web Platform is a framework.

Useful patterns for building HTML tools

https://simonwillison.net/2025/Dec/10/html-tools/
I’ve started using the term HTML tools to refer to HTML applications that I’ve been building which combine HTML, JavaScript, and CSS in a single file and use them to provide useful functionality. I have built over 150 of these in the past year, almost all of them written by LLMs. This article presents a collection of useful patterns I’ve discovered along the way.

Syntax Highlighting in Web Component Templates

https://remysharp.com/2025/11/12/syntax-highlighting-in-web-component-templates
The extremely quick read is, add /* HTML */ to the front of the template. Case sensitive and space sensitive (though hopefully one day it won't be so strict). Now highlighting and prettier (with save and fix) works. Note that you need the es6-string-html VS Code extension for this to highlight correct (something I had forgotten I had installed).

Abandonware of the web: do you know that there is an HTML tables API? | Christian Heilmann

https://christianheilmann.com/2025/10/08/abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api/
When people turn data into HTML tables using JavaScript, they either use the DOM methods (createElement() and the likes), but most of the time just append a huge string and use innerHTML, which always is a security concern. However, did you know that HTML tables also have an old, forgotten API ? Using this one, you can loop over tables, create bodies, rows, cells, heads, footers, captions an summaries (yes, HTML tables have all of those) and access the table cells. Without having to re-render the whole table on each change.

How to fix Storybook screenshot testing | Tiger Oakes

https://tigeroakes.com/posts/storybook-test-runner-screenshots/
As an alternative to Chromatic, I’ve been using Storybook’s Test Runner to power screenshot tests for Microsoft Loop. We configure the test runner to run in CI and take a screenshot of every story. However, the initial implementation based on the official Storybook docs was very flaky due to inconsistent screenshots of the same story. Here are some tips to reduce flakiness in your Storybook screenshot tests.

Speculation Rules API - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API
The Speculation Rules API is designed to improve performance for future navigations. It targets document URLs rather than specific resource files, and so makes sense for multi-page applications (MPAs) rather than single-page applications (SPAs).

Highlighting Text in Links with Text Fragments

https://calebhearth.com/text-fragmentsFuckOffFuckOff
I’ve used URL text fragments in a few posts now and often use it outside of this blog to point someone to a particular piece of text on a page. They’re a really useful feature that allows you to create a URL that links not just to a page or an anchor on that page, but specifically to a bit of text that you’d like to call out to your audience.

Example of Tabs with Automatic Activation | APG | WAI | W3C

https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-automatic/
This example section demonstrates a tabs widget that implements the Tabs Pattern. In this example, a tab is automatically activated and its associated panel is displayed when the tab receives focus. It is recommended that authors consider implementing automatic activation of tabs only in circumstances where panels can be displayed instantly, i.e., all panel content is present in the DOM.

jacktuck/unfurl: Metadata scraper with support for oEmbed, Twitter Cards and Open Graph Protocol for Node.js :zap:

https://github.com/jacktuck/unfurl?tab=readme-ov-file
Highlight:Unfurl (spread out from a furled state) will take a url and some options, fetch the url, extract the metadata we care about and format the result in a sane way. It supports all major metadata providers and expanding it to work for any others should be trivial. Metadata scraper with support for oEmbed, Twitter Cards and Open Graph Protocol for Node.js :zap: - jacktuck/unfurl

microlinkhq/metascraper: Get unified metadata from websites using Open Graph, Microdata, RDFa, Twitter Cards, JSON-LD, HTML, and more.

https://github.com/microlinkhq/metascraper
Highlight:The metascraper library allows you to easily scrape metadata from an article on the web using Open Graph metadata, regular HTML metadata, and series of fallbacks. Get unified metadata from websites using Open Graph, Microdata, RDFa, Twitter Cards, JSON-LD, HTML, and more. - microlinkhq/metascraper

Server-side rendering (SSR) – Lit

https://lit.dev/docs/ssr/overview/
Lit supports server-side rendering through the Lit SSR package. Lit SSR renders Lit components and templates to static HTML markup in non-browser JavaScript environments like Node. It works without fully emulating the browser's DOM, and takes advantage of Lit's declarative template format to enable fast performance, achieve low time-to-first-byte, and support streaming.

Server-side rendering (SSR) – Lit

https://lit.dev/docs/ssr/overview
Lit supports server-side rendering through the Lit SSR package. Lit SSR renders Lit components and templates to static HTML markup in non-browser JavaScript environments like Node. It works without fully emulating the browser's DOM, and takes advantage of Lit's declarative template format to enable fast performance, achieve low time-to-first-byte, and support streaming.

Learn HTML

https://web.dev/learn/html
This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.

Tree views in CSS

https://iamkate.com/code/tree-views
A tree view (collapsible list) can be created using only HTML and CSS, without the need for JavaScript. Accessibility software will see the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically.

Case Study: Auto-Resizing HTML5 Games - HTML5 Rocks

http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/
In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mobile phones. But most mobile phones either displayed only part of the game or made the game too small—making it completely unplayable. So we took it upon ourselves to make the game fluidly adjust to match any resolution. After a bit of re-programming and using ideas outlined in this article, we had a game that scaled across any modern browser, whether it ran in a desktop or a mobile device.

Case Study: Auto-Resizing HTML5 Games - HTML5 Rocks

http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games
In the summer of 2010, we created Sand Trap, a game that we entered in a competition on HTML5 games for mobile phones. But most mobile phones either displayed only part of the game or made the game too small—making it completely unplayable. So we took it upon ourselves to make the game fluidly adjust to match any resolution. After a bit of re-programming and using ideas outlined in this article, we had a game that scaled across any modern browser, whether it ran in a desktop or a mobile device.

Combining HTML Hypermedia APIs and Adaptive Web Design – Jayway

http://www.jayway.com/2012/08/01/combining-html-hypermedia-apis-and-adaptive-web-design/
HTML is the lowest common denominator in a world where the number of devices are steadily growing. In such a world, our API should be hypermedia driven and we should consider choosing HTML as the media type for our APIs. If we choose this, we can enhance the API with CSS and JavaScript, making the API human-friendly as well. Further, we can use Adaptive Web Design to make the best possible experience for all types of browsers and devices. This kind of solution has some risks and technical issues related to it though. And it is not a silver bullet.

Using SimpleXML with HTML | drewish.com

http://drewish.com/content/2007/08/using_simplexml_with_html
"PHP 5's SimpleXML module is one of the the biggest reasons to upgrade to 5. If you're parsing RSS feeds or the results of webservice requests it works beautifully and saves a ton of time. The only problem with it is that it'll only load valid XML. I banged my head against it for way to long before coming up with the following:"

Some Notes On iTunes LP · Jay Robinson

http://jayrobinson.org/2009/09/11/some-notes-on-itunes-lp
"The iTunes LP experience is accomplished with HTML 4.01, CSS and JS. The interface feels very Flash-like, but there is no trace of it. The CSS animations are elaborate and smooth. ... As a music fan, and as a web developer, I couldn’t be more pleased with the new iTunes LP offering. If your audience is significantly Apple-oriented (e.g. a site about Mac rumors or a popular iPhone app) this proves that you can provide an incredible experience using only JavaScript and some proposed CSS3 properties."

Weekend coding: Add a character counter as the background of a textarea with JavaScript | CodeUtopia

http://codeutopia.net/blog/2009/08/01/weekend-coding-add-a-character-counter-as-the-background-of-a-textarea-with-javascript
"Have you ever filled a textarea on a page, which had a limit to how many characters you could type into it? ... How to effectively communicate how many characters you can type into a box, and have it look good. ... Add the number counter as the background of the textarea!"

camen design · Video for Everybody!

http://camendesign.com/code/video_for_everybody
"Video For Everybody is very simply a chunk of HTML code that embeds a video into a website using the HTML5 element which offers native playback in Firefox 3.5 and Safari 3 & 4 ... In other browsers that do not support , it falls back to Adobe Flash ... If Flash is not installed, QuickTime is used (which allows playback on the iPhone) ... If QuickTime is not installed then Windows Media Player is used in Internet Explorer for Windows Vista and above. ... Finally, if all else fails, a warning is issued that provides links to download the video, and links to software relevant to getting the video to play within the browser itself. ... This is all done without JavaScript and requires only two video encodes, one OGG file for Firefox 3.5, and one MP4 file for everything else (Flash / Safari / iPhone)."

Creating accessible charts using canvas and jQuery | Filament Group, Inc., Boston, MA

http://www.filamentgroup.com/lab/creating_accessible_charts_using_canvas_and_jquery
"Data visualization in HTML has long been tricky to achieve. Past solutions have involved non-standard plugins, proprietary behavior, and static images. But this has changed with the recent growth in support for the new HTML Canvas element, which provides a native drawing API that can be addressed with simple Javascript. This article is a proof of concept for visualizing HTML table data with the canvas element."

Text + Image + CSS3 = Crazy Delicious

http://metaatem.net/highlite?colors=128&image=http://images.slashdot.org/topics/topiced.gif&text=start+coming+up+with+overregularizations+like+%22goed%22+instead+of+%22went%22+or+%22playses%22+in+place+of+%22plays,%22+that+kind+of+attempt+at+applying+regular+morphological+rules+to+irregular+items,+is+when+you+might+say+they+are+acquiring+language+via+data+mining.+I.e.,+they+hear+a+form+used+often+enough+that+it+becomes+part+of+their+knowledge+about+words,+to+the+extent+that+that+form+is+unconsciously+applied+even+to+make+words+they+have+certainly+never+heard+in+adult+speech+before.+&width=120
"Hide an image in html"

Default style sheet for HTML 4.0

http://www.w3.org/TR/CSS21/sample.html
"This style sheet describes the typical formatting of all HTML 4.0 ([HTML40]) elements based on extensive research into current UA practice. Developers are encouraged to use it as a default style sheet in their implementations."

blockquotes.js

http://philwilson.org/scripts/blockquotes.js
JavaScript that will automagically add hyperlinks after blockquotes with a URL in its cite attribute.

TagSoup home page

http://mercury.ccil.org/~cowan/XML/tagsoup
"This is the home page of TagSoup, a SAX-compliant parser written in Java that, instead of parsing well-formed or valid XML, parses HTML as it is found in the wild: nasty and brutish, though quite often far from short."