More HTML Font Styles - Bold/Italic Codes

<b>...</b>	Bold	(More details...)
<i>...</i>	Italics	(More details...)
<u>...</u>	Underline	(More details...)
<s>...</s>	Strike-through	(More details...)
<tt>...</tt>	Teletype	(More details...)
<sup>...</sup>	Superscript (E=MC2)	(More details...)
<sub>...</sub>	Subscript (H20)	(More details...)

Aside from formatting text using the font element and its attributes —face, size and color— there are a variety of other HTML font styles that you can use to format the text on your web page. These are listed in detail below along with example codes:

• Bold ~ Using bold text will display your text in a thicker font making one or more words really stand out from the rest and will tend to draw the reader's attention to these words. This has a variety of applications and is largely a matter of taste. Bold text is sometimes used for list headers such as in this list of font styles. To create bold text, place the desired text within the <b>...</b> tags.
  
  Example:
  
  
  
  <b>Your bold text goes here.</b>
  
  
  
  
• Italics ~ The italics font style slants the text to the right and thus can also be used to draw special attention to one or more words. You may wish to use italics instead of bold when the bold font style is too "loud" for your purposes. Italics has a variety of other applications and the use of it is largely a matter of taste. The italics are often formally applied to the titles of newspapers, magazines and books, such as when one wants to mention The New York Times. To display text in italics using HTML, place the desired text within the <i>...</i> tags.
  
  Example:
  
  
  
  <i>Your italics text goes here.</i>
  
  
  
  
• Underline ~ Like bold and italics, underlining can also be used to place special emphasis on one or more words but this tends to have limited use on web pages since underlined text is also the default font style for hyperlinks. Seasoned internet users automatically assume that all underlined text constitutes a hyperlink. Thus, if you use underlining, be advised that some readers will be compelled to move their mouse pointer over your underlined text thinking it to be a hyperlink. Then, upon discovering that it's just text that you meant to emphasize, they may become miffed that you wasted their time and, worse, may ignore genuine hyperlinks that appear later on in the web page. Hence, for the purposes of clarity, underlined text should be avoided. Depending on the circumstances, however, this may not be an issue. To create underlined text, place the desired text within the <u>...</u> tags.
  
  Example:
  
  
  
  <u>Your underlined text goes here.</u>
  
  
  
  
  
• Strike-through ~ Using HTML, you can create text that looks like it's been crossed out or appears like it has a line drawn through it. Formally this is used to indicate text that has been edited or changed but it also has some funny clever humorous applications that might be worth exploring. To create strike-through text, place the desired text within the <strike>...</strike> tags or the <s>...</s> tags.
  
  Example:
  
  
  
  <strike>Your strike-through text goes here.</strike>
  
  
  
  
  
• Teletype ~ This kind of text style simulates the monospaced text created by a typewriter or teletype machine and is often used to denote HTML source code in reference files or tutorials such as this one. To create teletype text, place the desired text within the <tt>...</tt> tags.
  
  Example:
  
  
  
  <tt>Your teletype text goes here.</tt>
  
  
  
  The monospaced text style can also be produced using the <code>...</code> tags:
  
  
  
  <code>Your code text goes here.</code>
  
  
  
  
  
• Superscript ~ Using HTML, you can create text that is raised above the preceding text and is displayed in a smaller font. This can be used for mathemetical considerations or it can be used to formally annotate compositions such as articles or essays. For example:
  
  
  
  To create superscript text, place the desired text (typically a number) within the <sup>...</sup> tags.
  
  Example:
  
  
  
  Such-and-such went on record to say that he greatly approved of the latest agreement.<sup>1</sup> Elsewhere, however, it was reported that he did not approve.<sup>2</sup>
  
  
  
  
  
• Subscript ~ This kind of text is lowered below the baseline of the preceding text and is displayed in a smaller font. This can be used to display chemical notation:
  
  
  
  To create subscript text, place the desired text within the <sub>...</sub> tags.
  
  Example:
  
  
  
  The chemical notation of water is H<sub>2</sub>0.
  
  

Now that you've become familiar with the HTML codes you can use to format text on your web page, you may be wondering how to properly combine font styles...


See also:

• What is Web Hosting?
• How to Make a Web Page