You are here --> [HTML Tags - It's All About Tags] --> Jump To Article

HTML Made Simple
Author: Mike Ware
Website: [warebiz] :: "The Programmer's Domain" - http://warebiz.tripod.com/
Email: warebiz@yahoo.com
Copyright © 2002 Michael Shawn Ware, All Rights Reserved.

TABLE OF CONTENTS
***************************************************************************************
    --> Getting Started with HTML - First Things First
    --> Ground Zero - Where Do I Begin?
    --> [HTML Tags - It's All About Tags]
    --> Character Formatting - How to Spice Up Text
    --> HTML Lists - Looking Sharp and Organized
    --> Hyperlinks - Getting Out and Around
    --> HTML Tables - Far From Picnic Tables
    --> Displaying Images - Adding Life to Your Pages
    --> HTML Forms - Forming What?
    --> Image Mapping and Editing - Importance of Being Unique
    --> Frames - Structuring Static Document Layout

***************************************************************************************

HTML Tags - It's All About Tags

Since HTML stems from the basic concept of using tags, the more a web designer becomes familiar with various tags, the better that designer will be able to create customized web pages. HTML tags consist of a left angle bracket ( < ), a tag name, and a right angle bracket ( > ). Most tags have a start and end tag but some tags only need a beginning tag to function properly. The end tag is identical to the start tag with a backslash ( / ) preceding the text between the angle brackets. The general form of a tag is as follows:

<tagName> </tagName>

where tagName is the name of the tag element. Some elements may include additional instructions in the start tag, called attributes. Attributes give additional information about the element to the web browser.

The following is a brief overview of the basic document structure HTML tags:

<html> </html>
This element simply notifies the web browser that the document contains HTML-coded information (hypertext). This is also indicated by the .html or .htm extension. All other elements will be placed within the beginning and ending <html> tag.

<head> </head>
This element identifies the beginning of the HTML document commonly called the "heading" region. It contains the title tag and may perhaps contain other scripting language code such as Java, Javascript, CSS, etc, to be "included" along with the HTML elements.

<title> </title>
This element specifies the text to be displayed in the title bar of the web browser. Note that the title is not displayed within the content area of the browser. A web page title should be very descriptive and meaningful because it is used as an title description if a visitor bookmarks the document as a favorite web link.

<body> </body>
This element contains the content elements of the document that is to be displayed in the content area of a web browser.


This is the comment tag which is used for documentation purposes. Documentation refers to statements in the HTML source code that do not affect the code but are generally used for describing the purpose of particular code segments. Placing comments in html source code is vital when working with complex code containing many different elements. It also helps the web designer and other viewers understand what certain code segments are accomplishing. It is good web programming practice to use adequate source code comments, and it is a good habit if pursuing other programming languages, especially if working in a team enviroment.

Document structure tags define the global regions of a web page but do nothing to describe web page content. The following are some useful document formatting tags and text tags designed to "describe" web page content:

<center> </center>
Even though the center tag is very basic and extremely easy to understand, it can be very useful in a document. Everything placed between the start and end <center> tags will be centered on the screen or centered in its current cell space. The center tag is expected to become obsolete because other tag attributes can now accomplish the same principle.

<br>
Using the break tag causes the current line to break. It is the same as pressing enter in a word processing document; it simply breaks the line and begins a new one.

Text Headings (block-level) <h1> </h1> through <h6> </h6>
HTML has six levels of text form heading, from 1 to 6, with 1 being the most prominent (biggest) level. Consider the following:

<h1>H1 Heading Size</h1> --> text displayed at size 1 level
<h2>H2 Heading Size</h2> --> text displayed at size 2 level
<h3>H3 Heading Size</h3> --> text displayed at size 3 level
<h4>H4 Heading Size</h4> --> text displayed at size 4 level
<h5>H5 Heading Size</h5> --> text displayed at size 5 level
<h6>H6 Heading Size</h6> --> text displayed at size 6 level

H1 Heading Size

H2 Heading Size

H3 Heading Size

H4 Heading Size

H5 Heading Size

H6 Heading Size

<pre> </pre>
This is the preformatted text tag. Unlike word processing documents, word wrapping is performed by default (unless otherwise instructed by use of block level tags) in an HTML document and multiple spaces in HTML source code are reduced to one single space when displayed by a browser. The preformatted text tag makes spaces and line breaks appear in the same location as they do in the source file. The <pre> tag can also be used with the width="#" attribute to specify how many characters are to be displayed on each line.

<hr>
This tag produces a rule that extends horizontally across the content area in a web browser. It is useful for separating and organizing information. An alternative and better idea would be to create an image designed to serve the same purpose which matches the colors of the web page. The horizontal rule tag has two attributes. The size attribute specifies the line thickness in pixels. The width attribute specifies the line width in percentage of the screen or the line width in pixel values. For example, to produce a horizontal division rule 10 pixels thick and 400 pixels wide, use <hr width="100" size="10">.

<p> </p>
The paragraph tag allows content to be displayed in a paragraph block-level format. A line break will be placed before and after the content specified by the start <p> tag and closing </p> tag.

Some text cannot be explicitly placed as "regular" text in web page document source code because the text has pre-defined or reserved meaning to the syntax of HTML, or there is no keyboard character value for the text, etc. For example, a less than operator and greater than operator have pre-defined "tag" meanings and are therefore not able to be displayed by solely placing ( < ) or ( > ) in HTML source code. However, certain HTML code specifiers make it possible to display these reserved characters. Visit AssicTable.com for a complete listing of all the current HTML code specifiers.

The next section will provide more ideas on how to format characters and text in HTML documents. Read on for more about character formatting...

Move on to next topic: Character Formatting - How to Spice Up Text

Back to Top