Public service announcement: <details> and <summary> tags

[lunartulip]

Dreamwidth cut tags are useful things for a variety of purposes. Content warnings, spoiler warnings (insofar as one considers those a distinct thing from content warnings), hiding long walls of text from people who don't specifically click into them, et cetera.

However, cut tags have three major downsides. First: they're JavaScript-dependent. Anyone who's locked down their browser's JavaScript functionality for security purposes will be unable to open or close them. Second: they're not usable in comments, only in entries, so anyone who wants to post a content-warning-warranting or spoiler-warning-warranting or long piece of content in a comment has no choice but to inflict said content on everyone. And third: they only appear in journal or reader view, not in directly-linked entries, so even top-level posts only get to point them at people reading said posts incidentally, not at anyone who's been specifically linked to the relevant posts.

As it happens, modern HTML has a solution to this set of problems: <details> and <summary> tags. These are supported in all modern browsers—according to Can I Use, approximately of 97% of browser-instances currently in use—and they work very similarly to cut tags, but in pure HTML, with no JavaScript required and no limit of being usable only in top-level posts viewed not-through-direct-links.

Side-by-side examples of the two, for purposes of comparison:

This is some text within the cut tag.

This is a details/summary tag-pair.

This is some text within the details tag.

The source code of those two examples is, respectively:

<p><cut text="This is a cut tag.">
<p>This is some text within the cut tag.</p>
</cut></p>

...and...

<details>
<summary>This is a details/summary tag-pair.</summary>
<p>This is some text within the details tag.</p>
</details>

(If you use the casual HTML editor rather than the raw HTML editor, then you can skip the <p> tags, of course. Although then you'll have a bunch of extra line breaks added in which you probably don't want, both for the cut tag and for the details/summary tag-pair.)

So. The basic pattern is: the <details> tag marks its contents as requiring a click-through to read, same as a cut tag. If it contains a <summary> tag, its preview text will be the contents of said <summary> tag. If not, then, much as a cut tag without a text attribute will default to preview text of "Read more...", so a <details> tag without a <summary> tag will default to preview text of "Details". Overall the syntax isn't substantially more complicated than that of cut tags, just different. And, in return, you get to avoid all three of the previously-mentioned downsides! For most people, I suspect that details/summary tag pairs are, in fact, going to be the more useful of the two most of the time.

(I don't know the relative demographics, among Dreamwidth users, of people who keep JavaScript disabled versus people who use ancient browsers which lack support for these tags. But I don't expect the two groups to be too different in size, so I wouldn't expect there to be a substantial hit in accessibility from using these tags, either.)

And there we have it. For anyone who was previously unaware of <details> and <summary> tags' existence, or of their usability on Dreamwidth, now you know! Hopefully the information is helpful.

Comments

[lunartulip]

At the time of this posting, <details> and <summary> tags aren't listed on Dreamwidth's Supported HTML FAQ entry. However, I've been chatting with denise about this, and this is not indicative of the tags' support being an unintentional bug likely to be patched out; rather the FAQ entry is just outdated (and, now that I've pointed out the issue, set to be updated at some point). So there's no need to worry about support for the tags being suddenly revoked.

[lunartulip]

I don't normally particularly try to promote my posts here to anyone beyond the People Who Follow My Journal demographic, but I feel somewhat inclined to make an exception here, since this post is unusually oriented in the direction of "stuff likely relevant to large fractions of the site's userbase".

Do there exist any, like, curated collections of how-to-Dreamwidth posts which I could submit this post to, for purposes of trying to get it in front of more people? Or other things of similar nature? I vaguely remember some such collections floating around back four years ago in the aftermath of the big Tumblr migration, but I no longer remember where they were, nor do I know if any of them are likely to still be being updated at this point.

[duskpeterson]

I have a list of Dreamwidth guides in my memories; the one by ysabetwordsmith (toward the end of the list) links to many others. And now I've added your helpful tip to that list; thank you. :)

[sigmaleph]

Oh, cool! I did not know about this thing, let alone its dreamwidth support.

[brin_bellway]

Thanks for the tip!

---

>>so *even top-level posts* only get to point them at people reading said posts incidentally, not at anyone who's been specifically linked to the relevant posts.

My *most* common use of cut tags is to keep people from being subjected to content-warned posts *on their reading page*: people who followed a link to the post can simply close the tab if, upon reading the content warnings, they decide against reading the post. Probably I will continue to use cut tags for *that* usecase, but use details tags for things where it would be useful to have cuts on the page itself.

---

>>I vaguely remember some such collections floating around back four years ago in the aftermath of the big Tumblr migration, but I no longer remember where they were, nor do I know if any of them are likely to still be being updated at this point.

I still have a link to potofsoup's series stickied, but I don't think it's still being updated.

[mindstalk]

Huh, cool.