Basic HTML Tags

Before you can really get started with learning HTML, you need to understand some of the basic HTML tags that make up any website. Tags are located between the < and the > symbols. What is in between the symbols is what the browser is looking for to properly display your website. You will notice that all tags are within these symbols and without them, they would be displayed as nothing more than text, if you are lucky.

HTML tags always begin and end with < and the > symbols. Each website you create must have the following eight tags:

<HTML></HTML>
<HEAD></HEAD>
<TITLE></TITLE>
<BODY></BODY>

Text between each tag, remember, is called an element. Your tags will not display, but the text between them will.

Quick review: the first tag in each pair is the opening tag. The second tag is the closing tag. You must have a closing tag paired with the opening tag in order to properly close your element, with a few exceptions that will be noted as we go through HTML.

The HTML Tag

Each HTML page's code starts with the <HTML> tag. This tells the browser that the subsequent code is all written in HTML. The closing tag goes at the very end of your code, letting the browser know that the website has ended at that point.

<HTML>

. . . all your other code, text, images, etc. . .

</HTML>

The next two tags divide your HTML code into two distinct sections: the <HEAD> and the <BODY>. The <HEAD> tag holds information that is not displayed in your web page, but is, rather, important in other ways, such as helping search engines determine where to classify your page or setting global styles.

The <BODY> tag holds all the information that you think of as a web page.

Inside the <HEAD> </HEAD> tag is the <TITLE> tag. The <TITLE> and </TITLE> tags name your page on the title bar (that's the colored bar at the very top of your window. The element included between these tags is your text exactly as it displays on the title bar. There is no length limit, but it's suggested that you keep it to 64 characters or less (yes, that means count spaces too.)

Though more will display in the title bar, there's a very good reason to keep things short. When your page is searched for in Google or Yahoo, the link and a short description of the page show up in the search results. The description pulled is the contents of your head tags, and it is limited to either 66 or 120 characters, depending on the search engine. Anything longer will be cut off, which can result in some embarrassing or frustrating text.

Your website code should now look like this:

<HTML>
<HEAD>
<TITLE>Whatever You Want To Put For Your Title</TITLE>
</HEAD>
<BODY>
<BODY>
</HTML>

Try This:

Using the code above exactly as you see it, copy it and paste it to either Notepad, Arachnophilia, or the Edit tab of your WYSIWYG editor. Change the title to something else that appeals to you, and use the preview or View As Webpage option (this command and others vary from program to program.) If you used your Notepad, save (as in the last step below), open your web browser, select File | Open File (or possibly Open Local File), and navigate to the HTML file you just saved.

You should see nothing on the page, but your title text in the title bar.

Next, type something in between the <BODY></BODY> tags. Now look at the preview. See the text?

This is the simplest possible web page. Even though the syntax (that's the coding's grammar) is wrong, you will see the text you put on the page. In the next lessons, you'll learn how to put the proper syntax on your text as well as change the appearance of your text.

Now save your file as a .htm or .html file. This is all you need to convert it into HTML.

Make sure that you save this file so that you can add to it later on, as you follow our other tutorials and watch your progress as you go. These tags are part of the basic HTML tags.

HTML PROGRAMMING TUTORIAL LESSONS

BASIC

INTERMEDIATE

ADVANCED

Introduction to HTML
Before You Get Started With HTML
Basic HTML Tags
More About HTML Tags
Text Effects with HTML
More on Formatting Text
Special Characters and Lists in HTML
Creating Links in HTML
Creating Links - Graphic Links
Posting Images to your Website
Understanding Web based Colors and Codes
Using Colors Intelligently
Neat HTML Coding
Hand code HTML or Use a WYSIWYG Composer?
Quiz - Basic Level ►

Quiz 1 - HTML Basic Level Quiz 2 - HTML Basic Level Quiz 3 - HTML Basic Level

Using Div and Span Tags
Formatting - Image Wraps, Breaks
Definition of CSS
Introduction to Tables
Tables - Nesting and Joining Cells
Tables - Create Layouts I
Tables - Create Layouts II
Tables - Create Seamless Graphics
DHTML, XHTML and Other Markup Languages
Using Events
Adding Scripts
Quiz - Intermediate Level ►

Quiz 1 - HTML Intermediate Level Quiz 2 - HTML Intermediate Level Quiz 3 - HTML Intermediate Level

Creating Forms in HTML
Using HTML Forms
HTML Forms - Text Input Fields
HTML Form Elements: Menus and Options
HTML Forms - Interacting with the Server
HTML Forms - Making Scripts Work
Frames
Introduction to HTML Styles
CSS - How to Use Those Styles
CSS - Creating Simple Internal Styles
CSS - Creating Simple External Styles
Quiz - Advanced Level ►

Quiz 1 - HTML Advanced Level Quiz 2 - HTML Advanced Level Quiz 3 - HTML Advanced Level

Goto HTML Programming Tutorial Home Page

Goto Computer Training Home Page

Amazon.com Widgets