HTML
This tag belongs to the Additional Tags Category.
Parent tags (more general):
This tag has not been marked common and can't be filtered on (yet).
Works which have used it as a tag:
Pages Navigation
-
Tags
Summary
An expansion to the existing forum skin by fencesit.
-
Add Undertale dialogue boxes into your fanfic (& more) by Zekka
Fandoms: Undertale (Video Game), No Fandom
01 Jun 2023
Tags
Summary
Want to make your Undertale fic more interesting to look at? Here's the code you need to do so!
With this code you can add:
● Undertale-style dialogue boxes
● Undertale-style buttons
● colorful text
● & more!Complete:
● Sans, Papyrus, Toriel and Asriel dialogue boxes (complete with fonts and images)
● Wingdings & narrator fonts
● Undertale-style buttonsWork in progress:
● Other character's boxesSuggestions are welcome!
Warning: working on making this an actually understandable tutorial instead of a showcase of code. For now it's posted so that it wouldn't delete itself when I'm not looking.
Best viewed on a computer! -
Tags
Summary
This gives you the CSS and HTML necessary to present a somewhat passable but rather primitive and
staticDYNAMIC emulation of the “green rain” / “digital rain” of The Matrix. Webkit is included for lead symbols' outline, in order to sharpen the contrast.A dynamic one could be faked nicely with .gifs (AO3 can run Doom, after all), but you can't (by TOS) use Java on AO3, so an actually dynamic font seems a little out of reach for now. But that's OK: 27 Nov 2023 I found a workaround for a dynamic background.
Full code and illustrations are included.
I read, appreciate, and reply to all of your comments — they're always welcome! 🙂
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 8 of How to
-
Tags
Summary
A second attempt at making a YouTube Work Skin.
Warning: Shoddy HTML+CSS ahead!
-
Tags
Summary
Prepping for an update to my YouTube work skin with some prior testing. A more responsivee description+comments section :P
-
Skin for Recreating Persona 4’s SL Rank Up Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 3, Persona 4, Persona 5
08 Apr 2023
Tags
Summary
A work skin for recreating the Social Link Rank Up display from Persona 3 Portable and Persona 4 Golden.
-
Tutorial: Ace Attorney Work Skin by translations (QuailFence)
Fandoms: 逆転裁判 | Gyakuten Saiban | Ace Attorney
19 May 2023
Tags
Summary
- A work skin that you can use to make dialogue, evidence, and other boxes in the style of Ace Attorney.
- Some parts of the code are from this skin by apolloyoostice1. Demonstration
2. How to make the work skin
3. Format: Dialogue, thoughts, and evidence boxes
4. Format: Testimonies
5. Format: Autopsy reports
6. Format: Profiles -
Whatsapp Work Skin Template /Revamped by etc e tal (pe_pe_peperoncinocandy)
Fandoms: No Fandom
21 Apr 2023
Tags
Summary
Whatsapp work skin.
- Text messages, photos, videos, voice messages, links and quotes;
- Group chats;
- Header and icons;
- Scrollable. -
How to Mimic LiveJournal Posts and Comments by cursedcuriosities (SetsuntaMew)
Fandoms: No Fandom
17 Apr 2023
Tags
Summary
This is a tutorial/live example on how to mimic mid-2000s LiveJournal posts and comments.
Series
- Part 1 of Killian's AO3 Work Skins
-
Tags
Summary
Example and basic code for making some text hidden or optional on Ao3 using details and summary tags
-
Tags
Summary
A little something to help people with coding for their works, notes, and summaries. No work skins are needed for any of these.
-
Skin for Recreating Persona Q2’s Stats Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona Q2: New Cinema Labyrinth
09 May 2023
Tags
Summary
A work skin for recreating various elements from Persona Q2: New Cinema Labyrinth’s Stats screen, including Persona names, resistances, and skills.
-
Tags
Summary
I deconstructed Heterochromia_Mars's Discord skin and reconstructed a new one that should work slightly better on screens of all sizes, especially mobile screens.
Note: Please check Chapter 3 for CSS code whenever the skin updates!
-
Tags
Summary
your saying that this bird site was breaking because of #TheBoxGhost and NOT because of a certain ceo billionaire who owns it?
-- the box ghost learns to think outside the box (and he's not the only one)
Series
- Part 5 of #html_cinematic_universe
-
“Son of a Bitch” by FanBrush
Fandoms: The Amazing Spider-Man (Movies - Webb), Spider-Man - All Media Types
08 May 2023
Tags
Summary
Peter 1 is having troubles and Peter 2 is NOT having it
Series
- Part 5 of Spidey Oneshots
-
Mystery Work
Part of Private archive (leave)
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Skin for Recreating Paper Mario File Selects by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Paper Mario Series (Video Games)
13 May 2023
Tags
Summary
A work skin for recreating the File Select screen from the original Paper Mario and its sequel, Paper Mario: The Thousand-Year Door.
Series
- Part 2 of Save File Work Skins
-
Skin for Recreating Subspace Emissary’s Save File Display by SpookyTesting (FierySprites)
Fandoms: Super Smash Brothers
11 May 2023
Tags
Summary
A work skin for recreating the save file display from Super Smash Bros. Brawl’s Adventure Mode: The Subspace Emissary.
Series
- Part 3 of Save File Work Skins
-
Skin for Recreating Forgotten Land’s World Title Cards by SpookyTesting (FierySprites)
Fandoms: Kirby (Video Games)
12 May 2023
Tags
Summary
A work skin for recreating a simplified version of the world title cards from Kirby and the Forgotten Land.
-
Skin for Recreating Persona Q2’s Save File Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona Q2: New Cinema Labyrinth
15 May 2023
Tags
Summary
A work skin for recreating the save file display and Information text boxes from Persona Q2: New Cinema Labyrinth.
Series
- Part 6 of Save File Work Skins
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
How To Change Text on AO3 When the Cursor is Hovering Over It (Or Clicked on Mobile) by La_Temperanza
Fandoms: No Fandom
22 May 2017
Tags
Summary
This a tutorial/live example on how to have text change or appear once a cursor is hovering over it. Helpful for pop-up spoilers, language translations, quick author's notes, etc.
Series
- Part 15 of AO3 Work Skins/Tutorials
-
How to Make Invisible Text (That Can Be Highlighted) by La_Temperanza
Fandoms: No Fandom
21 Oct 2015
Tags
Summary
This is a live example how to make invisible text that can only be seen by highlighting the text. Tutorial is included in text, and you can always leave comments about questions you may have.
MOBILE USERS: Sadly, this probably won't work for you, since highlighting in a mobile browser is different than web. I've tried correcting this, but have yet to find a solution.
Series
- Part 4 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 493
- Chapters:
- 1/?
- Collections:
- 4
- Comments:
- 18
- Kudos:
- 169
- Bookmarks:
- 118
- Hits:
- 21,794
Bookmarked by avianofFire
22 Sep 2020
Bookmarker's Tags:
Bookmarker's Notes
Finally, to become Doc Scratch and his annoying white text.
-
How to Size Images on AO3 by Informative_Dandy
Fandoms: media - Fandom, Meta - Fandom, All - Fandom
22 Jan 2019
Tags
Summary
Learn how to edit the HTML of your image files so they automatically size themselves to fit any screen (both mobile and desktop). It's super EASY!
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
-
Tags
Summary
Embedding tutorial
- Language:
- English
- Words:
- 212
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 3,133
- Kudos:
- 7,654
- Bookmarks:
- 4,887
- Hits:
- 369,241
Bookmarked by urisarang
15 Oct 2020
Bookmarker's Tags:
Bookmarker's Notes
THIS IS THE ONE YOU GOOGLE EVERY GODDAMN TIME HOW ARE YOU LIKE THIS AND KEEP FORGETTING?!
This has the html codes you are looking for.
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
18 May 2025
- Words:
- 84,903
- Works:
- 19
- Bookmarks:
- 4,062
-
How to Make iOS Text Messages on AO3 by CodenameCarrot, La_Temperanza
Fandoms: No Fandom
10 Apr 2016
Tags
Summary
This is a tutorial/live example on how to mimic iOS text messages on AO3 without the need to use images. There's also a chapter on how to have emojis displayed on AO3 as well.
Series
- Part 3 of AO3 Work Skins/Tutorials
-
Tags
Summary
a work skin that mimics the program Discord (for chatfics or fics that feature use of it!)
made this skin over a couple days; it won't look good on mobile or with creator's style disabled but the html is pretty easy to customise!
(Note: some folks in the comments have been kind enough to share some fixes for a few of the problems!)If you use it, crediting and linking back here so other people can find it is appreciated :)
EDIT: I haven't updated this in quite some time so I'm giving blanket permission for people to share their own fixed and improved versions of the code! Just link back here so people can find some help for how to use it. happy writing!
- Language:
- English
- Words:
- 572
- Chapters:
- 1/1
- Collections:
- 5
- Comments:
- 60
- Kudos:
- 537
- Bookmarks:
- 422
- Hits:
- 23,361
Bookmarked by quae_bookmarks
24 Oct 2020
Bookmarker's Tags:
Bookmarker's Notes
backup link: https://web.archive.org/web/20210122013932/https://archiveofourown.info/works/12142470?view_adult=true
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 24,078
- Chapters:
- 12/17
- Collections:
- 8
- Comments:
- 1,065
- Kudos:
- 5,840
- Bookmarks:
- 6,682
- Hits:
- 358,409
Bookmarked by allofthecaffeine
04 Dec 2020
Bookmarker's Tags:
Bookmarker's Notes
Bookmark to save a life
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 24,078
- Chapters:
- 12/17
- Collections:
- 8
- Comments:
- 1,065
- Kudos:
- 5,840
- Bookmarks:
- 6,682
- Hits:
- 358,409
Bookmarked by Hufflehobbit_writes
07 Dec 2020
Bookmarker's Tags:
Bookmarker's Notes
Useful writing reference!!
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a tutorial/live example on how to make large images fit on mobile browsers but remain normal size on desktop browsers.
Series
- Part 18 of AO3 Work Skins/Tutorials
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
- Language:
- English
- Words:
- 24,078
- Chapters:
- 12/17
- Collections:
- 8
- Comments:
- 1,065
- Kudos:
- 5,840
- Bookmarks:
- 6,682
- Hits:
- 358,409
Bookmarked by Sweet_Kagamine_Kiss
14 Dec 2020
Bookmarker's Tags:
Bookmarker's Notes
HTML Ao3 Help
If you need that important cheat sheet, dood.
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
Tags
Summary
Bored with the default page dividers? This is a tutorial/live example on how customize your page dividers with no images needed (though I do show you how you could use images if you wanted to do such a thing).
Series
- Part 9 of AO3 Work Skins/Tutorials
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials
-
Tags
Summary
Hooray! You've made a podfic! But now, how do you share it? Posting to tumblr, youtube, or a fandom-specific community are all decent options. But chances are, if the fic you recorded is from AO3, you'll reach the largest and most receptive audience by also posting to AO3.
The archive welcomes all types of fanwork, but is structured and built primarily for written works. Posting podfic can be confusing or complicated if you're unfamiliar with it. This guide will cover both the basic mechanics of posting podfic to AO3, as well as the typical conventions used by the podfic community to help your audio be found by people who want to listen.
-
Tags
Summary
There are some great quick-and-dirty guides to HTML on A03. This is not one of them - it is a comprehensive guide
It's now 2025, a decade later. A03 supports some new HTML and and we're all walking around reading fic on supercomputers that fit in a jean pocket. It was time update this and take a crack at finishing it. (Links and Images are in, the new Audio and Video tags are not.)
The previous three chapters have been divided into smaller concepts. Each tag continues to have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example. Most tags have their attributes, things like [src] or [title], listed and examples of how using the attributes modify the tags.
There's a chapter on Bad Ideas, including how some of the archive's default CSS is available to you to format your work (users can't turn that off by hiding a workskin!)
Oh. And I added a bunny army. You could learn how to add one too.
/)/) /)/) /)/) (..) (..) (..) *( ) *( ) *( )
Series
- Part 19 of AO3 Work Skins/Tutorials