#HTML authoring

[amphibianauthor]

Ao3 HTML/Coding Resources Part II

This is the HTML/Coding for Website mimicking resources in Archive of our Own (Ao3). To find Part I where I go over the Basics, General Text HTML and some Fancy Formatting (images, dividers, columns, photos, tabs etc. CLICK HERE!

Other Websites:

Texting

-How to make iOS Text Messages on Ao3 by CodenameCarrot, La_Temperanza

-A Quick Generator for Embeddable iOS Text Messages by 221b_ee

-imessage Skin by Adzaema

-Retro imessage by Adzaema

-Basic Text Message Work Skin by ProfessorMotz

- Bubble platform [workskin] by Khashana

-Chat Log HTML by deathbymistletoe

-LINE Messenger/Chat by imperiousmarshmellow

-IDOLish Rabbit Chat Workskin by associate

-Replika workskin by FaeriMagic

-Texting Workskin to match light/dark mode by irrationalpie

Tumblr

-Tumblr style CSS Tweaks by Aposiopesis

-Ao3 Workskin Testing and Tutorials by junietuesday25 tumblr DM

-How to make Tumblr Posts on Ao3 by phyyripo

-Plain Text Social Media Platforms by anubisms

-Tumblr Post Work Skin by tsukinosaugi

Twitter

-Repository - Twitter by gadaursan

- How to mimic Social Media in an Ao3 work by aerynevenstar

-Twitter Work Skin Template by etc e tal

-Twitter Workskin: Tweets and Profile by starskin

-Twitter Mock-Up by TheBrookesNook

Ao3/Fandom

-How to mimic Authors notes and Kudos/Comment Buttons by La_Temperanza

-How to mimic AO3 Comments by bittermoons

-How to add mobile Ao3 in your fic by DemigodofAgni

-How to make a fanfic style header Ao3 style by ElectricAlice

-Template for adding post chapter content by SpookyTesting

-CSS based full Ao3 fic integration (Header/Overview, Comments, Title, Summary & Buttons) by deciMae

-How to Mimic LiveJournal Posts and Comments by cursedcuriosities

-Dreamwidth Entries & Comments Work Skin  by folk_melody 

Facebook/Instagram/Whatsapp

-Whatsapp Group Chat builder by FestiveFerret

-How to make Facebook Messenger Chat on Ao3 by ran_a_dom

-Whatsapp Work Skin Template Revamped by etc e tal

-Whatsapp group chat skin by ovely

-Instagram DMs for Ao3 by monarch_rhapsodies

-How to make Instagram DM mockup by xslytherclawx

-Penstagram chats on ao3 by deciMae

Snapchat

-Snapchat skin by Azdaema

-Snapchat Template for Ao3 by starskin

Reddit/Forum

-UPDATED Reddit Skin by diamine

-2020 Reddit Work Skin by timstokerlovebot

-Reddit Work Skin CSS & HTML by knave_of_swords

-How to mimic Social Media in an Ao3 work by aerynevenstar

-template Reddit Skin by spookedcroon

-template:Subreddit page by ireseen

-Ao3 workskin for Forum Thread by fencesit

-Ao3 workskin for Forum Thread [Expansion Pack] by AMereDream

-How to mimic 4chan posts without just taking screenshots of 4chan

Twitch/Youtube

-Mimicking Twitch Chat for fics by Ultraviollett

-Twitch Chat Work Skin by cherrari

-Workskin testing by tohmas [Youtube comments]

-Youtube Work Skin by 1864s

-Youtube Comment Section Workskin by LupaMoe

Discord/Slack/Zoom

-2023 Discord Theme Workskin by TrojanTeapot

-Discord Work Skin by unpredictableArtist

-Discord (Dark Theme) Workskin by Heterochromia_Mars

-Skin for Recreating Discord’s Server Member List by SpookyTesting

-Ao3 Workskin Testing and Tutorials by junietuesday25

-Slack Workskin by Khashana

-Zoom inspired Ao3 skin by mystyrust

Wikipedia 

-Fake Wikipedia article about a TV show: Work Skin by Anonymous 

-Wikipedia article work skin by styletests

-SCP Wiki Style Workskin by thesnager

Working Games in Ao3 Tutorials

Logic Grid Puzzle Work Skin & Tutorial by BookKeep

The Case Of The Clickable Murdle by VThinksOn

Review Sites:

Yelp Reviews by kiwiana

Amazon Reviews by kiwiana

Rate My Professor Work Skin by BookKeep

Video Game Dialog Mimics

-Dialog [workskin] by Clover_Zero

-Dialogue Workskin (with parallax BG effect) by mystyrust

-My S Ranks--System Windows by unpredictableArtist [computer dialog workskin]

-Tutorial: Ace Attorney Work Skin by QuailFence

-Among Us Ao3 skin by mystyrust

-How to Mimic Undertale Fonts on Ao3 by La_Temperanza

-Tutorial:Rain Code Work Skin by faish

-Balder's Gate 3 Documents Work Skin by Professor_Rye

-SpookyTesting has SOO many Nintendo based ones

–Mimicking Minecraft for some fics by Ultraviollett 

Runescape Right Click Menu Formatting by fennfics

How to put Z skits in your Tales fics by wingedcatgirl

How to make Honkai: Star Rail Messages by html_hell (jihnari)

Hold-hands inspired Texting skin by cursedcuriocities(SetsuntaMew)

Simple Linkshell Ao3 Work Skin by Pent – Final Fantasy XIV mimic

Homestuck Chat Clients by 77angel-skins

Workskin: Slay the Princess by ASpooky

Slay the Princess: Updated Workskin by Lilto

Misc. Sites

--How to mimic Deadpool Thinking boxes by La_Temperanza

--FetLife Skin [Work Skin] by Khashana

--Disco Elysium workskin by SarunoHadaki

--StarTrek PADD workskin by duskyspirit

--MDZS-themed letters by allollipoppins

--A Newbie's Guide to Podficcing by Adzaema [skin for podfics]

--Skin for making Character Intro Cards by SpookyTesting

--Kpop Photocards by legonerd

–OVR System Workskin by unpredictableArtist

-How to make Stylized CSS Card Links for your fics by buttertartz

-vroom vroom kachow: Formula1 Race Results Workskin by mackerel_cheese

Bonus: Ever wanted to see how crazy HTML can be on AO3? Try playing But can it run Doom? or Tropémon by gifbot

Happy Creating!

Last updated: Feb 8 2025 (Have a resource that you want to share? My inbox is open!)

View Part I with HTML Basics HERE!

[reyrdemils]

In Plain Sight | Part 1 of 3

Words: 1,200(ish) | Rating: Teen and Up | Warnings: Mild canon-typcial violence Relationships: Matt Murdock (TV)/Original Female Character (Unnamed) Misc: roughly fits major MCU/DDS1-2 2015-16 timeline but tbh no DD canon plot points included Summary: It's easy to go unnoticed in New York. Most days.

This was written as part of Amanda's 2.5k Writer Challenge hosted by @mattmurdocksscars! This part features the prompt "How do I look?", the first of two I assigned myself. Thank you again for letting me take part and congratulations on 2,500 followers! I intended to write this as a oneshot compilation of snappy vignettes but. Well. Click here to read Part 2.

Intervention hadn’t been part of tonight’s plan. She had been specifically directed to avoid it, in fact, unless the situation took a turn such that not engaging would result in serious injury or death. And while she’s yet to earn her girl guides combat expert badge, the sudden appearance of multiple automatic rifles suggested that turn had been fucking taken.

A little embarrassed, she took a minute to breathe through the pain in her shoulder and appreciate the good fortune that she was laid out on the grated metal of a suspended walkway with merely a few fresh bruises, rather than bullet holes. But for all her bruised pride, she couldn’t help feeling a bit of satisfaction knowing she had kept him alive.

She lets her head loll to the side, watching as he stalked around the ground floor, rummaging inside boxes, rifling through various drawers, even searching the pockets of the men strewn about the floor. Whatever he was looking for wasn’t her business. In all honesty she hadn’t spared a thought whose operation they had just torn through, merely hoped that he might produce zip-ties from somewhere to bind their hands and feet. People never stay unconscious as long as movies portray, and her best hope of a safe exit relied on slipping out un-followed, and more preferably, unnoticed.

Of course hope isn’t something often rewarded in Hell’s Kitchen, and when it becomes clear that he’s stopped to stare up at the unconscious body she’d tied to a nearby support beam she realizes his goddamned diligence will likely send him climbing up to search this guy as well, and probably look for whoever restrained him. If she stays down he might trip on her, if she means to get up she’ll need to move silently—any knock against the metal will ring in the now quiet night air.

She assumed his distraction would be enough cover to sit up while he examined the many cargo pockets of the would-be henchman. She hadn’t assumed he would bypass the man entirely.

In fact, after he free-ran his way up a pile of equipment and swung over the handrail, landing on the metal platform with barely a tamp, his only acknowledgment was a brief once-over and a scoff.

When something in her back twinged, her breath catches—and his full attention turns to her. It’s impressive that he heard what amounted to a puff of air, but there’s no way he can see her. She’ll wait till he brushes it off and goes about his punching.

And then he crouches in front of her—and she gets to do something she’s so rarely allowed in the field.

“How do I look?” She says, deadpan.

“You’re bleeding.”

Oh. That’s never gotten an answer before.

She looks down to where her hands should be, turns them over, feels her arms and legs, checking for damage to her suit. She feels pain throbbing in multiple places, but can’t find where he’s specific— “Right shoulder.”

“Oh fuck—” Sure enough, her fingers touch a wetness and a raised edge of fabric just at the base of her neck. “Ow, yeah.”

“Who are you?”

She looks back to him, eyes narrowed. It’s still unusual, seeing grown men in their color-coordinated hero costumes, let alone one sitting in a deep squat three feet from her.

“I know you knocked this guy out. Who do you work for?” He seems annoyed by her silence, but she has more pressing concerns at the moment.

“How can you tell?” She tries to keep her voice steady; if he can see her… “How- how do you know I’m bleeding?”

His head tilts. “How did you not know?”

“I asked you first.”

“And I asked who you are.” His voice is cold, void of any amusement. No fun.

But she can’t give her name; all he’ll get is a pained smile, and a half shrug. “I’m just a friendly ghost.” She clasps the handrail above her head and maneuvers up to standing; he follows, looking ready to tackle her at any sudden move.

“We’re really gonna do this the hard way?”

“What—you’re gonna beat the shit out of me? Don’t you have pockets to search?”

A smirk crosses his face, “I have— get down!”

She ducks an instant before a shot pops and a bullet clangs off something far too close for comfort and when she looks up he’s already leapt off the walkway and landed with a roll onto the pavement below.

It’s the best opportunity she’ll have to bolt, so she does. His shouted “Hey!” as she ran out of the building must have been directed at her but she wouldn’t stop for two blocks. No footsteps follow her, and no further gunshots are heard in the 15 minutes that pass while she catches her breath, realizes she probably couldn’t hear gunshots from so far away, and starts to double back.

But her shoulder is screaming now after the exertion. It would be so quick to get stitched up. He’ll be fine, right? He does this every night. He’ll be fine. It’ll be quick. No one has to know he spotted her, that it seems like can see her. She’ll just make sure he makes it back to his building, mostly alive.

In an hour's time she’s stationed on one of many ledges of a gorgeous stone building, holding a small pair of binoculars. It’s going to be such a pain if it turns out he bit the dust between then and now, she’ll never hear the end of it. Luckily it’s barely ten more minutes before she spots him—noticeably limping but otherwise fully mobile.“Thank god,” slips out in relief.

He freezes, only through the binoculars can she see that his head turned toward her. She understands then.

“Oh. You can hear me.” He steps to fully face her direction. “I can’t hear you though. And I’m assuming you won’t yell across the street, but feel free to surprise me.”

He stands statue-still, ostensibly staring at her. She lowers the binoculars to mirror his stance, hoping he might actually start shouting, trying to gauge what he might be thinking, waiting for, calculating.

“I’m sorry if no one else has told you, but it’s very obvious that’s your building.” There’s something amusing about speaking so softly, so late into the night—communing with a silent god who wears low-rise tactical pants. “I won’t tell,” she can’t help smiling, “but worse people than me will probably figure it out. Someone’s always watching in New York.”

No answer. No movement. No acknowledgment.

She makes a show of looking down the street in either direction, surveying the area as though she hadn’t stood here multiple times in the last few weeks. “Hm. Shame you can’t see Stark tower from here.”

No response.

“Well...” She shrugs. “See you around.”

When she reaches the ground level she spends a few long moments in wait, looking up, scanning the ledges and overhangs for any sign of him and—seeing none—disappears into the night.

[deityoftherain]

Random AO3 Tips

I have a list of resources on my pinned post, but I don't really have a place for the simple miscellaneous tips and tricks, so here's this!

I didn't know most of these existed for probably far too long, so this post is mostly to spread awareness for new users or those who may not have heard of them before <3

I'll update this post if I learn of any other handy tricks. If you know any, let me know and I'll add it here :D

Basic HTML codes for A/Ns and etc

Note: Screenshots of the HTML "codes" at work are shown under the cut!

Center Text <center>TEXT</center> Clickable Link <a href="LINK">TEXT</a> Hideable Information <details> <summary>SHOWN</summary> HIDDEN </details> Insert Image from Link < img src="LINK" alt="IMAGE DESCRIPTION" width="100%" align="center" />

Italicize/Slant Text <i>TEXT</i> Line Breaks <br>TEXT</br> Paragraphs <p>TEXT</p> Strikethrough Text <strike>TEXT</strike> Underline Text <u>TEXT</u>

Single-post AO3 Guides

short guide on how to tag your own fics

short guide on how to title your fics/stories

how to embed images and links on AO3 [via Rich Text]

how to sign up for AO3-based exchanges (ft. @trafficteamsupportexchange)

Note: This is for formatting with HTML for the work, and for the authors notes where you Rich Text doesn't exist/work. Rich Text, on the other hand, should transfer most of these from whatever document resource you're using, but I've personally had issues with strikethrough not transferring from Google Docs copy-pasted to AO3 Rich Text, so just double check those areas!

[spoiledblogif]

future me to past me later when I have to consult this insane spiderweb of nonsensical variables I just made

[dyinggirldied]

My shoddy attempt at making a cover for this fantastic fanfic Revenge or Die by LupaMoe. No but seriously please please please go and read it 🙏

[flowcodes]

Fake Ao3 App

Originally posted under my main blog: FlowGeeksOut in the community 'Crying ao3 down'

Greetings everyone reading this it has recently come to my attention that there is an app claiming to be affiliated with ao3 along with OTW that is not ans has privacy safety concerns.

For context earlier today ao3 was having issues and the Ao3 News Tumblr blog made a post about it. I being in the Cyring Ao3 Down community went to reblog it there and link people who were having issues to the post in hopes for them to understand what was happening if they were not already aware. That was when I came across the following post from @elijah-j

Obviously the edit was not there before. Anyways I saw this post and became confused and concerned.

In case you were not aware ao3 is part of the nonprofit organization OTW. This is very important for serval reasons. One of most being legal protection for both ao3 and the fan content creators that host their content on ao3. Since ao3 does not run ads and are part of a non profit organization they therefore do not make any money off of the fan works hosted there. This therefore gives a lot of protection to ao3 and the fan creators against civil litigation from the copy right holders of the Fandom you wrote for. Since the biggest argument in those cases is about profits and if ao3 was running ads and gaining profit from fan creators hosting the fan content there and or paying the fan creators to do so it is harder for a court case to be nessary and or winnable.

As a fan creators for has over 100 works hosted on ao3 I feel very safe being able to express my fanworks with all this protection. So imagine my concern when I saw the post shown above. I then asked the poster @elijah-j for clarification see the comments below

As seen in the last screenshot as soon as I was made aware that it was "in the app only" my brain immediately jumped to this being a scam since and let me say this load and clear THERE IS AND HAS NEVER BEEN AN APP FOR A03

I then explained this to @elijah-j as seen in the screenshot below

Yep that last screenshot says there was NOTHING IN THE PRIVACY POLICY

This horrible because in a way they have the right to do whatever the hell they want with any personal data they have collected on you.

I proceed to let @elijah-j that i think they should report said app to the play store and ao3 because this could cause many problems for a lot of people. @elijah-j agreed with me and did so.

So if you are using an app that is using ao3 name you should report it to the app store and ao3 along with deleting your account on the app if possible then the app.

If you used a similar password to any other website you should change the password.

I will find the link again of where to report it to ao3 along with more information about ao3 and the law if you are interested about the importance of ao3 not having ads.

If you have any questions or concerns please feel free to comment them and I will try my best to help you find an answer and or solution or way forward.

And thank you for @elijah-j for letting me post this!

Stay safe

Links

[xiaokuer-schmetterling]

PODFICCER (and fic author) RESOURCE: things i learned about HTML today

-> from this reference work on ao3: A Complete Guide to 'Limited HTML' on AO3 by CodenameCarrot (please go leave a comment if you find anything here useful !!!)

EDIT: OMG Y'ALL I HAVE BEEN HAVING SO MUCH NERDY GEEKY FUN TWEAKING MY PODFIC HOW-TO GUIDE WITH THIS STUFF

headings, blockquote, div

----

-----

html currently allowed by ao3 html sanitizer

a. abbr. acronym. address. b. big. blockquote. br. caption. center. cite. code. col. colgroup. details. dd. del. dfn. div. dl. dt. em. figcaption. figure. h1. h2. h3. h4. h5. h6. hr. i. img. ins. kbd. li. ol. p. pre. q. rp. rt. ruby. s. samp. small. span. strike. strong. sub. summary. sup. table. tbody. td. tfoot. th. thead. tr. tt. u. ul. var.

-----

in-line (text) formatting tags supported by ao3

-----

OMG LOOK AT THIS !!! IDK WHEN I WOULD EVER USE THIS BUT LOOK HOW COOL !!!

-----

paragraphs & p formats: archiveofourown.org/works/5191202/chapters/161901154#AddParagraphs

-----

omg I'VE ALWAYS WONDERED HOW TO GET THAT LINE BREAK THINGY IN THE MIDDLE OF THE PAGE !!!

-----

end post

[coffeebanana]

okay, everyone tell ao3 to be good so i can actually update mtl fic tonight

[spice-ghouls]

greetings fine citizens of spice-ghouls dot tumblr dot com. How is everyone

[brown-little-robin]

I got a book of poetry for 1 dollar at a university book sale last week 🥰

[powerpointprofessor]

Personal AO3 site skin

I wasn't digging the AO3 dark mode so I made my little version.

(This is totally not a fanfic plug)

[andromedaexists]

every day i'm reminded that i don't know how websites work

[northen-light]

from @stalecabbage :

i recommend using <img src="imageurl" width="number" alt="image description"/> so people can understand what it is if it doesn't load properly and screenreaders can read it, and you can set the size of the image. (You can use height instead of width but don't use both or it'll mess up the proportions of the image)

I don't know who needs to hear this

But if you go into the comments section on AO3

And type

Then replace image url (keep the " marks) with the url of a picture

You can leave fan art in the comments of a fic

[flowcodes]

How To Deal With Ao3

I posted this originally on the community "Crying ao3 is down" under my main blog flowgeeksout and I thought that I should post it here so it can reach more people.

Thought I would make this post about the new system ao3 is using because the old one was not working as intended.

Because of the system they are using now whenever the page reloads which counts on clicking and fic and going to another chapter and whenever you filter through tags it counts as a page reload therefore with the new system if you do what it considers to many it will shut it down until they find a new soulution. One thing you can do to minimize this happening again is by waiting a couple minutes before you go to a new page.

This is also the reason why these past couple of weeks ao3 has been going down a lot. Hope this helps.

Edit 01/25/2025 everything should be back to normal so this post is now useless

[jcmarchi]

HTML Email Accessibility Report 2025

New Post has been published on https://thedigitalinsider.com/html-email-accessibility-report-2025/

HTML Email Accessibility Report 2025

Some weekend reading on the heels of Global Accessibility Awareness Day (GAADM), which took place yesterday. The Email Markup Consortium (EMC) released its 2025 study on the accessibility in HTML emails, and the TL;DR is not totally dissimilar from what we heard from WebAIM’s annual web report:

This is the third full year for this report and we are disappointed to see the same issues as we have in previous years. The top 10 issues haven’t changed order since last year, apart from the addition of color contrast, which can be put down to a change in the testing and reporting.

The results come from an analysis of 443,585 emails collected from the past year. According to EMC, only 21 emails passed all accessibility checks — and they were all written by the same author representing two different brands. And, further, that author represents one of the companies that not only sponsors the study, but develops the automated testing tool powering the analysis.

Automated testing is the key here. That’s needed for a project looking at hundreds of thousands of emails, but it won’t surface everything, as noted:

Email that pass our checks may still have accessibility issues that we cannot pick up through automated testing. For example, we check if an alt attribute is present on an image, but we do not check if the text is suitable for that image in the context of that message.

The most common issues relate to internationalization, like leaving out the lang (96% of emails) and dir (98% of emails) attributes. But you’ll be familiar with most of what rounds up the top 10, because it lines up with WebAIM’s findings:

Links must have discernible text

Element has insufficient color contrast

Images must have alternate text

Link text should be descriptive

Links must be distinguishable without relying on color

I appreciate that the report sheds a light on what accessibility features are supported by specific email clients, such as Gmail. The report outlines a set of 20 HTML, CSS, and ARIA features they look for and found that only one email client (SFR Mail?) of the 44 evaluated supports all of the features. Apple Mail and Samsung Email are apparently close behind, but the other 41? Not so much.

AilSo, yeah. Email has a ways to go, like a small microcosm of the web itself.

Direct Link →

[ghostie-jakxy-gray]

Why We Build The Wall (2709 words) by Ghostie_Jakxy_Gray Chapters: 1/3 Fandom: Hadestown - Mitchell, Three Houses - Malloy Rating: Teen And Up Audiences Warnings: No Archive Warnings Apply Relationships: Hades/Persephone (Hadestown), Beckett & Susan & Sadie, Hades & The Fates (Hadestown), Hades & The Workers (Hadestown) Characters: Hades (Hadestown), Beckett (Three Houses), Persephone (Hadestown), The Fates (Hadestown) Additional Tags: The Author Regrets Nothing, twisty turny backstory stuff, The process of becoming a god when the world is ending, How Do I Tag, Origin Story, Alternate Origin Story, The Wind is The Fates, Not A Fix-It, This is a Break-It, Bad Ending, references to COVID-19, Mental Health Issues, Crossovers & Fandom Fusions, in which I make one show the backstory of another show, References to Ancient Greek Religion & Lore, Reality Bending, Everyone Needs A Hug, references to code, physical riches vs mental abundance, references to Minecraft, I’d say not in a cringe way but given how buckwild the rest of this AU is…, Self-Indulgent, no beta we die Series: Part 9 of Gut and Idyll Summary: There’s a song that sings in the back of everybody’s mind at the end of the world. It whistles and hums, something about the small joys and triumphs found among disasters. Beckett can’t stand it. ~ This is listed as part of the Gut n Idyll AU, because it’s working off that logic. However, there’s no fish in here, it stands alone. (Or- I re-listened to Clochán from Three Houses while writing something else for this AU and got blindsided when the next song on my playlist was Why We Build The Wall from Hadestown. And, since there’s a few parallels to be noticed between them… Well, this au’s already 70k words deep might as well throw in a few more myths to the pile. It’s the Beckett gets coerced into godhood fic, come get your juice.)