Some Shortcomings of the Web

You can’t write <st> for <strong>. (But it’s <em> not <emphasis>.)

You can’t write <bq> for <blockquote>.

You can’t write <fc> for <figcaption>. (Or <caption>.)

You can’t write <a=""> for <a href="">.

You can’t write <img=""> for <img src="">.

You can’t write <source=""> for <source src="">.

You can’t write <c> for <code>.

You can’t write <l> for <br>.

Because there’s no one-letter equivalent of <br>, a <br> and a <p> don’t align:

<p>Stanza
<br>Line

<p>Stanza
<l>Line

<p>
Stanza<br>
Line

<p>
Stanza
<l>
Line

<p>
Stanza
<br>
Line

You can use <pre></pre> instead, but the result mayn’t be what you want in RSS readers and reader modes. (In RSS readers, some inline styles may work.)

But I think I want a <pl> that is just like <p>, except with a starting style of white-space: pre-line.

<dl> has <dt>, <table> has <th>, but there’s no <lt> for <ul> and <ol>.

(There was <lh>, but it got removed.) @ StackOverflow.com

So you’re supposed to do something like:

<h4>Title</h4>
<ul>
<li>Item
</ul>

And <li> and <dd> aren’t interchangeable.

I think it may be bet if there was <ll>, a list-list:

<ll>
<lh>Title
<li>Item
</ll>

So if you want bullets or numbers, you change one letter: <ll> to <ul> or <ol>. (</ll> would close all three.)

<xmp> (“example”) sort of works but is “deprecated.”

“I Want XMP but Can’t Have It” @ JeffTK.com

There’s <this> and &lt;this&gt; instead.

(<this> and &lt;this> may be fewer bad.)

You can’t write &rt; for > (I often try to write “left right” instead of “less great”).

<xmp> defaults to “white-space: pre,” but unlike <pre>, if your text doesn’t start on the same line as <xmp>, you get an extra line break.

So:

<pre>
&lt;example&gt;
</pre>

Is equal to:

<xmp><example>
</xmp>

If you switch to “white-space: normal” you can:

<xmp>
<example>
</xmp>

But since Safari’s Reader renders its defaults you still get the extra white space there.

(XMP’s other defaults are “display: block” and “font-family: monospace.”)

In Firefox’s reader, you get the extra line break on top, but not the normal line break on bottom; it’s serif, but < >

Vivaldi’s (and Chrome’s) won’t render it at all.

(Brave’s is like Safari’s.)

<Edge’s> and removes “margin-top” from <hr>.

(Firefox’s also has “opinionated” <hr> margins.)

Chrome’s reader removes <audio> and <video>; Edge’s and Brave’s show the player, but won’t play; Firefox’s and Vivaldi’s play, but only with absolute URLs and if there’s “fallback” text.

Safari’s reader isn’t “available” on pages (like this one) with “too many” <hr>.

A quirk of <xmp> with “display: inline” is it can’t be inline inside a <p>: the first <xmp> after <p> always makes a new block.

And you can’t render </xmp> within <xmp></xmp>.

(With display inline you can with <xmp><</xmp>/xmp>.)

I think I want <ex></ex> with starting styles of display: block and pre-wrap (without line break quirks).

And <\/ex> (to render </ex> within <ex></ex>).

And <x></x> with a starting styles of display: inline and normal white space.

And <\/x>.

(To fix and replace <xmp>.)

There’s no spaced horizontal ellipsis (. . .) character.

You have to make your own with no-break spaces.

(So either something like . . . or something with invisibles.)

There’s no <sc> for small caps.

(You have to CSS <span>.)

<center> works but is “deprecated,” yet there’s no tag for “dinkus” (* * *).

<div style="text-align: center;">* * * works in RSS readers, but not Reader modes.

<div><center>* * *</center> works in both.

(Your pseudo *** won’t work in Reader modes, and you can’t “pseudo” a horizontal rule with inline CSS, so you can’t * * * an <hr> in most RSS readers.)

But I have seen left-aligned “dinkus” in the wild of the normal web.

* * *

