Actions

Work Header

Quick and Dirty HTML Reference for AO3

Chapter Text

Begin test with a <hr /> :


That short line is absolutely pitiful, though, and AO3 doesn't seem to support "width" arguments for hr at all. *frown*

Sooooooooo...

Long line via strikeout or delete.

The code:

<p>
<strike>-----------------------------------------------------------------------------------------</strike>
<del>-----------------------------------------------------------------------------------------</del>
</p>

looks like:

----------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------

...which is marginally better, at least.

We can center it, too:

<p align=center>
<strike>-----------------------------------------------------------------------------------------</strike>
<del>-----------------------------------------------------------------------------------------</del>
</p>

looks like:

----------------------------------------------------------------------------------------- -----------------------------------------------------------------------------------------

And to go full-width for the default AO3 template, we do:

<p align=center>
<strike>-------------------------------------------------------------------------------------------------------------------------</strike>
<del>-------------------------------------------------------------------------------------------------------------------------</del>
</p>

which looks like:

------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------

Long line via headings h3 and h6.

We can also cheat via some of the heading types (a.k.a. heading h3 and h6).

The code:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

looks like:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Note that there is no h7 or h8 defined in AO3.

Take advantage of this via:

<h3> </h3>
<h6> </h6>

which looks like:

Much cleaner, no? :)

Some table HTML that doesn't work on AO3 but would work elsewhere.

AO3 doesn't do background color in tables, but if it did, you could use the following html to get a thin black rectangular block across the entire screen:

<table style="width:100%" bgcolor=#000000>
  <tr>
    <td></td>
  </tr>
</table>

You can try out this (or any other) html code here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table.

And now another three <hr /> 's to separate things out! :)




Preformatting (pre) blocks and inline "code".

The code:

<p>
  <code>
<pre>Testing preformatting
stuff   like
this. is within a "pre" (&lt;pre&gt;&lt;/pre&gt;)
and does not need &lt;br/&gt; stuff in there to go down a line
or to keep spacing more than    one space:)</pre>
  </code>
</p>

looks like:

Testing preformatting
stuff   like
this. is within a "pre" (<pre></pre>)
and does not need <br/> stuff in there to go down a line
or to keep spacing more than    one space:)

The code:

<pre>Testing preformatting
stuff   like
this. is within a "pre" (&lt;pre&gt;&lt;/pre&gt;)
and does not need &lt;br/&gt; stuff in there to go down a line
or to keep spacing more than    one space:)</pre>

<p>Also note that <code>pre</code> does NOT have to go within a set of &lt;p&gt;&lt;/p&gt; like <code>code</code> does (it seems to get removed).</p>

looks like:

Testing preformatting
stuff   like
this. is within a "pre" (<pre></pre>)
and does not need <br/> stuff in there to go down a line
or to keep spacing more than    one space:)

Also note that pre does NOT have to go within a set of <p></p> like code does (it seems to get removed).

Testing &lt; and &gt;

You may be wondering by this point why, exactly, I'm using these "&lt;" and "&gt;" things. Well, they show those special characters < and > explicitly in the text (and they're "special" in that they're used to start and end html tags ...which means that trying to write them directly in your HTML when you want to show them as symbols in your text will cause formatting problems, no? :) --Here, explicitly, is an example of how you do it.

The code:

<p>and then trying to test &lt;a thing&gt; here &lt;and here&gt; as well.</p>

looks like:

and then trying to test <a thing> here <and here> as well.

The code:

<pre>and then trying to test &lt;a thing&gt; here &60;and here&#62; as well.</pre>

looks like:

and then trying to test <a thing> here <and here> as well.


Characters to write in the HTML edit box for things to work correctly.

&lt; OR &#60; gives a < in-text (and the #60 part gets converted to lt by AO3 once the document's HTML text has been saved).
&gt; OR &#62; gives a > in-text (and the #62 part gets converted to gt by AO3 once the document's HTML text has been saved).
&amp; gives a & in-text (thus &amp;lt; gives a &lt; in-text and &amp;gt; gives a &gt; in-text).

Paragraphs, paragraph alignment, embedding an image, breaks

Also note that <a href=""></a> and <img src=""></img> are also useful, as are <p align="center"></p> and <br/> and other style stuff.

Embedding images (explicit example).

The code:

<p align="center">
  <a href="http://s1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/?action=view&current=LJBanner.jpg"></a>
  <img src="http://i1247.photobucket.com/albums/gg634/josephina_x/sv-bb-2012/LJBanner.jpg" border="0" alt="Photobucket" /></p>

does this:

Photobucket

Reference links.

See these pages for more info:
Tutorial: Styling Works -- http://archiveofourown.org/admin_posts/119
Sliding Doors -- http://archiveofourown.org/works/149319?style=disable
Tutorial: HTML Sanitizing and Parsing -- http://archiveofourown.org/admin_posts/92
Technical Questions FAQ | What HTML can I use on the archive? -- http://archiveofourown.org/faq/technical-questions?language_id=en
Skins and Archive Interface FAQ -- http://archiveofourown.org/faq/skins-and-archive-interface?language_id=en
Show Skin | Archive 2.0 Skin (Default Skin) -- http://archiveofourown.org/skins/873
HTML pre tag -- http://www.w3schools.com/tags/tag_pre.asp
HTML ASCII -- http://www.w3schools.com/tags/ref_ascii.asp
HTML Symbol -- http://www.w3schools.com/tags/ref_symbols.asp

Done with test. Let's end with a final <hr /> ...