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 | 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> |
|
no longer accurate | s | <s>Text Inside 's' Tag</s> |
|
deleted | del | <del>Text Inside 'del' Tag</del> |
|
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 | 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.