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. Bold text here.

Italic Italic text here. Italic text here.

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. Blue text here. Blue bold text here.

Paragraph break

Paragraph break (with a blank line) between this word

and the next.

Paragraph break (with a blank line) between this word 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 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:

First item goes here.
Second item goes here.
Third item goes here.
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.)

<	>	&
‘	’	“	”
«	»
¿	?	¡	!
-	–	—
á	é	í	ó	ú
Á	É	Í	Ó	Ú
à	è	ì	ò	ù
À	È	Ì	Ò	Ù
â	ê	î	ô	û
Â	Ê	Î	Ô	Û
ä	ë	ï	ö	ü
Ä	Ë	Ï	Ö	Ü
å	ç	ñ	ø
Å	Ç	Ñ	Ø
ß	æ	œ	Æ	Œ
þ	ð
•	±	°
<	≤	>	≥	≠
↑	↓	←	→	↔

`<`	`>`	`&`
`‘`	`’`	`“`	`”`
`«`	`»`
`¿`	`?`	`¡`	`!`
`-`	`–`	`—`
`á`	`é`	`í`	`ó`	`ú`
`Á`	`É`	`Í`	`Ó`	`Ú`
`à`	`è`	`ì`	`ò`	`ù`
`À`	`È`	`Ì`	`Ò`	`Ù`
`â`	`ê`	`î`	`ô`	`û`
`Â`	`Ê`	`Î`	`Ô`	`Û`
`ä`	`ë`	`ï`	`ö`	`ü`
`Ä`	`Ë`	`Ï`	`Ö`	`Ü`
`å`	`ç`	`ñ`	`ø`
`Å`	`Ç`	`Ñ`	`Ø`
`ß`	`æ`	`&oelig;`	`Æ`	`&OElig;`
`þ`	`ð`
`•`	`±`	`°`
`<`	`≤`	`>`	`≥`	`≠`
`↑`	`↓`	`←`	`→`	`↔`

Greek alphabet

α	Α
β	Β
γ	Γ
δ	Δ
ε	Ε
ζ	Ζ
η	Η
θ	Θ
ι	Ι
κ	Κ
λ	Λ
μ	Μ
ν	Ν
ξ	Ξ
ο	Ο
π	Π
ρ	Ρ
σ	Σ
τ	Τ
υ	Υ
φ	Φ
χ	Χ
ψ	Ψ
ω	Ω

`α`	`Α`
`β`	`Β`
`γ`	`Γ`
`δ`	`Δ`
`ε`	`Ε`
`ζ`	`Ζ`
`η`	`Η`
`θ`	`Θ`
`ι`	`Ι`
`κ`	`Κ`
`λ`	`Λ`
`μ`	`Μ`
`ν`	`Ν`
`ξ`	`Ξ`
`ο`	`Ο`
`π`	`Π`
`ρ`	`Ρ`
`σ`	`Σ`
`τ`	`Τ`
`υ`	`Υ`
`φ`	`Φ`
`χ`	`Χ`
`ψ`	`Ψ`
`ω`	`Ω`

Superscripts and subscripts

x ₁ ² + x ₂ ² + x ₃ ² = 7.

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

x 1 2 +
x 2 2 +
x 3 2 = 7.

Comments (Do not appear on the page when displayed.) 

Images

<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!