Actions

Work Header

Rating:
Archive Warning:
Fandom:
Additional Tags:
Language:
English
Collections:
📚 Fanfic Forum Discord Recs
Stats:
Published:
2020-04-13
Completed:
2020-04-14
Words:
2,604
Chapters:
3/3
Comments:
18
Kudos:
146
Bookmarks:
109
Hits:
4,213

html guide

Summary:

just html things that i've learnt/know. chap 1 is pretty easy formatting, chap 2 is slightly more effort. chap 3 is specifically table of contents (links). no css is used here. i hate css.

Chapter 1: basic html things

Summary:

replace all parentheses with < or > so the html works!! these parentheses ( become these < and these parentheses ) become >

😵💫 dont know how to show formatting any other way sorry

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:

some text here

and more text here

now this style of text

same style

again, same font

another version

almost done

last one