Chapter Text

general stuff

• to start a paragraph/line of text, use (p)
• bold text: use (strong) or (b)
• italicized text: use (em) or (i)
• underlined text: use (ins) or (u)
• strikethrough: use (strike) or (del)
• superscript: use (sup)
• subscript: use (sub)
• big text: use (big)
• small text: use (small)
• close all these tags with a slash and the same tag that you used to start it with
• don't put any spaces between a bold/italics/underline/etc. tag and the content or the closing tag.

examples:

(p)here is my paragraph. to close it i use this(/p)

here is a (strong)bolded(/strong) word and here is (b)another(/b).

an (i)italicized(/i) word and (em)another one(/em)

now for some (del)deleted text(/del) and (strike)a different variation(/strike)

a (sup)superscript(/sup) word and a (sub)subscript(/sub) word.

(big)some big words(/big) and a (small)small(/small) one.

how it looks in html:

here is my paragraph. to close it i use this

here is a bolded word and here is another.

an italicized word and another one

now for some deleted text and a different variation

a ^superscript word and a _subscript word.

some big words and a small one.

aligning text

• (p) automatically aligns text to to the left.
• use (p align="center") to have a paragraph in the center
• use (p align="right") to have a paragraph aligned to the right
• use (p align="justify") to have a text-justified paragraph.
• to close these tags, simply use (/p)
• you can use these "align" codes with pretty much everything else
• for example, all the headers i have are in the style (h2), but it isn't automatically centered, so i write it as (h2 align="center")
• just make sure you put the equals sign and quotes so it works
• if you use something like google docs to write and change the font, remember that the straight quote mark is required for html on ao3, i.e. this thing: ". if you use a curved or slanted version of that in your html, it will not work!!

example:

(p)text on the left.(/p)

(p align="center")text in the center.(/p)

(p align="right")text on the right.(/p)

(p align="justify") text justified. for this one, you will need more text so you can see how it works, so here's some lipsum: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.(/p)

how it looks in html:

text on the left.

text in the center.

text on the right.

text justified. for this one, you will need more text so you can see how it works, so here's some lipsum: lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

headers

• there are six headers on ao3 that you can use
• (h1), (h2), (h3), (h4), (h5), and (h6)
• to use these, simply put the number you want after the "h" (no spaces) and write your text
• close the tag with a "/"

example:

(h1)this is header 1(/h1)

(h2)this is header 2(/h2)

(h3)this is header 3(/h3)

(h4)this is header 4(/h4)

(h5)this is header 5(/h5)

(h6)this is header 6(/h6)

how it looks in html:

this is header 1

this is header 2

this is header 3

this is header 4

this is header 5

this is header 6

lines and breaks

• to make a short line in the center of text, use (p)text(/p)(hr /)(p)more text(/p)
• to make a break in text (w/o any lines) use (br /)
• to have a space between paragraphs (like for a scene change), use (p)(br /)(/p) to make a gap. at least, that's what i do

examples:

example 1: some text here blah blah blah(/p) (hr /) (p)and more text here blah blah blah.

example 2: again, more text yada yada yada whatever(br /)and a line break there.

example 3: (p)and for the gap one, here's some more text. end paragraph 1 here.(/p) (p)(br /)(/p) (p)still example 3. you can see there's a much bigger space here. that empty paragraph has the line break in it.(/p)

how it looks in html:

example 1: some text here blah blah blah

and more text here blah blah blah.

example 2: again, more text yada yada yada whatever
and a line break there.

example 3: and for the gap one, here's some text. end paragraph 1 here.

still example 3. you can see there's a much bigger space here. that empty paragraph has the line break in it.

unordered lists

• this is what i've been using to describe code in this work so far :)
• to start, put this (ul) in your text, which means "unordered list." you don't need any other tags with it.
• each new bullet point is written as (li) for "list item" and closed as (/li)
• close the list with (/ul)

example:

(ul)
(li)some text here(/li)
(li)and more text(/li)
(li)teeeexxxttttt(/li)
(/ul)

how it looks in html:

• some text here
• and more text
• teeeexxxttttt

ordered lists

• ordered list are written the same way as unordered lists, but with "ol" instead of "ul"
• text shows up with numbered bullets

example:

(ol)
(li)first thing(/li)
(li)second thing(/li)
(li)third thing(/li)
(/ol)

how it looks in html:

1. first thing
2. second thing
3. third thing

other text elements

• to make a lil' indent, use (dd) and close it with (/dd). "dd" means "definition description", so you use this for a definition. personally i like the next version better.
• to make an indented block of text with a lil' line in front, use (blockquote) and close it with (/blockquote). for this one you do need to have a paragraph tag nestled between the blockquote.
• typewriter font: use (tt), (pre), (code), (kbd), (samp), or (var), and close with the a slash like this: (/tt), (/pre), etc.

example:

(dd)some text here(/dd)

(blockquote)(p)and more text here(/p)(/blockquote)

(tt)now this style of text(/tt)

(pre)same style(/pre)

(code)again, same font(/code)

(kbd)another version(/kbd)

(samp)almost done(/samp)

(var)last one(/var)

how it looks in html:

and more text here

now this style of text

same style

again, same font

another version

almost done

last one

Chapter Text

external links

• for an external link (to another webpage), use (a href="link url")text(/a)
• (a href) means "anchor hypertext reference"
• put your link url within the quote marks
• the text is what is shown (what you click to go to the page)
• when doing this you're gonna see rel="nofollow" right after your link and tbh i don't know what it does..? it doesn't go away and im not sure what it means but it doesn't affect the link so idk

example

hope you're finding this helpful! now (a href="https://archiveofourown.org/users/blahblahblah")my dashboard(/a).

in html:

hope you're finding this helpful! now my dashboard.

