Actions

Work Header

A Complete Guide to 'Limited HTML' on AO3

Summary:

There are some great quick guides to HTML on A03. This is not one of them - it is a comprehensive guide, dividing all of the available tags into the following categories:

1. Text Formatting (in-line HTML)
2. Page Formatting (block HTML)
3. Tables and Lists
4. Links and Images

Each tag will have - at a minimum - a link to the w3schools page about it (so you can learn more), a code example, and the result of the code example.

It will also introduce tag attributes, ways to further refine formatting, for a few simple - but widely applicable - cases.

Chapter 1: Text Formatting

Notes:

(See the end of the chapter for notes.)

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.

Notes:

Informative tags they have a default behaviour for the :hover (when the mouse pointer is over them) but not the :focus (tap-and-hold on a touchscreen - like when you select an input field). Moreover, because of the type of HTML they are, cannot take the :focus property.

Please see the comments for discussion and possible work-arounds.