Actions

Work Header

Rating:
Archive Warning:
Category:
Fandom:
Additional Tags:
Language:
English
Stats:
Published:
2023-01-28
Updated:
2023-01-29
Words:
5,729
Chapters:
6/7
Comments:
12
Kudos:
60
Bookmarks:
64
Hits:
1,478

A Guide to AO3 HTML

Summary:

Frustrated by the way that AO3 would change or ignore HTML code I inserted, and unable to find an up-to-date, detailed guide, I decided to investigate the functionality of every tag that is permitted by the platform.

I learned a lot, and hopefully you can too!

Planned content:

Chapter 1 - Appearance Tags (tags which format text, and insert lines, etc.)
Chapter 2 - Functionality Tags (tags which do something; e.g. creating links to other pages, hover-over text, insert images, etc.)
Chapter 3 - Layout Tags (tags which affect the placement of the text on the page)
Chapter 4 - Tables (all by themselves because they’re a bit more complicated the other tags)
Chapter 5 - Global Attributes (general elements within tags that work on most tags)
Chapter 6 - Tips and Tricks (stuff I’ve learned about using HTML on AO3 the hard way so you don’t have to)
Chapter 7 - Accessibility (how to help people access your words and images more easily)

Notes:

Please note - this is not intended to be a comprehensive guide to HTML coding; merely a reference guide to using basic HTML on AO3. Each entry will give an external link to the relevant W3Schools tutorial if you’d like to explore more.

Short version: a tag <looks like this> in HTML. It comes as a pair with the </closing of the tag>, surrounding the element to be formatted, inserted, etc. For example, if I want to make text bold, I type <b>Text I want to highlight in bold</b> which looks like this: Text I want to highlight in bold when I publish or preview it. AO3 will generally close any tags you leave open for you, but you might not like how it goes, so stay vigilant!

Attributes are extra elements within the tags that have specific roles, e.g. <a href="http://www.google.com">Go To Google</a> where a is the insert link tag, and href is the attribute which tells the code where to go (note that it uses an = and ""). The outcome is Go To Google. For completeness, I’m listing all the available attributes for each tag, and whether or not AO3 allows them.

(See the end of the work for more notes.)

Chapter 1: Appearance Tags

Chapter Text

<b> is a appearance tag, which marks text as bold like this:

Bold text

Find out more here

 

<big> is a appearance tag, which is not supported by HTML5 but makes text one size larger than the default like this:

Bigger text (slightly)

Specific function on AO3:

The difference in size is marginal

Find out more here

 

<cite> is a appearance tag, which is a way of formatting the name of a thing referenced (basically makes it italic) like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis massa nec libero laoreet dictum.

Find out more here

 

<code> is a appearance tag, which shows the text in a way that looks like fixed-width screen code text, i.e. in a typewriter-like font like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis massa nec libero laoreet dictum.

Find out more here

 

<del> is a appearance tag, which is used alongside the “ins” tag to strike out text to demonstrate that it’s been deleted like this:

text that has been deleted

The following attributes are possible within this tag:

cite (specifies a url to a document that explains the reason why the text was deleted/changed) - not permitted in ao3
datetime (specifies the date and time of when the text was deleted/changed (yyyy-mm-ddthh:mm:sstzd format)) - not permitted in ao3

Find out more here

 

<em> is a appearance tag, which formats emphasis in the surrounded text - i.e. italics by default like this:

Emphasised text

Find out more here

 

<h1> is a appearance tag, which is the largest of the headings like this:

Heading 1

Specific function on AO3:

Centre-aligned on AO3

Find out more here

 

<h2> is a appearance tag, which is the 2nd largest of the headings like this:

Heading 2

Find out more here

 

<h3> is a appearance tag, which is the 3rd largest of the headings like this:

Heading 3

Specific function on AO3:

AO3 formats with a grey double-underline that stretches the width of the page

Find out more here

 

<h4> is a appearance tag, which is the 4th largest of the headings like this:

Heading 4

Find out more here

 

<h5> is a appearance tag, which is the 5th largest of the headings like this:

Heading 5

Find out more here

 

<h6> is a appearance tag, which is the smallest of the headings like this:

