Actions

Work Header

A Complete Guide to 'Limited HTML' on AO3

Chapter Text

Note: No CSS skin has been added to this work. What you see below is the default A03 formatting for each of these HTML tags.

The text formatting tags supported by A03 are listed below, with examples of how to code them and what they look like. If you want to learn more, these are generally referred to as "HTML in-line formatting." In general, they are very simple with an opening tag <tag> and a closing tag </tag> - all text between these tags will be formatted. That's it. If you want to apply more than one formatting (for example, bold AND italic) you can nest the tags: <tag1> <tag2> like this </tag1> </tag2>

The table below divides the text formatting tags into three groups:

General Formatting
what we usually think of a as formatted text - bold, italic, etc.
Special Types of Text
usually used when writing or formatting computer code in HTML
Identify Information
text showing paticular types of information you'd like text-to-voice page readers or web-spiders/search engines to identify correctly.
For example, if you have a tumblr, live journal, or twitter, you might want to include that within an address tag (author info/author contact info).

The second table shows how to use tags that add information to text, occassionally formatting the text. One use of this in fiction could be for foreign words - rather than having to insert the translation, or include it in a note at the end, using one of these tags would allow the user to see the translation by hovering the cursor over the foreign words. This is a stretching of the tags - they're intended for defining things like abbreviations - but will work fine.

