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).
Bookmarks which have used it as a tag:
Pages Navigation
-
How to create a work skin to have different fonts and colors in your works by Goddess_of_the_arena
Fandoms: css - Fandom, HTML - Fandom, Work Skins - Fandom, AO3 help - Fandom
30 May 2024
Tags
Summary
This is a tutorial on how to use different fonts on Ao3, how to make them in different sizes and how to make them colored as well.
It also contains two ready-to-use codes to give your fonts a gradient effect. There are both the code for the linear gradient effect and the code for the radial gradient effect.
WARNING: all the codes in this guide were tested on a computer. I can't guarantee the effect when the work they are applied to is read on a mobile phone.Series
- Part 2 of CSS GUIDES
-
The Curious Incident of Mr. Deer by Anonymous
Fandoms: 괴담에 떨어져도 출근을 해야 하는구나 - 백덕수 | Got Dropped into a Ghost Story Still Gotta Work - Baek Deoksoo
23 Feb 2025
Tags
Summary
In a company like Daydream Inc. it is hard to tell apart rumors from exaggerations or truths. A lone new recruit making splashes in under a year shouldn't be more unlikely than a seasoned veteran disappearing out on a lunch break due to a curse, but somehow, it is.
Series
- Part 1 of "He was just there"
-
Tags
Summary
HTML/CSS to replicate an email in Gmail as a work skin.
-
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 live example of my AO3 skin that allows the author to recreate the look of lined notebook paper in their work. To learn more about it, you can find the tutorial here.
Series
- Part 7 of AO3 Work Skins/Tutorials
-
Tags
Summary
This is a live example of my AO3 skin that allows the author to recreate the look of sticky notes (aka Post-Its) in their fic. To learn more about it, you can find the tutorial here.
Series
- Part 8 of AO3 Work Skins/Tutorials
-
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,915
- Works:
- 19
- Bookmarks:
- 4,039
-
Phone Screen / Lock Screen AO3 Work Skin Guide by imperiousmarshmallow
Fandoms: No Fandom
15 Mar 2025
Tags
Summary
A tutorial to mimic a basic iOS-style phone screen with notifications and now playing indicator.
Series
- Part 3 of AO3 Work Skin Tutorials
Bookmarked by stickistuffin
08 Jun 2025
Bookmarker's Tags:
Bookmarker's Notes
How to make an un interactive phone screen
-
Use HTML Chats in your fic! (NO CODING NEEDED!) by cakecats
Fandoms: 崩坏：星穹铁道 | Honkai: Star Rail (Video Game), No Fandom
22 Sep 2024
Tags
Summary
I know a lot of authors struggle with HTML so I made this web tool where you can write chats 100% visually with no code at all. All you have to do is click two buttons and the HTML will be done for you :)) The link is in the fic — enjoy!
NOTE: Only chapter 1 is needed if you want to use the tool.
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
mm whatcha say?: Changing Text On Hover for Multilingual Fics (A Download Friendly Workskin) by mackerel_cheese for Graverobbber, enbyguous, vespeelira
Fandoms: No Fandom
18 Mar 2025
Tags
Summary
Do you want to have a nifty way to have multiple languages in a fic:
- Without making your readers scroll to the AN for a translation?
- Without the text and translation sitting side by side?
- And still make it look pretty when people download it into an EPUB or PDF format?
Here is a solution for you. Come on babygirls, let's roll.
(This is a HTML tutorial but I'm lowkey flirting with you by calling you babygirl occasionally because I got bored while writing this.)
Series
- Part 3 of .shapes_and_colours
-
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,915
- Works:
- 19
- Bookmarks:
- 4,039
-
[Tutorial] Free, Serverless Hotlinking and Image Hosting for AO3 by indecisive_fan_girl
Fandoms: No Fandom
06 May 2025
Tags
Summary
This guide is for a mobile friendly method to host files for hotlinking on AO3 or elsewhere, using Github and Cloudflare Pages.
See the demo site made from this template IN ACTION: https://hotlink-archive-template.pages.dev/
-
Tags
Summary
This is a tutorial on how to create Twitter / X templates for AO3, includes both Tweets and profile card.
- Scalable so it's also accessible to mobile users.
- Tweets (chapter 1): text, tags, quote tweet, photo(s), replies, verified checkmark.
- Profile card (chapter 2): displays a user's profile as shown on Twitter.
- Please let me know if there are bugs and/or requests. -
Tags
Summary
Twitter work skin.
- Tweets, quote-tweets, images, polls...;
- DM's, text, emojis, images, voice messages, groupchats...;
- Scrollable version. -
Tags
Summary
This is a work skin to create a fic-within-a-fic on AO3, complete with the top navigation bar, kudos, and comments!
-
Tags
-
Tags
Summary
A Discord workskin that supports most Discord-style markup. Includes layouts for channels, DMs, and Group Chats. Darkmode only.
-
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
A bunch of Ao3 Skins with flag pride colors!
Happy pride month!
Series
- Part 7 of CSS code scripts for Ao3