HTML document subtitles?

Diego Gonzalez — Thu, 10 Nov 2022 16:27:06 +0000

TLDR: Explainer for adding a document.subtitle (subtitle meta value) to a web page/app;

Hola!

We all know and love (and abuse) the html <title> tag. Before all the new fancy APIs allowed us to do badging and notifications and all other sorts of bells and whistles, the <title> element was where most of this information started appearing. It's not uncommon to see:

Web (email) apps that show number of unread emails on the title.
Web (IM) apps that notify when there is a new instant message on the title.
Web (productivity) apps that put contextual information about an open file that is being edited.

And we can go on with the list of examples. Generally, the UA takes the content of the <title> tag and displays it in a prominent useful position within the browser, generally this is the text that appears on a tab.

Title continues to be a really useful tag, but with the increased complexity that a web app can portray, it seems useful to have a new bucket in which we can store relevant content for our app. Hence, the idea of having a document.subtitle. Let's say, I can have as the title of my web app Word Processing Web App and as the subtitle openDocTitle.docx.

Furthermore, if in an installed PWA scenario, the UA can take the information from the subtitle and use it to customize the text that appears on the title bar of the installed PWA. This way, for the example mentioned before, my installed word processor PWA would display in its title bar "Word Processing Web App - openDocTitle.docx".

DEV Community: Diego Gonzalez

HTML document subtitles?