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 (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.)
General Formatting (Tutorial Link)
||Text Inside 'b' Tag|
||Text Inside 'strong' Tag|
||Text Inside 'i' Tag|
||Text Inside 'em' Tag|
|no longer accurate||s||
||Text Inside 'u' Tag|
||Text Inside 'sub' Tag|
||Text Inside 'sup' Tag|
|make text bigger||big||
||Text Inside 'big' Tag|
|make text smaller||small||
||Text Inside 'small' Tag|
Special Types of Text
||Text Inside 'tt' Tag|
Text Inside 'pre' Tag
||Text Inside 'kbd' Tag|
||Text Inside 'samp' Tag|
||Text Inside 'var' Tag|
||Text Inside 'address' Tag|
||Text Inside 'cite' Tag|
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
Tags to Add Information
||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 IDEK.|
||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.