Heading 6

Specific function on AO3:

AO3 formats with a single, white underline that stretches the width of the page

Find out more here

 

<hr> is a appearance tag, which denotes a change of topic in the document by creating a horizontal line like this:

Specific function on AO3:

don’t expect this to come through from e.g. Google Docs - AO3 will ignore it!

Find out more here

 

<i> is a appearance tag, which formats the text as italic like this:

Italicised text

Find out more here

<ins> is a appearance tag, which highlights the text that has been marked as deleted by “del” like this:

text that has been inserted

The following attributes are possible within this tag:

cite (specifies a url to a document that explains the reason why the text was deleted/changed) - not permitted in ao3
datetime (specifies the date and time of when the text was deleted/changed (yyyy-mm-ddthh:mm:sstzd format)) - not permitted in ao3

Specific function on AO3:

underlines where other platforms italicise

Find out more here

 

<kbd> is a appearance tag, which shows the text in a way that looks like fixed-width screen code text, i.e. in a typewriter-like font like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis massa nec libero laoreet dictum. Aenean lacinia massa non velit tincidunt finibus. Donec gravida lobortis turpis, sed interdum ante eleifend at.

Specific function on AO3:

adds an extra line break on AO3, it would appear

Find out more here

 

<pre> is a appearance tag, which shows the text in a way that looks like fixed-width screen code text, i.e. in a typewriter-like font like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis massa nec libero laoreet dictum. Aenean lacinia massa non velit tincidunt finibus. Donec gravida lobortis turpis, sed interdum ante eleifend at.

Specific function on AO3:

adds an extra line break on AO3, it would appear

Find out more here

 

<q> is a appearance tag, which marks up the text as a short quotation (i.e. surrounded by curly double quotes; when nested, alternates between double and single quote marks) like this:

A short quantity of quoted text…

The following attribute is possible within this tag:

cite (specifies a url to a document that explains the reason why the text was deleted/changed. only visible to screenreaders) - works for ao3

Find out more here

 

<s> is a appearance tag, which Shows the text as being no longer correct (usually with a straight horizontal line struck through it) like this:

Text that has been struck through

Find out more here

 

<samp> is a appearance tag, which shows the text in a way that looks like fixed-width screen code text, i.e. in a typewriter-like font like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis massa nec libero laoreet dictum. Aenean lacinia massa non velit tincidunt finibus. Donec gravida lobortis turpis, sed interdum ante eleifend at.

Find out more here

 

<small> is a appearance tag, which shows the text as one size smaller than the default like this:

Smaller text (slightly)

Specific function on AO3:

the difference in size is marginal

Find out more here

 

<strike> is a appearance tag, which is not supported by HTML5 but strikes the text through with a straight, horizontal line like this:

Text that has been struck through

Find out more here

 

<strong> is a appearance tag, which highlights surrounded text as important (generally defaults to bold) like this:

Strong text

Find out more here

 

<sub> is a appearance tag, which subscript-offsets the text vertically half a line lower than the default; some platforms also shrink the text like this:

Subscript text vs normal text

Specific function on AO3:

the difference in position and size is marginal

Find out more here

 

<sup> is a appearance tag, which superscript-offsets the text vertically half a line higher than the default; some platforms also shrink the text like this:

Superscript text vs normal text

Specific function on AO3:

the difference in position and size is marginal

Find out more here

 

<tt> is a appearance tag, which not supported by HTML5 but shows the text in a way that looks like fixed-width screen code text, i.e. in a typewriter-like font like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis massa nec libero laoreet dictum. Aenean lacinia massa non velit tincidunt finibus. Donec gravida lobortis turpis, sed interdum ante eleifend at.

Find out more here

 

<u> is a appearance tag, which formats the text as underlined like this:

Underlined text

Specific function on AO3:

don’t expect this to come through from e.g. Google Docs - AO3 will ignore it!

Find out more here

 

<var> is a appearance tag, which not supported by HTML5 but shows the text as highlighted, italic by default like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis massa nec libero laoreet dictum. Aenean lacinia massa non velit tincidunt finibus. Donec gravida lobortis turpis, sed interdum ante eleifend at.

Find out more here