Details Tag on GitHub

This week I learned that you can use the <details> tag when writing on GitHub to tuck screenshots or large snippets of code out of sight until you need them. Thank you to Wes for mentioning that on Syntax episode 522! 🙏

If you're not familiar with the <details> tag, it's essentially an accordion element that's built into HTML. This tag has excellent browser support, as it's available everywhere except IE.

Here's an example of this in use on GitHub:

And the code behind it:

Here are screenshots of this UI change:

<details>
<summary>Before:</summary>

![image](https://user-images.githubusercontent.com/53009141/199368627-93243263-e63e-493f-b0b6-53083f42123f.png)

</details>

<details>
<summary>After:</summary>

![image](https://user-images.githubusercontent.com/53009141/199368577-4e266869-6011-46fc-a27d-c7504021dd96.png)

</details>

Note the blank lines before and after the images. Those seem to be necessary for images and code blocks to render correctly inside this tag.

I have already found this very useful. I think it really improves readability when supplemental information like screenshots, code snippets, or stack traces is hidden away until you need to reference it.

You can use other tags on GitHub too! There is a select list of tags they allow that can really come in handy to format and style different aspects of your writing.