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
-
you were never meant for the computer screen by mackerel_cheese
Fandoms: Harry Potter - J. K. Rowling
31 Mar 2025
Tags
Summary
Viewing Regulus' Internet History
- noah kahan great divide
- noah kahan great divide release date when
- how to stop ssri safely
- sleeping aid alternatives
- melatonin gummies same day delivery
- sirius black twitter
Or: In a world full of sharp edges, some people just need a soft place to land. (Even when they think they don't deserve it.)
Series
- Part 2 of marauders social media html fever dreams
- Language:
- English
- Words:
- 9,594
- Chapters:
- 1/1
- Collections:
- 2
- Comments:
- 89
- Kudos:
- 151
- Bookmarks:
- 28
- Hits:
- 1,008
Bookmarked by AmethystHeart2421
31 Mar 2025
Bookmarker's Tags:
Bookmarker's Notes
you were never meant for the computer screen
mackerel_cheese -
Tags
Summary
Popup tooltips that work well on both desktop (hover) and mobile (tap open and close). Constrained width, so best for short tooltips or translations for a couple words at the most.
Series
- Part 1 of Simbeline's Work Skins
- Language:
- English
- Words:
- 330
- Chapters:
- 1/1
- Collections:
- 4
- Comments:
- 30
- Kudos:
- 242
- Bookmarks:
- 303
- Hits:
- 9,582
Bookmarked by julidoesnotwrite (notjuli)
01 Apr 2025
Bookmarker's Tags:
Bookmarker's Notes
the best way to have hover text translations that work both on desktop and mobile, 10/10 would recommend
-
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,090
- Chapters:
- 12/17
- Collections:
- 8
- Comments:
- 1,054
- Kudos:
- 5,800
- Bookmarks:
- 6,616
- Hits:
- 356,209
Bookmarked by Katophoenix_SideAccount
07 Apr 2025
Bookmarker's Tags:
Bookmarker's Collections:
Bookmarker's Notes
Honestly the best reference I've come across, this is probably my go-to reference sheet at the moment
-
Tags
Summary
Some people wonder how to do the mouseovers and hovertext on AO3. This comes in especially handy if you want translations of the text you've written to show up when the original text is moused over (you, of course, must provide the translation). While there are ways to do this in CSS coding, AO3 is not set up to allow it. However, you can do it in basic HTML, and there's a couple different ways to get the look you want. So here you go!
Note: If read on a phone, these often do not work as intended. Stupid phones.
-
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
ACT ??? Scene 15
[THE TRAVELER blinks awake in a field from a dream.
The sun is warm. The grass beneath is soft. It is, truly, a lovely day.]
TRAVELER [Aside]: ...It's not so bad, is it? Being here in the loops?
-
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
-
Murderbot Outside POVs by blackglass, FlipSpring, GoLBCollabs (GodOfLaundryBaskets), GoLBPodfics (GodOfLaundryBaskets)
Fandom: The Murderbot Diaries - Martha Wells
01 Feb 2023
Summary
Exactly what it says on the tin.
Thank you to all podficcers for your amazing sound arts. <3
- Words:
- 32,123
- Works:
- 8
- Bookmarks:
- 335
Bookmarked by EldritchPiper
21 Apr 2025
Bookmarker's Tags:
Bookmarker's Notes
These are so good augh
Pt8 -
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
- Language:
- English
- Words:
- 999
- Chapters:
- 1/1
- Collections:
- 8
- Comments:
- 101
- Kudos:
- 638
- Bookmarks:
- 757
- Hits:
- 32,629
Bookmarked by urisarang
25 Apr 2025
Bookmarker's Tags:
Bookmarker's Notes
CSS explanations of how to do hover text!
-
CSS GUIDES by Goddess_of_the_arena
Fandom: AO3 help - Fandom, css - Fandom, HTML - Fandom, Work Skin - Fandom, Work Skins - Fandom
22 May 2025
Summary
Guide 1 colored text, also with gradient effect.
Guide 2 new fonts, in more colors, size and with gradient effect.
Guide 3 highlight text, text boxes, diary pages.
Guide 4 glitching text similar to the Zalgo font, mirror text, vertical text, upside down text, colored blockquote.
Guide 5 underline types, line dividers (also with emoticon/emoji).
Guide 6 shadowed text, bordered text, 3D text, neon text.
Guide 7 change background color, font color and/or font type of your story, either for the whole work or giving a different style to every chapter.
Guide 8 add emoticon/emoji to story title, username, summary, notes, chapter titles.- Words:
- 28,473
- Works:
- 9
- Bookmarks:
- 68
-
How to by Charles_Rockafellor
Fandom: AO3, AO3 CSS, AO3 help - Fandom, Conlangs - Fandom, css - Fandom, HTML - Fandom, The Matrix (Movies), Work Skins - Fandom
24 Mar 2025
Summary
This series started as just a one-shot to help people with AO3's CSS for making work skins. Now that I've written a piece on making series (originally for a friend, but then shared to a Facebook group, so I figured why not add it to AO3), I figured that the two really should be linked for tutorial purposes. I had no plans to do any of this at first, so maybe I'll add more in the future (Collections come to mind, and they're really easy to do).
I don't expect to add further tutorials, but I hadn't expected to write these either. I'm calling the series complete, but who knows (one thing that keeps nudging me is to take the statistics and show how fics' half-lives vary, for example; another is putting all weird AO3 fixes into one spot).
NB: If you're wondering, please see How to make and fix a series on AO3 (in this series with the tutorial on CSS work skins for fonts, which made that link become underscored blue ink [assuming that your browser settings, site skin, and third party apps didn't prohibit it]).
- Words:
- 148,604
- Works:
- 9
- Bookmarks:
- 93
-
This work isn't hosted on the Archive so this blurb might not be complete or accurate.
Tags
Summary
We create simplified and interactive learning experiences.
Learning web development should be easy to understand and available for everyone, everywhere!
W3Schools is a school for web developers, covering all the aspects of web development:
Learn HTML
HTML is the standard markup language for Web pages.With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
- Bookmarks:
- 1
-
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 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
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
-
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