footnotes

footnotes need a lil more work. there are four parts involved: a link from the main text, a connecting anchor in the footnotes, a link back to the main text, and the receiving anchor in the main text. in these examples i will not show any (sup) tags or brackets but you should definitely use them (and i will be using them in the "how it should look" section).

from text, to footnotes

• the html: (a href="#fn1.ch2" title="click to footnote")1(/a)
• make sure you put the hashtag there!
• i THINK the title is not necessary, but im not sure. the title is what you see when you hover over it on a laptop

anchor in footnotes

• now, in your footnotes box (yes, click the lil check mark for chapter notes at the end), put this in for the receiving anchor: (a name="fn.1ch2" id="fn1.ch2")(/a)
• since it is an anchor link, you don't need any text between (a name...) and (/a). think of it as a drop off point.
• again, the names and ids must correspond, otherwise it doesn't work.

from footnotes, to text

• to link back up we're going to do the first pretty much. use this at the end of your footnote: (a href="#backfn1.ch2" title="click to return")return to text(/a)
• pretty self explanatory, same as the link to footnotes

anchor in text

• anchor in text is same as anchor in footnotes: (a name="backfn1.ch2" id="backfn1.ch2")(/a)
• again, no text is necessary between (a name...) and (/a)

other things

• from what i understand, the href tag is connected to the id tag, so related notes must have the same names.
• personally i put the main text anchor at the start of the paragraph, so when the reader clicks "return to text" the text isn't cut off. obvs they can scroll up but that's dumb right
• all notes must be named different things (that's why i was using "fn1.ch2") you can name them anything, ex. "note1", "note4.2", whatever you want

example of text (first is anchor, second is link)

(a name="backfn1" id="backfn1")(/a)blah blah blah text yada yada yada advskhfhkdfkhsfkhsfj ok now here's something you might not know about and boom you author is kind enough to give you a footnote!(a href="#fn1" title="click ittttt")1(/a).

example of footnotes (first is anchor, second is link)

(a name="fn1" id="fn1")(/a)and now an explanation here(a href="#backfn1" title="click meeee")return to text(/a)

how it really looks

blah blah blah text yada yada yada advskhfhkdfkhsfkhsfj ok now here's something you might not know about and boom you author is kind enough to give you a footnote!^[1]




jumps in text

• ever read a fic where the author was like "skip x section b/c of these triggers" but you forgot which section it was? yeah, this is for that.
• a lot like footnotes, but much easier. for the skip in text, use the same html as before: (a href="#jump1.ch2" title="skip text")skip(/a)
• when it's safe to read again, use this: (a name="jump1.ch2" id="jump1.ch2")(/a)
• if you want you can put a symbol for a visual end after the anchor like so: (a name...)(/a)(sup)*(/sup) so the reader will know where they've been dropped off at (since it's invisible)
• again, i will not show (sup) tags or brackets in the example (it gets confusing)

example

la la la text story good stuff here blah blah blah and oh no triggers upcoming(a href="#jump1" title="skip triggers")skip(/a) now some line breaks for good measure (a name="jump1" id="jump1")(/a)aaand now you can come back!

how it looks

la la la text story good stuff here blah blah blah and oh no triggers upcoming^[skip]now some line breaks for good measure





aaand now you can come back!

images

• ao3 doesn't host images, so you need an external site like imgur or flickr to host from. i use imgur to host. here's how i get a url: post a private picture, favorite it, go to any imgur post, go to comment on it, click the heart, select your photo, and boom it you got a link.
• code: (img src="url" alt="description" width="100%" /)
• "img src" means image source, so you need a direct link to go to the picture.
• "alt" is the alternate text that shows if the picture cannot be reached (like it was deleted).
• "width" is how wide it is on any given screen. percent is super helpful for this because not matter the screen size, the image will always be 100% of it, of 75%, or 50%, whatever.
• yes, you need a space and slash at the end, same as you would a line break (br /), since there is no closing tag

example

(img src="https://i.imgur.com/loTwLRj.jpg" alt="orange tabby cat" width="75%" /)

how it looks

Chapter Text

table of contents

this is for linking a reader to the SAME PAGE. not different pages.

things i will NOT show in the example: (sup) tags, (small) tags, [brackets]. these WILL be in the "how it should look" version. other than that, the only thing i'm changing is the parentheses.

in the TOC:

in the main text:

EXAMPLE OF TABLE OF CONTENTS

(a name="navreturn1" id="navreturn1")(/a)Part One

(a href="#nav1.1")chapter 1(/a)
(a href="#nav1.2")chapter 2(/a)

(a name="navreturn2" id="navreturn2")(/a)Part Two

(a href="#nav2.1")chapter 1(/a)
(a href="#nav2.2")chapter 2(/a)

EXAMPLE OF MAIN TEXT

Part One

(a name="nav1.1" id="nav1.1")(/a)Chapter 1:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. (a href="#navreturn1")return to top(/a)

(a name="nav1.2" id="nav1.2")(/a)Chapter 2:

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. (a href="#navreturn1")return to top(/a)

Part Two

(a name="nav2.1" id="nav2.1")(/a)Chapter 1:

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. (a href="#navreturn2")return to top(/a)

(a name="nav2.2" id="nav2.2")(/a)Chapter 2:

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. (a href="#navreturn2")return to top(/a)

HOW THE TABLE OF CONTENTS LOOK IN HTML

Part One

chapter 1
chapter 2

Part Two

chapter 1
chapter 2

HOW THE TEXT SHOULD LOOK IN HTML

Part One

Chapter 1:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ^{[return to top]}

Chapter 2:

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ^{[return to top]}

Part Two

Chapter 1:

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ^{[return to top]}

Chapter 2:

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ^{[return to top]}