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
-
Skin for Recreating Kingdom Hearts’ Information Bar by SpookyTesting (FierySprites)
Fandoms: Kingdom Hearts (Video Games)
13 May 2023
Tags
Summary
A work skin for recreating the Information bar from the Kingdom Hearts series—specifically, the design from prior to 0.2 and Kingdom Hearts III.
-
Skin for Recreating Persona 3’s Save File Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 3
14 May 2023
Tags
Summary
A work skin for recreating the save file display from Persona 3 (FES), with a bonus color scheme based on Persona 3 Portable’s FeMC.
Series
- Part 4 of Save File Work Skins
-
Skin for Recreating Persona 4’s Save File Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 4
24 May 2023
Tags
Summary
A work skin for recreating the save file display from Persona 4 (Golden).
Series
- Part 5 of Save File Work Skins
-
Skin for Recreating Peach’s Letters from Super Mario Galaxy by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Super Mario Galaxy
16 May 2023
Tags
Summary
A work skin for recreating the appearance of Princess Peach’s letters from Super Mario Galaxy.
-
Skin for Recreating Sonic Adventure 2’s Results Screen by SpookyTesting (FierySprites)
Fandoms: Sonic the Hedgehog - All Media Types, Sonic the Hedgehog (Video Games)
16 May 2023
Tags
Summary
A work skin for recreating the results screen from Sonic Adventure 2.
-
Twitter HTML & CSS Coding Test Run by Fluffycorn_njst
Fandoms: Marvel Cinematic Universe, The Avengers (Marvel Movies), Haikyuu!!
20 May 2023
Tags
Summary
All of the different kinds of Twitter tweet templates displayed in one place as demonstrated using characters from fandoms written above! Includes the source of the HTML & CSS code work used here!
ALL THE CREDIT goes to gadaursan's Twitter guide & tutorial for the coding! And so I'm basically just a glorified display case to see more examples of what the design looks like! I also only did this to try it out for fun and practice in case I'd use it in the future~
-
Tags
Summary
Когда очень хочется прокомментировать работу, но не находятся нужные слова, на помощь приходят бочжанемемы. Подборка стикеров на случай важных переговоров.
Series
- Part 3 of Гайды по Архиву
-
Skin for Recreating Persona 3’s Social Stats Display by SpookyTesting (FierySprites)
Fandoms: Persona Series, Persona 3
27 May 2023
Tags
Summary
A work skin for recreating the Social Stats display from Persona 3 (Portable).
-
AO3 Site-Wide Tag Highlighting Skin Tutorial/Template by orphan_account
Fandoms: No Fandom, site-skins
06 Jun 2023
Tags
Summary
Series
- Part 1 of ao3css's templates
-
How to permanently filter out certain tags on AO3 by orphan_account
Fandoms: No Fandom, site-skins
09 Jun 2023
Tags
Summary
Series
- Part 2 of ao3css's templates
-
Tags
Summary
Twitter work skin.
- Tweets, quote-tweets, images, polls...;
- DM's, text, emojis, images, voice messages, groupchats...;
- Scrollable version. -
Mystery Work
Part of jail time!
Summary
This is part of an ongoing challenge and will be revealed soon!
-
To Find My Own Shoes [INDEFINITE HIATUS] by SleepyMiles
Fandoms: 僕のヒーローアカデミア | Boku no Hero Academia | My Hero Academia (Anime & Manga)
05 Oct 2023
Tags
Summary
Shigaraki and Midoriya's time in each other's bodies goes on for a little bit longer...
Go read Double_Shot_Depresso's "To walk in his shoes", the fic that inspired this one. On indefinite hiatus, consider it abandoned.
-
Mystery Work
Part of jail time!
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Tags
Summary
Winter of 2015, your mother is dead, and you have inherited your childhood home. You have your work cut out for you with clearing out the attic before you can put the house on the market. Working your way through the boxes, you discover VHS tapes and a bunch of memorabilia from a 70s children’s show that’s worth a small fortune. In hopes of making enough to pay for your postgraduate, you task yourself with watching the tapes to check they are of sellable quality. However, things take a turn for the worst when you find the protagonist of the show hidden in a trunk.
-
Momo’s Ace Attorney Colored Text Workskin by Axolotl_Supremacy
Fandoms: 逆転裁判 | Gyakuten Saiban | Ace Attorney
02 Jul 2023
Tags
Summary
Have you ever wanted to color your text in an Ace Attorney fanfic like they do in the actual games?
Well, with this work skin…you totally can!
_______________________________________
A tutorial on how I color my text for my Maya Fey Defense Attorney AU and other case fics. -
Skin for Recreating Return to Dream Land’s Boss Bios by SpookyTesting (FierySprites)
Fandoms: Kirby (Video Games)
12 Jul 2023
Tags
Summary
A work skin for recreating a simplified version of the Boss Bios/Special Pages from Kirby’s Return to Dream Land Deluxe.
-
Tags
Summary
A work skin for text messages.
In particular, this uses outlines/borders to avoid specifying background colors, so that users of Reversi can see the work in dark mode and users with the standard AO3 look and feel can read the story in light mode.
Chapter two now lets you pick more chat bubble outline colors for your group chat needs!
-
Tags
Summary
A tutorial + live example on how to create comic text effects/callouts on Ao3 using CSS.
Series
- Part 1 of Cool Coding Kumquats
-
Tags
- Language:
- English
- Words:
- 260
- Chapters:
- 1/1
- Kudos:
- 1
- Hits:
- 27
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
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
-
Uploading gifs and pictures onto Ao3 by DoubleTrouble007
Fandoms: Yuri!!! on Ice (Anime)
16 Jul 2019
Tags
Summary
not a work, just a test to see if/how i can put gifs on. I have a tutorial for how to upload images/gifs from dropbox, as well as my other notes on figuring out the best aspect ratio for computers and phones.
Bookmarked by urisarang
08 Jan 2021
Bookmarker's Tags:
Bookmarker's Notes
Neat tips and tricks for ao3. Imbedding gifs
-
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
Basic HTML codes to create some variety in your AO3 posts.
-
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
-
Tags
Summary
This is a tutorial/live example on how to mimic social media in an AO3 work, specifically Twitter, Reddit, and LiveJournal.
-
Tags
Summary
This is a tutorial/live example on how to mimic social media in an AO3 work, specifically Twitter, Reddit, and LiveJournal.
-
Tags
Summary
One month after @hawks_unofficial's initial viral post, the blog titled "Quirk Analysis Blog for the Future", otherwise known as "Q. A. B.", has gone from an average of 10 views per post to an average of 20,000 views per post.
Midoriya Izuku does not know how to view the impressions analysis for his suddenly popular blog, and only notices that sometimes, people actually comment on his posts now. He does not google himself or his moniker and thus does not see the rise in online articles and speculation.
He is unaware that the "kyuu-ei-bee" he begins to hear about in passing refers to his own blog. He does not have a Twitter account.
At the time, Midoriya Izuku is 15 years old.
Izuku (accidentally) starts a cult.
Series
- Part 1 of how to (accidentally) start a cult
-
Tags
Summary
This is a live example of how an author can create linked footnotes in their work with only a little bit of HTML and no workskins required. This is best viewed by clicking "Entire Work". While I've included the actual coding in bold and italic once you click "Hide Creator's Style", there's a more detailed explanation here.
EDIT 6/28/17: The third chapter now shows how to use anchor links as an index/table of contents.
Series
- Part 6 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a personal experiment with HTML. It is a very limited list with what I find useful.
Update: Somehow I find more and more stuff useful, so this list is not that limited (and not that private) anymore. I'll improve it with time and according to my needs. I just realized, this will never be "complete" and there is no final number of chapters.So far that's posted:
Part One: Basics
Part Two: Lines
Part Three: Footnotes and Links
Part Four: Columns and Skins
Part Five: Pictures
Part Six: Videos (and gifs)
Part Seven: Choose Your Own Adventure
Part Eight: Chapter Title
Part Nine: The Title, the Username, and Links
Part Ten: Boxes (still in progress)
Part Eleven: Newspaper Article
Part Twelve: Content Notes and Spoiler
Part Thirteen: Playground for Jinx (glitch text, color, table)
Part Fourteen: Text generator- Language:
- English
- Words:
- 11,726
- Chapters:
- 16/?
- Collections:
- 6
- Comments:
- 97
- Kudos:
- 452
- Bookmarks:
- 542
- Hits:
- 20,845
Bookmarked by basically_thearlaich
08 Mar 2021
Bookmarker's Tags:
Bookmarker's Notes
Good overview - links to other works pertaining the ideas presented here!
-
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
-
Tags
Summary
just html things that i've learnt/know. chap 1 is pretty easy formatting, chap 2 is slightly more effort. chap 3 is specifically table of contents (links). no css is used here. i hate css.
-
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
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
-
How to Mimic Letters, Fliers, and Stationery Without Using Images by La_Temperanza
Fandoms: No Fandom
27 Jul 2017
Tags
Summary
This is a tutorial/live example on how to mimic the look of letters, fliers, and stationery (as well as other forms of written media) without using images. For all your epistolary fic needs.
Series
- Part 17 of AO3 Work Skins/Tutorials
-
Tags
Summary
just html things that i've learnt/know. chap 1 is pretty easy formatting, chap 2 is slightly more effort. chap 3 is specifically table of contents (links). no css is used here. i hate css.
-
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!
-
Tags
Summary
iMessage as it looked up through iOS 6.
Series
- Part 2 of Azdaema's AO3 Messaging Skins
- Language:
- English
- Words:
- 1,525
- Chapters:
- 7/7
- Collections:
- 3
- Comments:
- 3
- Kudos:
- 68
- Bookmarks:
- 39
- Hits:
- 3,848
Bookmarked by Tiffany
22 May 2021
Bookmarker's Tags:
Bookmarker's Notes
Retro iMessage Skin by Azdaema Codes (Azdaema)
https://github.com/Azdaema/AO3-Skin_Messaging/tree/master/iMessage%20Retro