<html> <head> <title>Character Formatting</title> </head> <body background="../../images/backgrounds/Ridgewater_white.gif"> <div align="center"> <table width="620" bgcolor="#FFFFFF"> <tr> <td> <h1 align="center">Character Formatting</h1>   <table> <tr> <td>HTML has two types of styles for individual words or sentences: logical and physical. Logical style tags indicate the meaning of the text, while physical style tags mark the specific appearance of a section of text. For example, in the preceding sentence, the words "logical style" were tagged as "emphasis" and the words "physical style" were tagged as "bold". The same effect (formatting those words in italics) could have been achieved via a different tag that tells your browser to "put these words in italics".</td> </tr> </table> <h3>Logical Versus Physical Style Tags</h3> <table> <tr> <td>If physical and logical style tags produce the same result on the screen, why are there both? In the ideal SGML universe, content is divorced from presentation. Thus SGML tags a level-one heading as a level-one heading, but does not specify that the level-one heading should be, for instance, 24-point bold Times centered. The advantage of this logical style approach (it's similar in concept to style sheets in many word processors) is that if you decide to change level-one headings to be 20-point left-justified Helvetica, all you have to do is change the definition of the level-one heading in your Web browser. Indeed, many browsers today let you define how you want the various HTML tags rendered on-screen using what are called cascading style sheets, or CSS. Another advantage of logical style tags is that they help enforce consistency in your documents. It's easier to tag something as <H1> than to remember that level-one headings are 24-point bold Times centered or whatever. For example, consider the tag. Most browsers render it in bold text. However, it is possible that a reader would prefer that these sections be displayed in red instead. (This is possible using a local cascading style sheet on the reader's own computer.) Logical styles offer this flexibility. Of course, if you want something to be displayed in italics (for example) and do not want a browser's setting to display it differently, you should use physical styles. Physical styles, therefore, offer consistency in that something you tag a certain way will always be displayed that way for readers of your document. Try to be consistent about which type of style tags you use. If you tag with physical styles, do so throughout a document. If you use logical styles, stick with them within a document. Keep in mind that future releases of HTML might not support certain logical styles, which could mean that browsers will not display your logical-style coding. (For example, the <DFN> tag -- short for "definition", and typically displayed in italics -- is not widely supported and will be ignored if the reader's browser does not understand it.) The main difference between logical and physical style tags is what they say. Logical styles say something about the meaning of the Author's text. Physical styles say how the Author wants to display the text.</td> </tr> </table> <h3>Logical Style Tags</h3> <table> <tr> <td align="right">Tag</td> <td>Purpose</td> <td>Example</td> </tr> <tr valign="top"> <td align="right"><a name="ABBR"></a><ABBR></td> <td>abbreviation: indicates that content is an abbreviation. Typically does not change how the text is displayed in the browser.</td> <td><code><abbr title="abbreviation">abbv</abbr></code> <abbr title="abbreviation">abbv</abbr></td> </tr> <tr valign="top"> <td align="right"><a name="ACRONYM"></a><ACRONYM></td> <td>acronym: indicates that content is an acronym. Typically does not change how the text is displayed in the browser.</td> <td><code><acronym title="World Wide Web">WWW</acronym></code> <acronym title="World Wide Web">WWW</acronym></td> </tr> <tr valign="top"> <td align="right"><a name="ADDRESS"></a><ADDRESS></td> <td>address: for an address. Typically displayed in italics.</td> <td><code><address>15 5th Avenue N.W.</address></code> <address> 15 5th Avenue N.W. </address> </td> </tr> <tr valign="top"> <td align="right"><a name="CITE"></a><CITE></td> <td>cite: for titles of books, films, etc. Typically displayed in italics.</td> <td><code><cite>HTML for the World Wide Web Fourth Edition</cite></code> <cite>HTML for the World Wide Web Fourth Edition</cite></td> </tr> <tr valign="top"> <td align="right"><a name="CODE"></a><CODE></td> <td>code: for computer code. Displayed in a fixed-width font.</td> <td><code><code>The &lt;stdio.h&gt; header file</code></code> <code>The <stdio.h> header file</code></td> </tr> <tr valign="top"> <td align="right"><a name="DEL"></a><DEL></td> <td>deleted: for text that has been deleted. Allows revision control in HTML documents. Not widely supported.</td> <td><code>The last word has been <del>deleted</del>.</code> The last word has been <del>deleted</del>.</td> </tr> <tr valign="top"> <td align="right"><a name="DFN"></a><DFN></td> <td>definition: for a word being defined. Typically displayed in italics.</td> <td><code><dfn>NCSA Mosaic is a World Wide Web browser.</dfn></code> <dfn>NCSA Mosaic is a World Wide Web browser.</dfn></td> </tr> <tr valign="top"> <td align="right"><a name="EM"></a></td> <td>emphasis: for emphasis. Typically displayed in italics.</td> <td><code>Consultants can reset your password if you call the help line.</code> Consultants can reset your password if you call the help line.</td> </tr> <tr valign="top"> <td align="right"><a name="INS"></a><INS></td> <td>inserted: for text that has been inserted. Allows revision control in HTML documents. Not widely supported.</td> <td><code>The last word has been <ins>inserted</ins>.</code> The last word has been <ins>inserted</ins>.</td> </tr> <tr valign="top"> <td align="right"><a name="KBD"></a><KBD></td> <td>keyboard: for user keyboard entry. Typically displayed in plain fixed-width font.</td> <td><code><kbd>Enter passwd to change your password.</kbd></code> <kbd>Enter passwd to change your password.</kbd></td> </tr> <tr valign="top"> <td align="right"><a name="Q"></a><Q></td> <td>quotation: for a short quote. Typically displayed in plain fixed-width font with surrounding quotes.</td> <td><code><q>To be or not to be.</q></code> <q>To be or not to be.</q></td> </tr> <tr valign="top"> <td align="right"><a name="SAMP"></a><SAMP></td> <td>sample: for a sequence of literal characters. Displayed in a fixed-width font.</td> <td><code><samp>Segmentation fault: Core dumped.</samp></code> <samp>Segmentation fault: Core dumped.</samp></td> </tr> <tr valign="top"> <td align="right"><a name="STRIKE"></a><STRIKE></td> <td>strike-out: for text that has been stricken. Typically displayed with a center line. This works simply as an <S> tag in some browsers -- like:</td> <td><code><strike>The ruling is in favor of the defendant.</strike> <s>The ruling is in favor of the plaintiff.</s></code> <strike>The ruling is in favor of the defendant.</strike> <s>The ruling is in favor of the plaintiff.</s></td> </tr> <tr valign="top"> <td align="right"><a name="STRONG"></a></td> <td>strong: for strong emphasis. Typically displayed in bold.</td> <td><code>NOTE: Always check your links.</code> NOTE: Always check your links.</td> </tr> <tr valign="top"> <td align="right"><a name="VAR"></a><VAR></td> <td>variable: for a variable that is replaced with specific information. Typically displayed in italics.</td> <td><code><var>rm filename deletes the file.</var></code> <var>rm filename deletes the file.</var></td> </tr> </table> <h3>Physical Style Tags</h3> <table> <tr> <td align="right">Tag</td> <td>Purpose</td> <td>Example</td> </tr> <tr valign="top"> <td align="right"><a name="B"></a></td> <td>bold: bold text.</td> <td><code>Bold text example.</code> Bold text example.</td> </tr> <tr valign="top"> <td align="right"><a name="BIG"></a><BIG></td> <td>big: big text. This is the same as using a tag.</td> <td><code><big>Big text example.</big></code> <big>Big text example.</big></td> </tr> <tr valign="top"> <td align="right"><a name="BLINK"></a><BLINK></td> <td>blink: blinking text.</td> <td><code><blink>Blinking text example.</blink></code> <blink>Blinking text example.</blink></td> </tr> <tr valign="top"> <td align="right"><a name="FONT"></a></td> <td>font: font formatting.</td> <td><a href="../../htmlnotes/formatting/FontFormatting.htm">Font Color, Face, and Size Formatting</a></td> </tr> <tr valign="top"> <td align="right"><a name="I"></a></td> <td>italics: italic text.</td> <td><code>Italics text example.</code> Italics text example.</td> </tr> <tr valign="top"> <td align="right"><a name="SMALL"></a></td> <td>small: small text. This is the same as using a tag.</td> <td><code>Small text example.</code> Small text example.</td> </tr> <tr valign="top"> <td align="right"><a name="SUB"></a></td> <td>subscript: subscript text.</td> <td><code>H2O</code> H2O</td> </tr> <tr valign="top"> <td align="right"><a name="SUP"></a></td> <td>superscript: superscript text.</td> <td><code>23 = 8</code> 23 = 8</td> </tr> <tr valign="top"> <td align="right"><a name="TT"></a><TT></td> <td>typewriter: typewriter text (fixed-width font).</td> <td><code><tt>Typewriter text example.</tt></code> <tt>Typewriter text example.</tt></td> </tr> <tr valign="top"> <td align="right"><a name="U"></a></td> <td>underlined: underlined text.</td> <td><code>Underlined text example.</code> Underlined text example.</td> </tr> </table> <h3>Special Formatting Tags</h3> <table> <tr> <td>There are other formatting tags that used for special purposes, are not widely supported, or have been deprecated. If you want to see them, <a href="../../htmlnotes/formatting/SpecialFormatting.htm">click here</a>.</td> </tr> </table> <h3>Combining Styles</h3> <table> <tr> <td>Character formatting tags also are sometimes not additive. For example, you might expect that: some text would produce bold-italic text. On some browsers it does; other browsers interpret only the innermost tag. If you want to see some style combinations, <a href="../../htmlnotes/formatting/StyleCombinations.htm">click here</a>.</td> </tr> </table> </td> </tr> </table> </div> </body> </html>