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
-
the hottest topic by mystyrust for Alexa_Piper, murphy_kitt, Dekalkomania, x_steelcrow_x, heartbeatslows
Fandoms: Danny Phantom
18 Apr 2022
Tags
Summary
Sailor of ships @letmyshipssail
so how did you end up working at hot topic? @deadTired
|
Yes I work at hot topic ✔ @deadTired
They were hiring.
|
Hot Topic ✔ @hottopic
we'd never say no to an emo punk boy who wants to work for us 🤙🤪The internet tries to figure the ghost boy out. Someone theorized he could be a 'half-ghost', but what does that mean, anyway?
Series
- Part 4 of phight phight phight!!
- Part 4 of #html_cinematic_universe
-
Skin for Putting Music Indicators in Your Fic by SpookyTesting (FierySprites)
Fandoms: No Fandom
27 Apr 2022
Tags
Summary
A work skin for inserting stylized music links into your fic, ala Super Smash Bros.’ music labels at the start of each match.
-
Tags
Summary
Have you ever been reading a fic on here and thought 'gee I wish this looked more like a post-apocalyptic nightmare world. maybe with a clown or two'. Well then buddy do I have some code for you
-
Css in Testing: Second in the Series by InfinitysWraith
Fandoms: Ao3-Skins, Work-Skins, css - Fandom
22 Aug 2023
Tags
Summary
𝔚𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔭𝔞𝔯𝔱 𝔱𝔴𝔬 𝔬𝔣 𝔴𝔥𝔞𝔱 𝔦𝔰 𝔫𝔬𝔴 𝔞𝔭𝔭𝔞𝔯𝔢𝔫𝔱𝔩𝔶 𝔞 𝔰𝔢𝔯𝔦𝔢𝔰 𝔟𝔢𝔠𝔞𝔲𝔰𝔢 ℑ 𝔟𝔯𝔬𝔨𝔢 𝔰𝔬𝔪𝔢𝔱𝔥𝔦𝔫𝔤 𝔦𝔫 𝔪𝔶 𝔩𝔞𝔰𝔱 𝔚𝔬𝔯𝔨 𝔖𝔨𝔦𝔫 𝔞𝔫𝔡 𝔠𝔞𝔫'𝔱 𝔞𝔡𝔡 𝔞𝔫𝔶𝔱𝔥𝔦𝔫𝔤 𝔪𝔬𝔯𝔢 𝔱𝔬 𝔦𝔱 :)
𝔜𝔬𝔲'𝔯𝔢 𝔴𝔢𝔩𝔠𝔬𝔪𝔢 𝔱𝔬 𝔞𝔰𝔨 𝔮𝔲𝔢𝔰𝔱𝔦𝔬𝔫𝔰, 𝔰𝔱𝔢𝔞𝔩 𝔠𝔬𝔡𝔢 𝔬𝔯 𝔬𝔣𝔣𝔢𝔯 𝔪𝔢 𝔦𝔫𝔰𝔭𝔦𝔯𝔞𝔱𝔦𝔬𝔫. 𝔍𝔲𝔰𝔱 𝔡𝔬𝔫'𝔱 𝔱𝔞𝔨𝔢 𝔪𝔶 𝔞𝔯𝔱𝔴𝔬𝔯𝔨 𝔴𝔦𝔱𝔥𝔬𝔲𝔱 𝔞𝔱 𝔩𝔢𝔞𝔰𝔱 𝔩𝔦𝔫𝔨𝔦𝔫𝔤 𝔪𝔢 𝔶𝔬𝔲𝔯 𝔣𝔦𝔠 ;)
ℑ𝔣 𝔶𝔬𝔲 𝔥𝔞𝔳𝔢𝔫'𝔱 𝔞𝔩𝔯𝔢𝔞𝔡𝔶, 𝔱𝔞𝔨𝔢 𝔞 𝔩𝔬𝔬𝔨 𝔞𝔱 𝓟𝓪𝓻𝓽 𝓞𝓷𝓮 𝔣𝔬𝔯 𝔪𝔬𝔯𝔢 𝔭𝔯𝔬𝔧𝔢𝔠𝔱𝔰.
Click me!
Ao3 done unleashed a monster right here and it's goddamn beautiful.
Series
- Part 2 of CSS in Testing
-
the idiot's incoherent guide to learning css & html for ao3 in dystopia by Anonymous
Fandoms: No Fandom
20 Jun 2022
Tags
Summary
CSS & HTML code illiterate but want to add socmed elements amongst other interesting elements in your work? The Idiot™ pertained in the title? Then this Idiot's Incomprehensible Guide is for you! Alternatively, an autobiographical exploit and documentation into learning CSS and HTML in AO3 through the guide of other authors written in a third person perspective. If you found this, I'm so sorry. I'm publishing this so it doesn't get deleted.
-
Details for adding the KuroFai Olympic 2022 Banners by peaceful_fury
Fandoms: Tsubasa: Reservoir Chronicle
06 Jun 2022
Tags
Summary
Instruction on how to add the Team banner for all entries in the KuroFai Olypics 2022 Cursed vs Blessed.
The wonderful banner art done by Amé. -
Tags
Summary
A work skin based off of Disco Elysium's dialogue box!
Contains: Skills, Text, Title, Dialogue choices, Author, Summary, Links, "Continue" divider, Dialogue notifs (money, items, experience), Morale and Health notifs, Check Outcome notifs, and Background formatting.
Fic Content: Showcase and Code with notation.For mobile: Formatting is all there, but fonts aren't. Still readable.
Pending updates (Vanity updates): Thought gained and thought complete.
-
Tags
Summary
A rudimentary version of my Disco Elysium work skin!
Contains: Skill colors, Name colors, Text colors, Notif colors, Bg color, Choice colors, and a "Continue" divider.
-
Mimicking Minecraft for fics- Some Minecraft Work Skins by Ultraviollett
Fandoms: Fandom - Fandom, Minecraft (Video Game), Hermitcraft SMP, Dream SMP, Empires SMP
20 Apr 2024
Tags
Summary
Some CSS for workskins involving minecraft!
Current chapters:
-Minecraft chat text, including "[username] joined/left game" and "[username] whispers to you"
-Minecraft buttons (respawn/ quit to title)
-End poem text
-minecraft booksSeries
- Part 1 of AO3 workskins
-
Tags
Summary
Just hoe-ing it out with HTML discoveries and subsequently attempting to enrich my knowledge on making my works boujee as hell.
See beginning notes to know inclusions and exclusions.
-
suspend disbelief by mystyrust
Fandoms: 僕のヒーローアカデミア | Boku no Hero Academia | My Hero Academia
10 Aug 2022
Tags
Summary
It was going to be a perfect day.
It was going to be a good day.
It was going to be a terrible day.Someone, something, was messing with Izuku’s daily routine, and when his suspension of disbelief breaks, it also breaks his perception of his world as he knows it.
-
Skin for Recreating TTYD’s Text Boxes by SpookyTesting (FierySprites)
Fandoms: Super Mario & Related Fandoms, Paper Mario: The Thousand Year Door
30 Jan 2025
Tags
Summary
A work skin for recreating some text boxes from Paper Mario: The Thousand-Year Door—specifically, the informational ones from both the 2004 and 2024 versions.
-
what a tragic attraction! by basilspolaroid
Fandoms: 終わりのセラフ | Owari no Seraph | Seraph of the End
07 Sep 2022
Tags
Summary
u/yuuandmetogether
I THINK I LIKE MY CO-STAR???
So I [20 M] work on the set of a really popular TV show, obvs can't say which one, but i'm a main character, and the other main character [21 M] works along side me, and he's REALLY PRETTY. like super model pretty yk. and we are supposed to be like kinda pining over eachother because we have been apart for so long, but when it gets to the point where its not fake anymore wtf am i supposed to do??? like i accidentally stab him in the show but i just like couldn't stop staring at him i got really distracted. i think my other co-star [20 F] is catching on to me. HELP????
[aka: in which owari no seraph was a tv show and yuu realises that he may like his co-star more than he should]
or, the mikayuu actor au + reddit au you didn't know you needed but deserved.
Series
- Part 1 of fics written on dares
-
#Justice4Gotham by Havendance
Fandoms: Batman - All Media Types, Batman (Comics), Robin (Comics)
31 Aug 2022
Tags
Summary
So, uh, Hi. I’m still alive. I didn’t die of the clench (barely). I’m kind of sorry for disappearing on you for so long but life just got really busy and I didn’t really have time to chase after Batman and Robin anymore. I’m not sure how many of you guys still check this blog, but if you are out there, I’ve got a big favor to ask you all.
On June 27th at 7:03pm, Gotham City was hit by the worst earthquake the east coast has seen in, like, ever. And now we could really use your help.
[Or: When you run out of things you can do, there’s always yelling at the world from the blog you made when you were ten.]
-
Arknights Style Dialog [Work Skin] by Clover_Zero
Fandoms: 明日方舟 | Arknights (Video Game)
20 Jan 2023
Tags
Summary
A work skin meant to mimic the communication recorder in Integrated Strategies 2.
Update 2025-04-07: Fixed broken images/icons.
Series
- Part 2 of Clover Zero's AO3 HTML & CSS
-
Mystery Work
Part of strawberry collection
Summary
This is part of an ongoing challenge and will be revealed soon!
-
Tags
Summary
A work skin and tutorial for logic grid puzzles on AO3. This tutorial includes 2 versions of a logic grid puzzle: a basic version (printable!) and an interactive puzzle grid!
See Chapter 1 for an overview of the style with annotations, Chapter 2 for an explanation of how it all works (including a tutorial on making the grid printable, hiding the solution table behind a spoiler block and how to make the grid interactive), Chapter 3 for the full CSS code for easy copy-pasting, Chapters 4 and 5 for an example of an interactive 3x3x3 logic grid with the HTML code, Chapters 6 and 7 for a basic 3x3x3 grid and Chapters 8 and 9 for a 4x4x4 logic puzzle grid.
All the puzzles that appear in this tutorial are solvable and the solutions are included here!
-
Tags
Summary
A work skin tutorial of a Google Search Suggestions page in AO3.
See Chapter 1 for examples of the work skin with 4 different suggestions types (auto-complete suggestions, recent history, related to recent searches and trending searches), Chapter 2 for an explanation of the CSS work skin, Chapter 3 for the complete CSS code of the work skin, Chapter 4 for explanations of the HTML code and Chapter 5 for the complete HTML code (all 4 types of suggestions).
-
Tags
Summary
A work skin and tutorial for a Discord chat in AO3. The Discord page is available in light and dark mode!
See Chapter 1 for examples of the work skin, Chapter 2 for a tutorial on how to set up your HTML page and explanations on the code, Chapter 3 for HTML templates for easy copy-pasting and Chapter 4 for the complete CSS code of the work skin.
-
Tags
Summary
The first of many site skins I'll be making! This one is based on Sun Wukong, inspired by sunlight and peaches!
It changes how AO3 looks, with a background of Wukong and a change of colours to match!!
Series
- Part 1 of Fandom AO3 Site Skins for your pleasure!
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
Tags
Summary
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
-
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,067
-
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
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
Embedding tutorial
- Language:
- English
- Words:
- 212
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 3,155
- Kudos:
- 7,673
- Bookmarks:
- 4,895
- Hits:
- 369,687
Bookmarked by Kkyu_tie
30 Dec 2019
Bookmarker's Tags:
Bookmarker's Notes
Heck yeah, learn to do the thing!
-
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,067
Bookmarked by IantoLives
04 Jan 2020
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
How To's!!!!!
Also seecodecademy.com
And
w3schools.com
-
The Nice and Accurate Guide to Footnotes by Vigs for fersh
Fandoms: Good Omens - Neil Gaiman & Terry Pratchett, Good Omens (TV)
10 Aug 2019
Tags
Summary
If you're writing fanfiction for Good Omens, you may find yourself wanting to include footnotes.
But html can be confusing. What can you do?
Read this guide to find out!
-
Tags
Summary
Embedding tutorial
-
Tags
Summary
Primarily just where I share work skin code and discuss ways to improve the Ao3 experience, including:
- Twitter and Instagram like posts
- Non iOS messaging systems
- Avatar and image formatting for script formats.
- Search engine interfaces
- Documentation on AO3 Site SkinsSeries
-
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,853
- Bookmarks:
- 6,688
- Hits:
- 358,983
Bookmarked by Amanthya
10 Apr 2020
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
dwnld'd - 11May2025
-
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 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 -
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
Some formatting fixes that I've found in real-time. If you comment I'll see if I can help, but no guarantees!
-
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
-
The Nice and Accurate Guide to Footnotes by Vigs for fersh
Fandoms: Good Omens - Neil Gaiman & Terry Pratchett, Good Omens (TV)
10 Aug 2019
Tags
Summary
If you're writing fanfiction for Good Omens, you may find yourself wanting to include footnotes.
But html can be confusing. What can you do?
Read this guide to find out!
- Language:
- English
- Words:
- 1,860
- Chapters:
- 1/1
- Collections:
- 1
- Comments:
- 132
- Kudos:
- 389
- Bookmarks:
- 367
- Hits:
- 8,951
Bookmarked by pearlyeverlasting
08 May 2020
Bookmarker's Tags:
Bookmarker's Notes
A lovely HTML footnote reference and great to see the particular limitations of HTML on the site. (Note to self: build custom CSS as soon as possible.)
-
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.
-
Centering and Scaling Images by KingOuija
Fandoms: The Magnus Archives (Podcast), No Fandom
10 Aug 2019
Tags
Summary
Brief explanation of how to center and scale embedded images with workskins
-
Tags
Summary
Embedding tutorial
-
Tags
Summary
Embedding tutorial