In general, the best practice in HTML is to use a tag that describes what your doing: 'em' for emphasis is preferred over 'i' for italic. That said, I first learned HTML in the 90's, and I'll stop using 'b' 'i' and 'u' for bold, italic, and underline when they pry them from my cold dead hands switch the entire internet to HTML 5. (If you got the joke in the previous sentence, you don't need this guide. Just go to w3schools.com and look up what tag is giving you trouble.)

Format
Tag
      Sample Code Result

General Formatting (Tutorial Link)

bold b     <b>Text Inside 'b' Tag</b> Text Inside 'b' Tag
strong strong     <strong>Text Inside 'strong' Tag</strong> Text Inside 'strong' Tag
italic i     <i>Text Inside 'i' Tag</i> Text Inside 'i' Tag
emphasis em     <em>Text Inside 'em' Tag</em> Text Inside 'em' Tag
strikethrough strike     <strike>Text Inside 'strike' Tag</strike> Text Inside 'strike' Tag
no longer accurate s     <s>Text Inside 's' Tag</s> Text Inside 's' Tag
deleted del     <del>Text Inside 'del' Tag</del> Text Inside 'del' Tag
stylistically different u     <u>Text Inside 'u' Tag</u> Text Inside 'u' Tag
inserted ins     <ins>Text Inside 'ins' Tag</ins> Text Inside 'ins' Tag
subscript sub     Text Inside<sub> 'sub'</sub> Tag Text Inside 'sub' Tag
superscript sup     Text Inside<sup> 'sup'</sup> Tag Text Inside 'sup' Tag
make text bigger big     Text Inside<big> 'big'</big> Tag Text Inside 'big' Tag
make text smaller small     Text Inside<small> 'small'</small> Tag Text Inside 'small' Tag

Special Types of Text

teletype tt     <tt>Text Inside 'tt' Tag</tt> Text Inside 'tt' Tag
preformatted text pre     <pre>Text Inside 'pre' Tag</pre> 
Text Inside 'pre' Tag
computer code code     <code>Text Inside 'code' Tag</code> Text Inside 'code' Tag
keyboard input kbd     <kbd>Text Inside 'kbd' Tag</kbd> Text Inside 'kbd' Tag
sample output samp     <samp>Text Inside 'samp' Tag</samp> Text Inside 'samp' Tag
variable(s) var     <var>Text Inside 'var' Tag</var> Text Inside 'var' Tag

Identify Information

Owner/Author Info address     <address>Text Inside 'address' Tag</address>
Text Inside 'address' Tag
citation/title cite     <cite>Text Inside 'cite' Tag</cite> Text Inside 'cite' Tag
inline quotation q     <q>Text Inside 'q' Tag</q> Text Inside 'q' Tag



These tags add information to the text. They do this by using an attribute - a modifier to the tag - containing the text to be displayed. These tags all take the same one 'title' - and make the title value appear when the cursor hovers over the tagged text. To set an attribute, instead of just opening with <tag> we add in the attribute like this: <tag attribute="attribute value">. The tag will close as normal.

Note: these tags DO NOT WORK with mobile or touchscreen devices. Please see the notes for more information

Format
Tag
 Attribute Value Sample Code Result

Tags to Add Information

abbreviation abbr title December We will be having our annual meeting in <abbr title="December.">Dec</abbr> We will be having our annual meeting in Dec
acronym acronym title I Don't Even Know I tend to avoid fics where the tagging is sloppy and ends in <acronym title="I Don't Even Know">IDEK.</acronym> I tend to avoid fics where the tagging is sloppy and ends in IDEK.
definition dfn title Badassium <dfn title="Badassium">Bd</dfn> (Badassium), is the 69th element in the periodic table. It was first syntesized by Anthony E. Stark in 2012. Bd is the 69th element in the periodic table. It was first synthesized by Anthony E. Stark in 2012.

The most versatile, and most powerful, of the text formatting tags is the span tag. Because using it requires being comfortable with both HTML attributes and the specialized values for them, the span tag will be addressed in-depth in chapter 4.

Chapter Text

Note: No CSS skin has been added to this work. What you see below is the default A03 formatting for each of these HTML tags.

The page formatting tagssupported by A03 are listed below, with examples of how to code them and what they look like. If you want to learn more about them, they are usually referred to as "HTML Block Formatting." Like text formatting, most act on the enclosed text between the opening tag <tag> and a closing tag </tag>. However, there are two unclosed tags introduced at the end of the page. Unlike with text formatting, a block of text can only be in one tag at a time (e.g. Header 1 or Header 3, never both)

, with the exception of the 'div' tag, which is used to group and format multiple blocks (headings, paragraphs, etc.) of text.

The most common way of structuring an HTML document - for A03 - is by using paragraphs (the 'p' tag) or paragraphs within divisions (the 'div' tag). The code for this is shown below:

Sample Code Results

<div>
   <p>
      All of the text for Paragraph 1
   </p>
   <p>
      All of the text for Paragraph 2. This is a much longer Paragraph.
   </p>
</div>

All of the text for Paragraph 1

All of the text for Paragraph 2. This is a much longer Paragraph.

Like the 'span' tag introduced in Chapter 1, Text Formatting the 'div' tag is primarily used to apply formatting to it's child elements - paragraphs and text by setting it's attributes. (It can use align and all of the HTML global attributes.) Sample code for this is shown below:

Note: Remeber that A03 members can select their own site skins - if you force a color, it may look great compared to the default black-text on a white background, but could be very hard to read in other cases.

Sample Code Results

<div align="right" style="color:blue">
   <p>
      All of the text for Paragraph 1
   </p>
   <p>
      All of the text for Paragraph 2. This is a much longer Paragraph.
   </p>
</div>

All of the text for Paragraph 1

All of the text for Paragraph 2. This is a much longer paragraph.

In addition to applying formatting directly to an attribute of the 'div' or 'p' tags, we can think of the following as special, 'pre-formatted' paragraphs. Text within the following tags will make a new line/section and apply the tag format. As with most HTML, the tag adds meaning to the text that can be picked up by readers and web-spiders.

        
Tag
 Sample Code Result

Headings (w3schools tutorial link)

heading 1
h1
 <h1>Text Inside 'h1' Tag</h1>

Text Inside 'h1' Tag
heading 2
h2
 <h2>Text Inside 'h2' Tag</h2>

Text Inside 'h2' Tag
heading 3
h3
 <h3>Text Inside 'h3' Tag</h3>

Text Inside 'h3' Tag
heading 4
h4
 <h4>Text Inside 'h4' Tag</h4>

Text Inside 'h4' Tag
heading 5
h5
 <h5>Text Inside 'h5' Tag</h5>
Text Inside 'h5' Tag
heading 6
h6
 <h6>Text Inside 'h6' Tag</h6>
Text Inside 'h6' Tag

Alternate Formats

see below blockquote <blockquote>Text Inside 'blockquote' Tag</blockquote>
Text Inside 'blockquote' Tag
see below center <center>Text Inside 'center' Tag</center>
Text Inside 'center' Tag

Blockquote:
section quoted from another source (L & R indented)

The key thing to remember about blockquote is that while it doesn't apply any traditional formatting - this isn't larger or smaller; bold, itallic, or underlined, it is (usually) inset on both the left and right margins by about a tab-stop (roughly 5 characters). Of course, this can change, depending on the CSS applied to the page.

Center:
a center-aligned "paragraph"

The center tag simply centers the text.
If there are multiple lines of text, all will be centered.
While useful for centering titles and prophecies;
the 'center' tag has been retired in HTML 5
<div align="center"> ... </div>
is the future

Unclosed Tags....

Almost all HTML tags, as introduced in Chapter 1, need to be closed. These tags modify the enclosed text content. On A03, there are two 'unclosed' tags that you can use to format your works: 'hr' and 'br'.

Look up! Is it a bird? A plane? No, it's the 'hr' tag. 'HR' originally stood for "hard-rule" and that's what it does: puts a rule (line) between paragraphs or divisions. The 'hr' tag does have a width atribute, however, it does not work with the default A03 formattings. To use the 'hr' tag simply add <hr> to your html formatted story - no need to close it or enclose text. There's another two below:

The other (unclosed) tag to make a new line is the br tag. 'BR' stands for break and it adds a break (new line) within a paragraph. This is is especially useful when writing poetry or addresses.To use the 'br' tag simply add <br> to your html formatted story. Note that the 'br' tag is a simple break, space is not added between lines until the paragraph is closed

Sample Code Results
<p>
   shall I oft compare thee <br>
   to truly awful poetry? <br>
   'tis true, thou art as fair <br>
   as a sleek and fecund mare
</p>
<p>
   on now for the second stanza! <br>
   to serenade from your credanza <br>
   this should've ended with just one <br>
   but the 'br' tag is just too fun!
</p>

shall I oft compare thee
to truly awful poetry?
this true, thou art as fair
as a sleek and fecund mare

on now for the second stanza!
to serenade from your credanza
this should've ended with just one
but the 'br' tag is just too fun!

Because of the way A03 formats imported text or rich text, the spacing shown between paragraphs or sections may not be what you want. In this case, it is usually worth reviewing the HTML. One common thing is for there to be an empty paragraph (<p></p>) which will cause the visual spacing to include the bottom padding for the prior text, the top padding for the next text, and a row PLUS top and bottom padding for the blank paragraph. I highly recommend re-reading your after it's posted to ensure that the text is formatted the way you want.

Chapter Text

Note: No CSS skin has been added to this work. What you see below is the default A03 formatting for each of these HTML tags.

The tags supported by A03 are for tables and lists are shown below, with examples of how to code them and what they look like. These build on the concept of nested tags introduced in chapters one and two; instead of having bold inside of itallic, we begin to nest rows inside of tables and data inside of rows. Similarly, we open a list, and nest individual list elements inside of it.

Tables start by opening a table using the 'table' tag. Once open, rows can be added using the 'tr' tag; and then data added to the rows as either a header (using the 'th' tag) or a plain data cell (the 'td' tag). If special css formatting is being used for the table header, body, or footer, those OPTIONAL tags may be used to group rows. The first table shows te tags and links to the w3school page (they have a great table tutorial that I relied heavily upon when creating the Marvel Periodic Table of the Elements) and the lower table is to show the default formatting A03 provides for each table element

As with all default formatting, it will appear differently when different site skins are engaged. If you want to force a view for your work, you will need to rely on CSS, not HTML.

Parent Tag Child Tag 1 Child Tag 2 Child Tag 3 Definition
table - - -   html table
(table) caption - -   table caption
COLS (table) colgroup - -   tags columns for formatting
(colgroup) col -   column formatting
SECTIONS (table) thead (tr) -   table header content
(table) tbody (tr) -   table body content
(table) tfoot (tr) -   table footer content
ROWS (table) tr -   table row
CELLS (tr) th   header cell
(tr) td   table cell
<caption> … The Caption
<thead> … The table header section (2 rows) <td> … Table Cell
(in Header)
<th> … Header Cell First Last Age Theme Color
<tbody> … The table body section (6 rows) Tony Stark 45 Red & Gold
<td> … Table Cell (in Body) Harry Potter 11 Red & Gold
Rainbow Brite 12 All
Jason Bourne 38 n/a
Elvira 50 Black
Buffy Summers 18 n/a
<tfoot> … The table footer section (1 rows) Avg. Age 29 <td> … Table Cell
(in Footer)

Moving on from tables, There are three types of lists supported by A03 = ordered, unordered, and descriptive. All of these are shown in the examples below and are created using the following six tags:

Tag           Meaning
ol           ordered list
ul           unordered list
li           list item (within an ordered or unordred list)
dl           description list
dt           term definition in a description list
dd           term in a description list

Example 1: Steven Rogers' best spit takes in the 21st century (an ordered list)

<ol>
<li>Bananas </li>
<li> Toothpaste <br>
<i>See also:</i> Cinnamon Toothpaste</li>
<li> Sashimi </li>
</ol>
  1. Bananas
  2. Toothpaste
    See also: Cinnamon Toothpaste
  3. Sashimi

Example 2: Some Places of Interest (an unordered list)

Why these cities are places of interest is left as an exercise for the reader

<ul>
<li> Istanbul </li>
<li> Vancouver </li>
<li> Yokohama </li>
<li> Stuggart </li>
</ul>
  • Istanbul
  • Vancouver
  • Yokohama
  • Stuggart

Example 3: Two Almost-Random Things (a descriptive list)

<dl>
<dt> DD Tag </dt>
<dd> <p> Inside a 'dd' tag you can put paragraphs, line breaks, images, links, lists, etc.</p>
<p>And, when one is being crass, the DD tag is what you wake up to after the lactation fairy visits.</p>
</dd>

<dt> Babies </dt>
<dd> Babies are technically just the juvenile members of the species. Unfortunately 'technically' covers a lot of ground, and diapers don't quite cover the rest. </dd>
DD Tag

Inside a 'dd' tag you can put paragraphs, line breaks, images, links, lists, etc.

And, when one is being crass, the DD tag is what you wake up to after the lactation fairy visits.

Babies
Babies are technically just the juvenile members of the species. Unfortunately 'technically' covers a lot of ground, and diapers don't quite cover the rest.