What is an HTML File?
HTML stands for Hyper Text Markup Language
An HTML file is a text file containing small markup tags
The markup tags tell the Web browser how to display the page
An HTML file must have an htm or html file extension
An HTML file can be created using a simple text editor
Learning Starts HERE

If you are running Windows, start Notepad.
If you are on a Mac, start SimpleText.
In OSX start TextEdit and change the following preferences: Open the "Format" menu and select "Plain text" instead of "Rich text". Then open the "Preferences" window under the "Text Edit" menu and select "Ignore rich text commands in HTML files". Your HTML code will probably not work if you do not change the preferences above!
Type in the following text:
This is my first homepage. This text is bold
Save the file as "mypage.htm".
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.
Example Explained
The first tag in your HTML document is . This tag tells your browser that this is the start of an HTML document. The last tag in your document is . This tag tells your browser that this is the end of the HTML document.
The text between the tag and the tag is header information. Header information is not displayed in the browser window.
The text between the This is my first homepage. This text is bold
This is an HTML element:
This text is bold
The HTML element starts with a start tag: The content of the HTML element is: This text is boldThe HTML element ends with an end tag:
The purpose of the tag is to define an HTML element that should be displayed as bold.
This is also an HTML element:
This is my first homepage. This text is bold
This HTML element starts with the start tag , and ends with the end tag .
The purpose of the tag is to define the HTML element that contains the body of the HTML document.
Why do We Use Lowercase Tags?
We have just said that HTML tags are not case sensitive: means the same as . If you surf the Web, you will notice that plenty of web sites use uppercase HTML tags in their source code. We always use lowercase tags. Why?
If you want to follow the latest web standards, you should always use lowercase tags. The World Wide Web Consortium (W3C) recommends lowercase tags in their HTML 4 recommendation, and XHTML (the next generation HTML) demands lowercase tags.
BASIC TAGS

The most important tags in HTML are tags that define headings, paragraphs and line breaks.
The best way to learn HTML is to work with examples. We have created a very nice HTML editor for you. With this editor, you can edit the HTML source code if you like, and click on a test button to view the result.
Try it Yourself - Examples
A very simple HTML documentThis example is a very simple HTML document, with only a minimum of HTML tags. It demonstrates how the text inside a body element is displayed in the browser.
Simple paragraphsThis example demonstrates how the text inside paragraph elements is displayed in the browser.
(You can find more examples at the bottom of this page)
Headings
Headings are defined with the

to

tags.

defines the largest heading.

defines the smallest heading.

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

HTML automatically adds an extra blank line before and after a heading.
Paragraphs
Paragraphs are defined with the

tag.

This is a paragraph

This is another paragraph

HTML automatically adds an extra blank line before and after a paragraph.
Don't Forget the Closing Tag
You might have noticed that paragraphs can be written without end tags

:

This is a paragraph

This is another paragraph
The example above will work in most browsers, but don't rely on it. Future version of HTML will not allow you to skip ANY end tags.
Closing all HTML elements with an end tag is a future-proof way of writing HTML. It also makes the code easier to understand (read and browse) when you mark both where an element starts and where it ends.
Line Breaks
The
tag is used when you want to break a line, but don't want to start a new paragraph. The
tag forces a line break wherever you place it.

This
is a para
graph with line breaks

Try it yourself
The
tag is an empty tag. It has no end tag like
, since a closing tag doesn't make any sense.

or

More and more often you will see the
tag written like this:

Because the
tag has no end tag (or closing tag), it breaks one of the rules for future HTML (the XML based XHTML), namely that all elements must be closed.
Writing it like
is a future proof way of closing (or ending) the tag inside the opening tag, accepted by both HTML and XML.
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.

Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
Recap on HTML Elements
Each HTML element has an element name (body, h1, p, br)
The start tag is the name surrounded by angle brackets:

The end tag is a slash and the name surrounded by angle brackets

The element content occurs between the start tag and the end tag
Some HTML elements have no content
Some HTML elements have no end tag
Basic Notes - Useful Tips
When you write HTML text, you can never be sure how the text is displayed in another browser. Some people have large computer displays, some have small. The text will be reformatted every time the user resizes his window. Never try to format the text in your editor by adding empty lines and spaces to the text.
HTML will truncate the spaces in your text. Any number of spaces count as one. Some extra information: In HTML a new line counts as one space.
Using empty paragraphs

to insert blank lines is a bad habit. Use the
tag instead. (But don't use the
tag to create lists. Wait until you have learned about HTML lists.)
HTML automatically adds an extra blank line before and after some elements, like before and after a paragraph, and before and after a heading.
We use a horizontal rule (the

---

tag), to separate the sections in our tutorials.
More Examples
More paragraphsThis example demonstrates some of the default behaviors of paragraph elements.
Line breaksThis example demonstrates the use of line breaks in an HTML document.
Poem problemsThis example demonstrates some problems with HTML formatting.
HeadingsThis example demonstrates the tags that display headings in an HTML document.
Horizontal ruleThis example demonstrates how to insert a horizontal rule.
Hidden commentsThis example demonstrates how to insert a hidden comment in the HTML source code.
Basic HTML Tags
If you lookup the basic HTML tags in the reference below, you will see that the reference contains additional information about tag attributes.
You will learn more about HTML tag attributes in the next chapter of this tutorial.
Tag
Description

Defines an HTML document

Defines the document's body

to

Defines header 1 to header 6

Defines a paragraph


Inserts a single line break

---

Defines a horizontal rule

Defines a comment