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.
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.
Chapter 2: Page Formatting
Summary:
formatting pages/blocks of text
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 |
---|---|
|
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 |
---|---|
|
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.
Sample Code | Result | ||
---|---|---|---|
Headings (w3schools tutorial link) | |||
heading 1 | <h1>Text Inside 'h1' Tag</h1> |
Text Inside 'h1' Tag |
|
heading 2 | <h2>Text Inside 'h2' Tag</h2> |
Text Inside 'h2' Tag |
|
heading 3 | <h3>Text Inside 'h3' Tag</h3> |
Text Inside 'h3' Tag |
|
heading 4 | <h4>Text Inside 'h4' Tag</h4> |
Text Inside 'h4' Tag |
|
heading 5 | <h5>Text Inside 'h5' Tag</h5> |
Text Inside 'h5' Tag |
|
heading 6 | <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> |
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 on now for the second stanza! |
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 3: Tables and Lists
Summary:
Tables and Lists
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 |
<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> |
|
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> |
|
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> |
|
Pages Navigation
NinthFeather on Chapter 1 Mon 30 Nov 2015 02:03PM EST
Comment Actions
CodenameCarrot on Chapter 1 Mon 30 Nov 2015 07:54PM EST
Comment Actions
puckling on Chapter 1 Tue 08 Mar 2016 09:04PM EST
Comment Actions
CodenameCarrot on Chapter 1 Sat 19 Mar 2016 07:46PM EDT
Comment Actions
Account Deleted on Chapter 1 Wed 23 May 2018 01:58AM EDT
Comment Actions
CodenameCarrot on Chapter 1 Wed 23 May 2018 06:29AM EDT
Comment Actions
Account Deleted on Chapter 1 Wed 23 May 2018 09:52PM EDT
Comment Actions
Anima Nightmate (faithhope) on Chapter 1 Fri 21 Sep 2018 01:27PM EDT
Comment Actions
CodenameCarrot on Chapter 1 Fri 21 Sep 2018 09:19PM EDT
Comment Actions
Mangakoibito on Chapter 1 Sat 14 May 2016 03:52AM EDT
Last Edited Sat 14 May 2016 03:54AM EDT
Comment Actions
CodenameCarrot on Chapter 1 Sun 15 May 2016 11:45AM EDT
Comment Actions
RazzelDazzel on Chapter 1 Fri 28 Apr 2017 10:31AM EDT
Comment Actions
CodenameCarrot on Chapter 1 Fri 28 Apr 2017 09:04PM EDT
Last Edited Fri 28 Apr 2017 09:12PM EDT
Comment Actions
RazzelDazzel on Chapter 1 Fri 28 Apr 2017 10:09PM EDT
Last Edited Sat 29 Apr 2017 01:53AM EDT
Comment Actions
JustTimoCraft on Chapter 1 Mon 09 Nov 2020 12:15PM EST
Comment Actions
CodenameCarrot on Chapter 1 Tue 10 Nov 2020 07:24AM EST
Last Edited Tue 10 Nov 2020 07:31AM EST
Comment Actions
Account Deleted on Chapter 1 Sat 29 Apr 2017 11:30PM EDT
Comment Actions
CodenameCarrot on Chapter 1 Mon 15 May 2017 09:00PM EDT
Comment Actions
Account Deleted on Chapter 1 Wed 17 May 2017 01:12AM EDT
Comment Actions
LackadaisicalSummers on Chapter 1 Sun 14 May 2017 01:03AM EDT
Last Edited Sun 14 May 2017 01:05AM EDT
Comment Actions
CodenameCarrot on Chapter 1 Mon 15 May 2017 09:01PM EDT
Comment Actions
ayushi on Chapter 1 Wed 07 Jun 2017 12:40PM EDT
Comment Actions
CodenameCarrot on Chapter 1 Sun 02 Jul 2017 03:39PM EDT
Comment Actions
Nera_Solani on Chapter 1 Fri 07 Jul 2017 07:32AM EDT
Comment Actions
CodenameCarrot on Chapter 1 Sun 16 Jul 2017 09:22PM EDT
Comment Actions
Nera_Solani on Chapter 1 Tue 18 Jul 2017 05:46AM EDT
Comment Actions
PaintedBird1214 on Chapter 1 Mon 17 Jul 2017 02:45AM EDT
Comment Actions
PaintedBird1214 on Chapter 1 Mon 17 Jul 2017 02:45AM EDT
Comment Actions
sterling on Chapter 1 Wed 19 Jul 2017 10:08PM EDT
Comment Actions
sterling on Chapter 1 Wed 19 Jul 2017 10:09PM EDT
Comment Actions
zacekova on Chapter 1 Tue 22 Aug 2017 02:10PM EDT
Comment Actions
anon on Chapter 1 Thu 27 Jul 2017 06:28AM EDT
Comment Actions
buffylovesfaith on Chapter 1 Mon 07 Aug 2017 06:38AM EDT
Comment Actions
CodenameCarrot on Chapter 1 Mon 07 Aug 2017 07:55PM EDT
Comment Actions
sorry! the board game on Chapter 1 Fri 18 Aug 2017 06:45PM EDT
Comment Actions
sorry! the board game on Chapter 1 Fri 18 Aug 2017 06:51PM EDT
Comment Actions
sugarsugar+boom+boom on Chapter 1 Sat 19 Aug 2017 09:24PM EDT
Comment Actions
zacekova on Chapter 1 Tue 22 Aug 2017 02:09PM EDT
Comment Actions
CodenameCarrot on Chapter 1 Fri 21 Sep 2018 09:21PM EDT
Comment Actions
Collin on Chapter 1 Wed 25 Oct 2017 01:52PM EDT
Comment Actions
sadcrabby on Chapter 1 Mon 30 Oct 2017 03:27AM EDT
Last Edited Mon 30 Oct 2017 03:27AM EDT
Comment Actions
Alexthefangirl77 on Chapter 1 Thu 30 Nov 2017 10:58AM EST
Comment Actions
ceeceemulligan on Chapter 1 Sun 07 Jan 2018 09:33PM EST
Last Edited Sun 07 Jan 2018 09:36PM EST
Comment Actions
ScullyLikesScience on Chapter 1 Tue 23 Jan 2018 09:40PM EST
Comment Actions
CodenameCarrot on Chapter 1 Wed 28 Feb 2018 08:05PM EST
Last Edited Wed 28 Feb 2018 08:10PM EST
Comment Actions
Pages Navigation