Learn Basic HTML - for Beginners' Web Sites

Learn basic HTML to start building a website

Man with laptop reclining on sofa

 Karin Dreyer / Getty Images

Learn basic HTML to create your Web site. Basic HTML is not hard to learn. Learning HTML is probably the single most important thing you'll ever do if you want to create your own personal Web site. You must learn HTML to design good pages because it is the language in which Web site on the Internet are based on.

Web sites are a great way to show off something in your life. Basic HTML will let you show the world whatever it is you want to show them on your Web site. Adding colors, changing text size and including pictures on your Web site are just a few of the things you can do when you learn basic HTML.

To learn basic HTML you must keep in mind that it's simply a series of letters that are abbreviations of what they actually stand for. For example, H1 stands for a heading for a paragraph that is the first of five sizes and BR is a line break.

One important thing to remember, while you learn basic HTML, is that on a Web page the HTML tags must come in a certain order and most HTML tags must have a start and end tag for the browser to recognize the command. An end tag is just simply the same as the start tag except that it starts with the / symbol. A heading would look like this <H1>Heading Here</H1>. There is a start tag, <H1>, the heading, and an end tag, </H1>.

Learn basic HTML the right way and remember that the tags must come in a certain order. The basic structure of a web page is as follows:


<HEAD> Here you can put important document information such as frames, language, and special instructions.

<TITLE>Title of your page.</TITLE>


<BODY> Put your story, pictures, links, and everything else here.

<H1>Heading of your paragraph.</H1>

<P>This is where you enter the text of your document.</P>

This is how to write a link:
<A HREF="http://www.nameofpage.com">Title or text that will be the clickable link.</A>



You can also enter a link into the middle of a sentence. If you wanted to say "Microsoft has some wonderful demos." It would look like this:

<A HREF="http://www.microsoft.com/en/us/default.aspx">Microsoft </A>has some wonderful demos to help you learn basic HTML.

You not only can create links to other pages but you can also create links to another place on the same page. If I wanted you to go back to the beginning of this article I would say something like "Go Back" and by clicking on the hyperlink you would go back to the beginning. This one is a little more difficult because there are two parts to it. First of all you create your link:

<A HREF="nameofdocument#There">Go Back</A>

The word "There" is the word I want to take you back to so now I must go to that word and create and anchor so the link I just created knows where to go:

<A NAME="There">There</A>

When you learn basic HTML you can write your Web site in the text editor Note Pad that comes with Windows, programs such as NoteTab and Arachnophilia, an HTML editor program such as DreamWeaver, or one that comes with your web browser. Either way if you just follow the rules from when you learned basic HTML everything will turn out just fine.

Basic HTML Tags

<!-...-> - Author comments not seen by the browser.

<HTML>...</HTML> - Always start and end your page using this tag.

<HEAD>...</HEAD> - Header for document.

<BODY>...</BODY> - Body of document.

<TITLE>...</TITLE> - Title of the document.

<H1>...</H1> - Smallest heading size.

<H2>...</H2> - Small heading size.

<H3>...</H3> - Medium-small heading size.

<H4>...</H4> - Medium-big heading size.

<H5>...</H5> - Large heading size.

<H6>...</H6> - Largest heading size.

<A>...</A> - Starts a hypertext link.

<ADDRESS>...</ADDRESS> - Information on author.

<BLOCKQUOTE>...</BLOCKQUOTE> - Long quotes.

<PRE>...</PRE> - Preformatted Text.

<FORM>...</FORM> - Form Block.

<TEXTAREA>...</TEXTAREA> - Creates a box to enter text.

<SELECT>...</SELECT> - Creates a scrolling menu.

<OPTION>...</OPTION> - Creates items to select.

<DIR>...</DIR> - Directory list.

<OL>...</OL> - Ordered list.
Example of an ordered list:

  1. red
  2. blue
  3. green

<UL>...</UL> - Unordered list.
Example of an unordered list:

  • red
  • blue
  • green

<MENU>...</MENU> - Menu list.

<DL>...</DL> - Glossary list.

<CITE>...</CITE> - Citation.

<CODE>...</CODE> - Code font.

<DFN>...</DFN> - Defined term.

<EM>...</EM> - Emphasis.
Example of emphasis on red:
red, blue, green

<I>...</I> - Italic.
Example of italic:
red, blue, green

<KBD>...</KBD> - Keyboard text.

<SAMP>...</SAMP> - Sample text.

<STRONG>...</STRONG> - Strong emphasis.
Example of strong emphasis:
red, blue, green

<TT>...</TT> - Typewriter text.

<VAR>...</VAR> - Variable.

<B>...</B> - Bold.

<BASE> - Location reference for other URL's.

<NEXTID> - Allows documents to be linked together.

<META> - Describes document.

<BR> - Line break.

<HR> - Horizontal line.

<IMG> - Image.

<P> - Paragraph.

<LI> - List item.

<DT> - Marks a term in a list.

<DD> - Marks the definition in the list.