HTML quick reference

This document contains a list of style samples, paired with the HTML that produces them. It's just a quick reference to remind you of things you already knew but may have momentarily forgotten. For introductory material, click here .

John Kerl
June, 1997


Description Sample HTML
Bold Bold text here. <b>Bold text here.</b>
Italic Italic text here. <i>Italic text here.</i>
Typewriter text Typewriter text here. <tt>Typewriter text here.</tt>
Centered text
Centered text here.
<center>Centered text here.</center>
Colored text Blue text here.
Blue bold text here.
<font color="#0000FF">Blue text here.</font>
<font color="#0000FF"><b>Blue bold text here.</b></font>
Paragraph break Paragraph break (with a blank line) between this word

and the next.

Paragraph break (with a blank line) between this word <p> and the next.
Carriage return Carriage return (with no blank line) between this word
and the next.
Carriage return (with no blank line) between this word <br> and the next.
Hyperlink This text is a hyperlink. <a href="almost-blank.html"> This text is a hyperlink</a>.
Mailto This text is a mailto. <a href="mailto:kerl@emtek.com"> This text is a mailto</a>.
Pre-formatted text
Pre-formatted text here.

(Preserves line breaks,
whitespace, etc., exactly as found
in the HTML source.  Useful when
you have a text file that already
looks nice & you don't want to
have to go in and add the HTML
markup tags to format it.)
<pre> Pre-formatted text here.

(Preserves line breaks,
whitespace, etc., exactly as found
in the HTML source.  Useful when
you have a text file that already
looks nice & you don't want to
have to go in and add the HTML
markup tags to format it.)
</pre>
Bullet list

Here is a bullet list:

  • First item goes here.
  • Second item goes here.
  • Third item goes here.
  • Fourth item goes here.
<p>Here is a bullet list:
<ul>
	<li> First item goes here.
	<li> Second item goes here.
	<li> Third item goes here.
	<li> Fourth item goes here.
</ul>
Numbered list

Here is a numbered list:

  1. First item goes here.
  2. Second item goes here.
  3. Third item goes here.
  4. Fourth item goes here.
<p>Here is a numbered list:
<ol>
	<li> First item goes here.
	<li> Second item goes here.
	<li> Third item goes here.
	<li> Fourth item goes here.
</ol>
Horizontal lines



<hr>
<hr size=10>
<hr noshade size=1>
<hr noshade size=4>
Table

Headers Go Here
Contents go here
Contents go here

<TABLE BORDER=1 WIDTH=100%>

   <TR>
      <TH> Headers </TH>
      <TH> Go </TH>
      <TH> Here </TH>
   </TR>
   <TR>
      <TD> Contents </TD>
      <TD> go </TD>
      <TD> here </TD>
   </TR>
   <TR>
      <TD> Contents </TD>
      <TD> go </TD>
      <TD> here </TD>
   </TR>

</TABLE>
Special characters
(See also: special-characters reference at UT Austin or this page at Penn State.)
< > &    
 
« »      
¿ ? ¡ !  
-    
á é í ó ú
Á É Í Ó Ú
à è ì ò ù
À È Ì Ò Ù
â ê î ô û
Â Ê Î Ô Û
ä ë ï ö ü
Ä Ë Ï Ö Ü
å ç ñ ø  
Å Ç Ñ Ø  
ß æ œ Æ Œ
± °    
&lt; &gt; &amp;    
&lsquo; &rsquo; &ldquo; &rdquo;  
&laquo; &raquo;      
&iquest; ? &iexcl; !  
- &ndash; &mdash;    
&aacute; &eacute; &iacute; &oacute; &uacute;
&Aacute; &Eacute; &Iacute; &Oacute; &Uacute;
&agrave; &egrave; &igrave; &ograve; &ugrave;
&Agrave; &Egrave; &Igrave; &Ograve; &Ugrave;
&acirc; &ecirc; &icirc; &ocirc; &ucirc;
&Acirc; &Ecirc; &Icirc; &Ocirc; &Ucirc;
&auml; &euml; &iuml; &ouml; &uuml;
&Auml; &Euml; &Iuml; &Ouml; &Uuml;
&aring; &ccedil; &ntilde; &oslash;  
&Aring; &Ccedil; &Ntilde; &Oslash;  
&szlig; &aelig; &oelig; &AElig; &OElig;
&bull; &plusmn; &deg;    
&uarr; &darr; &larr; &rarr; &harr;
Greek alphabet
α Α
β Β
γ Γ
δ Δ
εΕ
ζ Ζ
η Η
θ Θ
ι Ι
κ Κ
λ Λ
μ Μ
ν Ν
ξ Ξ
οΟ
π Π
ρ Ρ
σ Σ
τ Τ
υΥ
φ Φ
χ Χ
ψ Ψ
ω Ω
&alpha; &Alpha;
&beta; &Beta;
&gamma; &Gamma;
&delta; &Delta;
&epsilon;&Epsilon;
&zeta; &Zeta;
&eta; &Eta;
&theta; &Theta;
&iota; &Iota;
&kappa; &Kappa;
&lambda; &Lambda;
&mu; &Mu;
&nu; &Nu;
&xi; &Xi;
&omicron;&Omicron;
&pi; &Pi;
&rho; &Rho;
&sigma; &Sigma;
&tau; &Tau;
&upsilon;&Upsilon;
&phi; &Phi;
&chi; &Chi;
&psi; &Psi;
&omega; &Omega;
Superscripts and subscripts x 1 2 + x 2 2 + x 3 2 = 7.

If you want to anything more complicated than this, I strongly suggest you use LaTeX. :)

<i>x</i> <sub>1</sub> <sup>2</sup> +
<i>x</i> <sub>2</sub> <sup>2</sup> +
<i>x</i> <sub>3</sub> <sup>2</sup> = 7.
Comments (Do not appear on the page when displayed.) <!-- Comment text goes here -->
Images Patrick Stewart <img src="patrick_stewart.jpg"
alt="Picture file is missing!"
title="Bald is Beautiful">

Syntax:

  • src= name_of_file.gif (or .jpg, etc.)
  • alt= Text to show when image not available, or when the browser isn't finished retrieving it yet, or when you didn't put the image file where you think you did.
  • title= Text the user will see on mouse-over and/or right-mouse and Properties.
Finally, here is an almost blank file that I sometimes use when I want to create a new page. I can copy this to the new file name, then put in whatever content I want that page to have. (Click here to see it.)
<HTML>
<HEAD>
<TITLE>
This appears up in the title bar
</TITLE>
</HEAD>
<BODY BGCOLOR ="#FFFFFF"
   LINK="#993333"
   VLINK="#888888"
   ALINK="#cc3333">

<H1> </H1>
<H2> </H2>

<H3>
<CENTER>
<FONT COLOR="#993333">
This appears at the top of the page
</FONT>
</CENTER>
</H3>

<p>

Body goes here.

</BODY>
</HTML>

Those are the features that I use the most often. As you can see, these are all simple building blocks; but you can use them to make some neat-looking pages. It is really easy!