Introduction to Web Design - 6. XHTML Text

Text formatting, tags and attributes tend to have the most changes made to them every new flavor release of HTML. While the changes are almost always for the better, this leaves a mess of depreciation issues that browsers must cope with. The majority of the text formatting is now being left to CSS stylesheets, however, XHTML uses a wide array of tags to help control the content type, especially text. The <style> tag is used to add CSS to a XHTML page without having to link an external stylesheet. It is advised that you use external stylesheets for multiple reasons that will be outlined in the CSS section of this reference site.

6.1 Font-style Tags

  • The <tt> tag, which stands for teletype, formats the text in a typewriter-style font.
  • The <i> tag, which stands for italics, formats the text with italics.
  • The <b> tag, which stands for bold, formats the text as a bold font.
  • The <small> tag formats the text as a smaller font size.
  • The <big> tag formats the text as a larger font size.
  • The <sup> tag, which stands for superscript, formats the text as a smaller font and raised a little (like the exponent in algebra).
  • The <sub> tag, which stands for subscript, formats the text as a smaller font and dropped a little (like in chemistry formulas).

6.2 Blocks-style Tags

  • The <q> tag, which stands for quote, holds a small block of text, generally a small quote. The <q> tag automatically adds quotation marks at both ends of the quote.
  • The <blockquote> tag holds a large block of text, generally a very long quote. The <blockquote> tag automatically adds a line break above and below the tag and generally intents the entire block of text.
  • The <p> tag, which stands for paragraph, holds a large block of text. The <p> tag automatically adds a line break above and below the tag.
  • The <pre> tag, which stands for preformatted, holds a block of preformatted text. The <pre> tag displays text as-is, meaning it tells the browser to not ignore white spaces such as line breaks, tabs and spaces.
  • The <address> tag holds a block of text designated as contact information. The <address> tag automatically adds a line break above and below the tag.

6.3 Phrase Tags

  • The <em> tag, which stands for emphasis, holds a word or phrase and applies italics to show emphasis.
  • The <strong> tag holds a word or phrase and applies bold formatting to highlight the text.
  • The <dfn> tag, which stands for definition, holds a definition and applies italics.
  • The <code> tag holds a block of code and applies a computer-style font.
  • The <samp> tag, which stands for sample, holds a block of sample code and applies a computer-style font.
  • The <kbd> tag, which stands for keyboard text, holds a word or phrase and applies a computer-style font.
  • The <var> tag, which stands for variable, holds a word or phrase that represents a variable and applies italics.
  • The <cite> tag, which stands for citation, holds a word or phrase that represents a citation and applies italics.

6.4 Other Text Tags

  • The <abbr> tag, which stands for abbreviation, holds the abbreviation of a word and contains the full word during cursor rollover. A dotted underline is displayed to show that the word has a rollover definition.
  • The <acronym> tag holds the acronym of a phrase and contains the full phrase during cursor rollover. A dotted underline is displayed to show that the word has a rollover definition.
  • The <ins> tag, which stands for inserted, underlines a correction made to the content.
  • The <del> tag, which stands for deleted, applies a strikethrough to a word or phrase corrected in the content.
  • The <bdo> tag, which stands for bi-directional override, applies the text direction of its content (left-to-right or right-to-left).

6.5 Special Characters

Since some symbols such as "<" and ">" are used to surround beginning and ending tags, some browsers cannot display these characters in normal text. In addition, there are other symbols (such as copyright, registered trademark, letters with accents, etc.) that are not routinely on keyboards that you may want to include in the text of an XHTML page. In order to include these symbols on an XHTML page, you can consult a reference of XHTML characters such as that at http://www.w3schools.com/XHTML/html_entitiesref.asp.

  1. Try adding the following to the bottom of your XHTML page and then save and view your file. &copy; is the copyright symbol.<br /><br />
    &reg; is the registered trademark symbol.<br /><br />
    &deg; is the degree symbol.<br /><br />
    &divide; is the division symbol.<br /><br />
  2. The above code should appear as follows in a browser:

    Image of File in Browser

References

  1. A Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerPrintable.html
  2. HTML: A Guide For Beginners http://www.geocities.com/Baja/4361/index.html
  3. HTML: An interactive guide for beginners. http://www.davesite.com/webstation/html/
  4. HTML and XHTML Information www.w3c.org/markup
  5. HTML reference including browser suppport http://www.w3schools.com/html/html_reference.asp
  6. W3Schools HTML Tutorials http://www.w3schools.com/default.asp
  7. Willcam's Comprehensive HTML Cross Reference http://www.willcam.com/cmat/html/crossref.html
  8. Anderson-Freed, S. (2002) Weaving a Website: Programming in HTML, Javascript, Perl and Java. Prentice-Hall:NJ. ISBN 0-13-028220-0
  9. Visibone Webmaster's ColorLab http://www.visibone.com/colorlab/
  10. The Center for Business - Color Codes http://www.tcfb.com/tutorial/colors.html
  11. HTML Colors http://www.w3schools.com/html/html_colors.asp
  12. HTML special characters. http://www.w3schools.com/html/html_entitiesref.asp

Introduction to Web Design by Cynthia J. Martincic :: Credits