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
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will 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.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
Tags
Summary
As of April 2016, The database that stores works on A03 does not allow emoji. If you try to add an emoji it will end your story there. Any words after the emoji? Poof. Gone. This is a known, if poorly advertised, issue with the archive.
There are some workarounds; you can find them in: How to Make iOS Text messages on A03. But here? Here is for ALL THE EMOJI*.
10 chapters of emoji tables, each with the HTML for putting the emoji into your work and the CSS for putting it into your workskin. Copy-Paste baby. Copy-Paste.
*Does not contain the 2016 Unicode release. You'll have to come up with the code for pickle yourselves.
(Note, because this is 10 chapters of emoji tables, here is a link to the Index Tables (chapter 1) to speed up load times and reduce confusion if you have preferences set to "entire work.")
Series
- Part 11 of AO3 Work Skins/Tutorials
-
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
-
HTML test coding by Grumpy_Old_Snake
Fandoms: Original Work, Undertale, html help, Non-Fiction - Fandom
10 Jul 2017
Tags
Summary
I set out to see if there's a way to create Sans' spread out dramatic speech in a readable way that line-breaks smoothly. I believe I was successful! So here are some instructions.
-
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
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
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: Choose Your Own Adventure
Part Seven: Chapter Title
Part Eight: The Title, the Username and Links
Part Nine: Boxes (still in progress)
Part Ten: Newspaper Article -
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
Based on phyripo's guide, with some usability improvements made to reblogs and photoset creation.
-
loaf of love by arranonymous (fiqueligia)
Fandoms: Kuroko no Basuke | Kuroko's Basketball
28 Jan 2021
Tags
Summary
[ To you all, Paparazzi ]
-
Tags
Summary
A tutorial for creating and formatting spreadsheets in AO3, using CSS and HTML.
-
Tags
Summary
A short tutorial for creating ruby text (furigana) in AO3, using CSS and HTML.
-
Tags
Summary
A companion to Repository. A comprehensive guide to coding focused solely on emulating Twitter posts for fun or for archiving Twitter fics, up to and including:
- Quote Retweets
- Embedded Images
- Twitter PollsSeries
-
go-black by abracatastrophe (fiqueligia) for homurashunkin
Fandoms: Black Clover - Tabata Yuki (Anime & Manga)
02 Apr 2020
Tags
Summary
Berbekal info dari Gugel yang always listening always understanding, Yuno akhirnya bisa melakukan pemesanan pertamanya.
[ AstaYuno Slight!LichtLumiereRhya ]
-
Tags
Summary
Essentially, I write on a mobile device and therefore have to use HTML instead of rich text. I decided to conduct an experiment and these were the results.
If you're having trouble with formatting, this might help...?
[For HTML basics, click "About" on the hotbar up ^ there, then "FAQ" and find your way from there)
-
Tags
Summary
Based on gadaursan's "Fire Emblem Support Scripting" work skin, a HTML and CSS to format screenplay and scripts (or dialog-only/dialog-heavy works), but with some edits: 1) adjusted the images for smaller screens, 2) added a text box/speech bubble, 3) In version 3, added character's name.
-
CSS in Testing by InfinitysWraith
Fandoms: Ao3 Skins - Fandom, Work Skins - Fandom, css - Fandom
18 Apr 2022
Tags
Summary
This is a flaming dumpster filled with CSS and HTML experiments. It's not instructional, but I post the code and my own explanations for both our sakes. Feel free to steal the code or ask me questions- I don't know what I'm doing. :)
(Pics are mine though)
Chapter 5 is probably what you're looking for ;)
It seems I've broken Ao3 yet again. I can no longer add more code to my work skin so we're moving on to part two!I'm not going to say I take requests, but I'm always looking for inspiration.
Series
- Part 1 of CSS in Testing
-
Tags
Summary
Any place that you can add text on AO3, you can also add a link.
- summary
- author's note
- comment
- profile
Here's how you do it.
Series
- Part 4 of How to AO3
-
Tags
Summary
Настройка скина для сайта с сортировкой тэгов и русскими названиями категорий в шапках
Series
- Part 1 of Архив на русском
-
Tags
Summary
Добавим немного кириллицы на главную страницу archiveofourown
Series
- Part 2 of Архив на русском
Pages Navigation
Bookmarks which have used it as a tag:
Pages Navigation
-
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 guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will 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.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
Tags
Summary
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will 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.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
Tags
Summary
Just a quick and dirty HTML reference for AO3, with references to CSS style, HTML style, and other guides.
Series
-
AO3 Work Skins/Tutorials by CodenameCarrot, La_Temperanza
Fandom: Deadpool (Comics), Deadpool - All Media Types, No Fandom, Undertale (Video Game)
22 Aug 2018
- Words:
- 60,825
- Works:
- 18
- Bookmarks:
- 2,410
Bookmarked by Remember_The_Lion_Shits_Carrots
30 Aug 2022
Bookmarker's Tags:
Bookmarker's Notes
Skiiiiiiiiiiinnnnn
-
The Fic Writers Guide to Formatting (An AO3 Repository) by AnisaAnisa
Fandoms: No Fandom
17 Aug 2022
Tags
Summary
A guide/resource/tutorial/testing ground for HTML and CSS on AO3.
1. HTML Basics – Manipulating text and page formatting with HTML.
2. Links & Embeds - How to add links, images, and GIFs.
3. Page Dividers - How to customise page dividers.
4. Titles - How to customize work, chapter, username and link titles. -
Tags
Summary
Hen has added +1 213 555 to Firehouse 118
Hen: This is Eddie!
Eddie: Hey everyone :)Buck: Why would she add him to our private groupchat
Chimney: I’m literally sitting right next to youor, Buck and Eddie’s progression through texts.
-
Tags
Summary
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will 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.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
Tags
Summary
“Oh my God,” the girl says.
It’s not the oddest exclamation Eddie’s heard from a person who’s just crashed their car into a telephone pole, but more the way it’s said: something dizzied and a little resigned, as though she is both concussed and mostly just inconvenienced by it. It’s enough for Eddie to peer into the window as Buck heaves at the car door with the jaws of life, armed with a penlight. “Ma’am, can you tell me your name?”
“You’ve got to be kidding me,” the girl says, which doesn’t quite sound like a name to Eddie. He’s just about to tell her as much until she goes, “You’re LAFD Updates man.”
or, five times someone recognises Eddie as the LAFD Updates man.
Series
- Part 2 of Mr LAFD Updates Man
-
Tags
Summary
LAFD Updates (@L*A*F*D_Metro)
LAFD Alert: Red-level traffic on Gardiner Road this morning. If you are trying to get into the city centre consider taking Westerley Lane.buck 🔥🔥 (@firebuck)
so true bestie
or, Eddie mans the LAFD Twitter account. Buck tries to be supportive.
Series
- Part 1 of Mr LAFD Updates Man
-
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.
-
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
-
How to Save the World by Shinsō Hitoshi by ElianSolaria
Fandoms: 僕のヒーローアカデミア | Boku no Hero Academia | My Hero Academia
21 Apr 2022
Tags
Summary
Shinsou Hitoshi wakes up— with hands too small and memories that shouldn’t belong to him— but, he wakes up.The last thing Hitoshi will ever see is Eri screaming— Eri dying.
God, he failed, he failed Aizawa-sensei’s order, he failed his promise to make sure Eri lives.
(He’s so fucking useless, couldn’t even keep his own sister safe. He wonders why they think that he could have saved them all, why they even believed in him.)Hitoshi turns to dust.
His only thought is this: He’d going to save Eri even if it kills him (again).HIATUS as of 10/9/2022. NOT ABANDONED
real life needs to be my priority rn, and i'm not sorry for that -
Tutorials and Experiments with Ao3 Coding by Red_Dragonn
Fandoms: Ao3 Tutorial - Fandom, Meta - Fandom
06 Jul 2022
Tags
Summary
Every other day I open up a new draft to figure out some formatting thing for a fic and then close it and do not share my discoveries or exploits with anyone. I've decided to just make those (or at least the "successful" ones) public for other people to use.
-
Tags
Summary
There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:
1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and ImagesEach tag will 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.
It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.
-
Tags
Summary
This is a tutorial/live example on how to mimic email windows on AO3 without the need to use images.
Series
- Part 12 of AO3 Work Skins/Tutorials
-
Fonts, and colors, and work skins, oh my! by Charles_Rockafellor
Fandoms: css - Fandom, Work Skins - Fandom
24 Jan 2021
Tags
Summary
Explains:
● how to make a work skin;
● how to colorize text and circle words and highlight backgrounds (examples in head-note), and change and resize your fonts;
● the CSS code for diacritics to render properly, e.g.: “ầ” & “ồ” (with diacritics not superimposed), or “ị” (with underdot directly beneath, not kerned to the left), without breaking words such as “gầu” or “vịt” (using a monotype font for these letters would create gaps to each side of the ầ or the ị). Head-note has corrected examples;
● Site Skin addenda to block / shrink tags, and block authors / works;
● even a quick way (code included) to simply make a Site Skin so that you can read everything in your font of preference!
Full code is included.I read, appreciate, and reply to all of your comments — they're always welcome!
𝑫𝒐𝒏'𝒕 𝒇𝒐𝒓𝒈𝒆𝒕 𝒕𝒐 𝑳𝒊𝒌𝒆, 𝑺𝒉𝒂𝒓𝒆, 𝒂𝒏𝒅 𝑺𝒖𝒃𝒔𝒄𝒓𝒊𝒃𝒆! ❤️
Series
- Part 1 of How to
-
CSS in Testing by InfinitysWraith
Fandoms: Ao3 Skins - Fandom, Work Skins - Fandom, css - Fandom
18 Apr 2022
Tags
Summary
This is a flaming dumpster filled with CSS and HTML experiments. It's not instructional, but I post the code and my own explanations for both our sakes. Feel free to steal the code or ask me questions- I don't know what I'm doing. :)
(Pics are mine though)
Chapter 5 is probably what you're looking for ;)
It seems I've broken Ao3 yet again. I can no longer add more code to my work skin so we're moving on to part two!I'm not going to say I take requests, but I'm always looking for inspiration.
Series
- Part 1 of CSS in Testing
-
Tags
Summary
A work skin for mimicking Discord messages. Works on both mobile and desktop, with the creator's style enabled or disabled. Code is linked in the fic notes.
Series
- Part 2 of work skins
-
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