HTML Basics

General Info:

  • The bare minimum software to create HTML is a text editor, like Notepad, but any word processor will work, too, as long as you save it as plain text.
  • The latest versions of most word processing applications, plus many other applications, also have the capability or option to convert the documents to HTML.
  • There are also many HTML editors available. Most cost money, but a few are free. General rule of thumb: the more it costs -- the more features it has, the more it can do.
  • Tags are not case sensitive. <TITLE> or <title> are the same.
  • Blank lines and multiple spaces are ignored.
  • Anything without tags will be displayed as is.
  • Any unknown tag or incorrect tag is usually ignored.
  • Different browsers may display tags differently.
  • Most tags need a beginning and ending tag such as <TITLE> and </TITLE>. Others such as <P>, <BR>, <HR> and <LI>, to name some, do not need an ending tag. When in doubt, use an ending tag.
  • Save your HTML file as index.html

Structure:

<HTML>

<HEAD>

<TITLE>
 
 
 

</TITLE>

</HEAD>

<BODY>
 
 
 

</BODY>

</HTML>

Structure notes: Notice the first tag is <HTML> and the last tag is </HTML>. Every HTML document must begin and end with those tags. The second tag is <HEAD>. This is where <TITLE> goes, in between <HEAD> and </HEAD>. Everything else goes between <BODY> and </BODY>

Title

<TITLE>...</TITLE> Place between <HEAD> and </HEAD>. This is displayed on the browser title bar

Paragraphs and Line Breaks

<P>...</P> Paragraph tag, </P> is optional. Inserts blank line.

<BR> Line break (hard return). </BR> is optional. No blank line.

Note: When text follows a heading, such as <H1>...</H1>, a blank line will follow it automatically. A paragraph or break tag isn't necessary.

Horizontal Rule

<HR> places a horizontal line on the page (no ending tag necessary)

Formatting

<B>Bold</B> Bold
<I>Italics</I> Italics
<U>Underline</U> Underline

Headlines

<H1>Headline 1</H1> (largest)

Headline 1

<H2>Headline 2</H2>

Headline 2

<H3>Headline 3</H3>

Headline 3

<H4>Headline 4</H4>

Headline 4

<H5>Headline 5</H5>
Headline 5
<H6>Headline 6</H6> (smallest)
Headline 6

Centering

<CENTER>Centers text</CENTER>
Centers text

 

Lists

<OL>...</OL> Ordered List (numbered)

<UL>...</UL> Unordered List (bulleted)

<LI> List Item. Used with <OL> and <UL>

Ordered Lists

<OL>
<LI>First Item
<LI>Second Item
<LI>Third Item
</OL>

Ordered list as it is viewed in a browser

  1. First Item
  2. Second Item
  3. Third Item

Unordered List

<UL>
<LI>An Item
<LI>Another Item
<LI>Yet Another Item
</UL>

Unordered list as it is viewed in a browser

  • An Item
  • Another Item
  • Yet Another Item

! You are using a version 4 browser or older. If you are experiencing any problems with scrolling, please reload the page.