Chapter Text
Every other HTML reference guide I've seen is aimed at authors, or the HTML tryhard crowd. Or tries to cover every element allowed. But there's so much you can do in comments with a handful of HTML elements, even as a non-member of ao3.
Instructions: Replace the ☻ with your content. To see placeholders, turn on styling.Placeholders vanish!
Quoting Fic
When complimenting an author, its often nice to quote the part you're referencing. (Its also nice for to add memorable quotes to your bookmarks to remember what you liked about the fic / recommend it to others.)
Paragraph Quotes
<blockquote>Text from the story you want to quote☻</blockquote>Short Quotes
<q>quoted text from stories☻</q>Collapsibles
Open by default
<details open="open"><summary>Text that is visible☻</summary>Text that collapses☻</details>Closed by default
<details><summary>Text that is visible☻</summary>Text that collapses☻</details>Links
<a href="☻">Link text☻</a>You can not only link to other sites, but also to chapters of the work, other comments, and more!
A future chapter will cover everything you can do with links.
Lists
Ordered (Numbered)
<ol>
<li>list item☻</li>
</ol>Unordered (Bullet)
<ul>
<li>list item☻</li>
</ul>Text Formatting
<strong>bold☻</strong><em>italicized☻</em><u>underlined☻</u><s>strikethrough☻</s><small>small☻</small><big>big☻</big><center>centered☻</center>*Images
Replace the content of src with the location of your image. The location of the image is the URL in the search bar if you click the image.
The alt attribute isn't required, but its useful for cases where the image doesn't display, and for screen readers. (And useful for your own reference!)
<img src="/images/skins/iconsets/default/icon_user.png☻" alt="Description of image☻"/>To test it, you can use /images/skins/iconsets/default/icon_user.png or /images/ao3_logos/logo_42.png for the src attribute.
*Previously ao3 has disabled images in comments. This has been done and undone as part of anti-spam efforts.
Although most of this HTML can also be used in bookmark blurbs, images do not appear to be. The easiest workaround is just to do a link to the image URL (that's the value of src). So for
you can add <a href="https://archiveofourown.org/images/ao3_logos/logo_42.png">Ao3 logo</a>. It will look like
There is also the figure element for images, but not all browsers display it correctly.
Miscellaneous
Line Break
<hr/>Pre-formatted
If you want to leave line breaks, you can use this.
<pre>Text with a
line break☻</pre>