<!doctype html> is required or you get “quirks mode.”

(Boilerplate.)

<html> is optional, but <html lang=""> is “recommended.”

(Maybe not boilerplate, but I want to reduce <!doctype html> <~~html~~ lang=""> to <!doctype html lang="">.

You can use an HTTP header for UTF-8 instead (Cloudflare Pages [what I’m using] appears to by default), but I don’t have it locally, yet.

(Boilerplate for me still, but maybe not for you.)

“lapcat” @ news.YCombinator.com

You can’t use HTTP.

(Boilerplate.)

“break-word” isn’t default. (And so it’s boilerplate for me.)

(I don’t how much “Zoom” someone may use.)

HTML’s not “valid” without a <title>.

Even if <title> is the same as <h1> #1.

(Boilerplate for me more often than not.)

In HTML, you can’t use <i> or <em> in <title>.

(<title> works like <textarea> since entities work, unlike <xmp>.)

I think I want a new doctype, like <!doctype html v="6">, that gets rid of some boilerplate.

With </a>, if you write:

<a href="example.com"> 
Link text</a>
Text

You get a space after </a>, which is good.

But if you write:

<a href="example.com"> 
Link text
</a>
Text

You get a space before </a>, which is bad.

I “get it,” but I don’t want it to do that. I don’t want it to dictate how I make HTML.

It looks right with “text-decoration: none,” but won’t, for example, in NetNewsWire, Firefox’s reader, Vivaldi’s Reader, or “Instapaper on Kobo” since they use “text-decoration: underline”; or with no CSS since “underline” is the default.

(I like to think of page source like the “cabinet back.”)

Fifty years later the fence still surrounds the back and side yards of the house in Mountain View. As Jobs showed it off to me, he caressed the stockade panels and recalled a lesson that his father implanted deeply in him. It was important, his father said, to craft the backs of cabinets and fences properly, even though they were hidden. “He loved doing things right. He even cared about the look of the parts you couldn’t see.”

No one’s implemented the proposal for a CSS Overflow “continue” property with a “paginate” value.

“Paginated Overflow” @ W3.org

(In 2011, Opera implemented pagination using CSS Paged Media.)

“Opera Reader” @ YouTube.com

(From 2013–2017, Apple supported CSS Regions.)

“Hey browser, this content can go into any of these boxes. Fill them up!” @ RachelAndrew.co.uk

After thirty-five years, the web’s still like a retrograde civilization that never invented bookbinding.

No browser can open e-pubs without an extension. (Edge could pre-Chromium.)

It’s a different type of pagination, but I’ve never seen a reverse–chronological web log with descending numbers.

It’s <img src>, but while <audio src> and <video src> sort of work, they’re really <audio> <source src> </audio> and <video> <source src> </video>, yet there’s no <image> <source src> </image>.

<picture> <source src> </picture> could’ve played that role, I think.

An <img> without alt works, but the W3C validator flags it as an “error.”

It seems to be unique in HTML.

<video> nothing. <audio> nothing.

Closest appears to be <html lang>. If you don’t have one, you get a “warning.”

An “orphan” <label> without for gets nothing.

I think a “warning” flag may be okay, but “error” mixes “concerns” too much.

An empty alt is supposed to mean “decorative,” but instead may mean “validates.”

(My understanding: if there’s no alt, a screen reader reads the file name; if alt is there but empty, a screen reader reads nothing.)

I think <figure> <img src= alt=> <figcaption> </figcaption> </figure> is a lot (for one image). (“Verbose.”)

And <figure> <a href=> <img src= alt=> </a> <figcaption> </figcaption> </figure> is more.

<figcaption> <img>A caption</figcaption> works, but is “invalid.”

I may want <image a=""> <caption> </image> for an image that’s a link and <image=""> <caption> </image> for an image that’s not.

(A <table> <caption> </table> doesn’t need </caption>.)

<figure> has a default inline margin of 80px. (The same as <blockquote>.)

So on a page with no CSS, you’re supposed to decide if adding a caption to an <img> is worth having a 96px margin (the <body> default is 16).

Which is not great on a phone.

But you can still use something like:

<table>
<caption align="bottom">
<div align="left">
&nbsp;Caption text
</div>
<tr>
<td>
<img src="example.img" width="100%">
</table>

But it won’t validate.

(I think the argument for separation of style and “structure” [and/or “semantics”] would make more sense if the default was good. If no CSS was a legit option.)

HTML images aren’t “fluid” by default. (I sometimes get responsive and fluid confused.)

You can use <img width="100%"> and they’ll be as fluid as text (fluid inline, but not fluid block).

But % width is “obsolete” and won’t validate.

“Separation of concerns,” yet “theme-color” (of all things) is HTML, not CSS.

“Theme Color in CSS” @ Jim-Nielsen.com

The rationale seems to be “perfomance,” but if you don’t have a theme-color, Safari will use CSS “background-color.” (If it’s light mode; in dark mode it has to be “dark enough”: for example, #888 works, #999 doesn’t).

But it seems to me using background-color works, and so I think a CSS theme-color would too.

But regardless, I want to decide.

There’s no <meta name="theme-color" content="light-dark( )">.

(So if you want light and dark, you need two tags.)

You can’t offload a website’s navigation menu to the browser.

(I think I like the idea of separating the “concerns” of <body> and <nav>.)

The default look of <hr> isn’t the same across browsers.

I think I may want a “universal reader mode” opt in, like <meta name="standard" v="1">.

(To invoke a common style, not each browser’s house style.)

In CSS, you can’t have multiple borders.

So you can either do something like:

Or an inset box-shadow, but if you want border radii, it has to be a pseudo element.

(Both require manual pixel math, and their radii don’t match perfectly [if you make a multi-border with one method, you can’t perfectly recreate it with the other method].)

There isn’t something between inline and inline-block: for a box with a border that can invert its bottom-right corner (its block-end, inline-end corner) when it wraps a line.

Where an unfilled wrapped line would create a hexagonal shape. (Creating room for text outside the border to sit on the same line.)

“display: run-in” may’ve been a similar concept.

(I thought I wanted something like this for my index.html [to “run in” titles (with borders) next to dates (without borders)], but it appears to be impossible. I have “slice” boxes; I don’t want “clone” boxes. “corner-shape” is decoration, not layout.)

Inline-block starts off inline, but then makes a “hard” switch to block when it needs to wrap.

“Something between inline and inline-block” would make either the start-start or end-end corner form a block, but keep it’s opposite corner in “inverted line mode” so long as all the space on the top or bottom line isn’t filled.

If the start-start corner is the block corner, then the bottom line’s inline-end is the line corner.

If the end-end corner is the block corner, then the top line’s inline-start is the line corner.

In CSS, a block border can’t follow “the rag” of “start-aligned” text.

(You can fake a ragged block with cloned line boxes, but the CSS border isn’t ragged, and it can’t be a different color than its box without revealing “the trick.”)

You can’t really customize or style the native HTML media players, there’s no common player, and I don’t like the look of Chrome’s audio player, in particular.

You have to build your own JavaScript player.

(“appearance: base” may represent hope for future media player customization.)

If it’s not full screen, I want to decide if the controls are under or on top of my video.

I want to decide if a play symbol is put on its “poster” or not.

There’s no <sh> for “subheading,” but <hgroup> is back (some people were using <header> before):

<hgroup>
<h1>
Heading
</h1>
<p>
Subheading
</hgroup>

But:

<h1>
Heading
<sh>
Subheading
</h1>

CSS doesn’t have a syntax highlighter. (Not even for HTML, CSS & JavaScript, despite browsers already having it for their dev tools.)

(But CSS has a “Custom Highlight API” for JavaScript highlighters now, which is good.)

(I think a JavaScript highlighter is like a Google Font.)

I may wish Adobe Caslon, American Garamond, Iowan Old Style, and Lyon (Instapaper) were “web safe.”

In HTML/CSS, “replaced” things like <img> are “physical,” not “logical” (inline is always left and right, and block is always top and bottom), so there’s no way to always keep things like <img> inside the viewport in both horizontal and vertical writing mode. (You have to use JavaScript.)

But CSS “if()” may represent hope.

Like:

img{ if(writing-mode: vertical): max-width: 80vw;) }

There’s no <n> for “note” (or <fn> for “footnote”).

According to the W3C, you’re only supposed to use <small> inline (it’s “phrasing,” not “flow”). So while <small> <ol> <li> <li> </ol> </small> works (in practice, it’s “transparent” like <a>), it’s an “error.”

You can write <ol style="font-size: smaller">, but even if inline styles worked “wherever you get your text,” I think tags like <small> can be intuitive and fun.

Chrome desktop recently added HLS (with no fanfare); assuming Vivaldi gets it, then Firefox desktop will be the only browser without native .m3u8 playback.

“HTTP Live Streaming” @ CanIuse.com

(“Can I use” says Edge doesn’t have it, but it works in Edge and Brave.)

In RSS 2.0, <pubDate> is hyper-specific, like “Sun, 28 Dec 2025 19:22:00 -0600.”

And you can’t use <date>, it has to be <pubDate>.

But RSS doesn’t require a date; Atom requires two dates.

In RSS, you can’t use <i> or <em> in an item’s <title>.

(In NetNewsWire, it will italicize, but there’s a bug where italics get turned the same color as links.)

(In Atom, escaped HTML in an entry’s <title> appears to work no better [I’ve come across the claim it did], but I haven’t tested a bunch of clients.)

@ YCombinator.com

(But regardless, RSS doesn’t require <title>, but I think you can leave Atom’s empty.)

I don’t think RSS has a channel-level equivalent of Atom’s <author>.

So you’re supposed to add the “dublin core” namespace (Dublin, Ohio) and use <dc:creator> on <item>.

(RSS has channel-level <managingEditor> and item-level <author>, but they combine e-mail and name.)

I don’t think there’s an RSS <item> equivalent to the combination of <published> and <updated> for an Atom <entry>.

In principle, it lets you to send clients updates to existing entries, but I haven’t tested it, whereas you update RSS by making new items.

But I think I prefer updates to be new items that link to id attributes with # fragments.

My first JavaScript complaint: it’s document.documentElement and can’t be document.htmlElement or document.rootElement.

JavaScript can’t directly output RFC 2822 dates in the right format for RSS 2.0’s <pubDate>.

(Technically, it can since it outputs RFC 1123 correctly, and RFC 1123 dates are also RFC 2822 dates, but I want my local time, and RFC 1123 is GMT only.)

(Technically, RSS 2.0 is “frozen” with RFC 822, not 2822.)

(There may be a library, Luxon, that can directly output RFC 2822, but I’m not there yet.)

The feed: URI scheme was never standardized (like mailto:).

feeds://justin-reeves.net/rss.xml

Firefox doesn’t recognize the “content-type: application/rss+xml” header. (The default for WordPress feeds, for example.)

(And by default they autodownload the file.)

Safari has the opposite problem. Without an app header, it “renders” the XML.

“My brain is hanging upside down” @ YouTube.com

“HTML is for humans, and XML is for machines.”

Neither is for humans (HTML isn’t typically consumed raw), but XSLT transforms XML into HTML, so if HTML is for humans, killing XSLT makes the web less human.

1) If a third–party browser extension requires any “scary” permissions, I think it’s unreasonable to expect any mainstream user to install it.

2) Even if it’s reasonable, I think it’s “collective action chicken and egg.”

So I think the default should be good.

I want browsers to have default themes for feeds (and sitemaps).

(Like a reader mode for a site, not a page.)

I want browsers to have first-party detectors (buttons) for feeds (and sitemaps).

The only RSS reader that can paginate documents is Readwise Reader (and it’s $13/month).

(Atom’s “feed paging” is a different type of pagination.)

I think $13/month ($156/year) is a lot for pagination; for comparison, a Kobo Libra is around $260 ($52/year if it lasts 5 years).

Wikipedia finally stopped serving its mobile site to people on desktop.

“Unifying our mobile and desktop domains” @ news.YCombinator.com

But there’s no serif option in its appearance menu.