HTML Tutorial / Course

HTML  TAGS

 

As explained in Chapter 1, In HTML we add TAGS to describe the meaning of the text they contain. These tags are called elements and they describe the meaning of the text they contain, rather than how the enclosed text should be displayed. This concept is called content-based markup, as opposed to presentational markup

 

To get bold print, centered text, text in italics, colored text, bullets, etc., we insert   tags around the text. Naturally we don't want the tags to appear in the browser (i.e. in the final web page), To tell the browser that they are tags, we simply place  "less than" (“<") and   "greater than" (">") symbols around a tag.  Thus each tag is enclosed in an opening angle bracket "<" and a closing angle bracket ">“. For example, the tag to center a text is written as <CENTER>.

 

CONTAINER TAGS OR ELEMENTS

 

An element that has an "beginning” or “opening” tag and "ending" or "closing" tag is referred to as a container element because anything contained between these tags are affected by the element.  Many elements consist of an opening tag and a closing tag. In the following pages we will see that there are many container tags that are used in a web page.

 

 

CORRECT USE OF TAGS

 

Tags cannot be placed just anywhere. You have to follow a rule for closing a tag. Use the "Last In = First Out" rule i.e. the "Last" tag "In" must be the "First" tag "Out". In other words, tags are closed in reverse order to the way they are opened. Thus the first tag opened must be the last tag closed. Container tags cannot overlap each other.

An example of an incorrect placement of tags:

<tag1><tag2> statements </tag1></tag2>

In this example, the last tag opened (<tag2>) is not the first tag closed. </tag2> must come before </tag1>. Therefore this example does not satisfy the "Last In = First Out” rule. If you do not place tags properly, your web page simply won't work.

An example of a correct sequence of tags:

<tag1><tag2> statements </tag2></tag1>

Here, <tag1> is activated first, and then <tag2>. Thus <tag2> must be terminated first with </tag2> followed by the termination of <tag1>.

Let us take an example of a large number of tags:.

<tag1><tag2><tag3><tag4> statements </tag4></tag3></tag2></tag1>

All tags are terminated in the reverse order to the way in which they were activated. These tags satisfy the "Last In = First Out" rule

 

Problem 1: Check the correctness of the following example.

<tag1><tag2> statement1 </tag2> <tag3>

statement2

statement3

<tag4> statement4</tag3></tag4>

statement5</tag1>

 

 

 HTML 2.0 TAGS

 

<A> - To create an anchor or a link

<ADDRESS> - To indicate address

<B> - To display text in boldface

<BASE> - To specify the URL of the document used to generate any relative URLs

<BLOCKQUOTE> - To indicate that a block of text is a quotation

<BODY> - To enclose the main section of a web page

<BR> - To create a line break

<CITE> - To indicate that the text is a short citation

<CODE> - To indicate text is a computer code

<DD> - To indicate a definition description in a definition list

<DIR> - To create a directory list

<DL> - To create a definition list

<DT> - To indicate a term to be defined in the definition list

<EM> - To emphasize text, usually in italics

<H1> - To create a level 1 header (top header)

<H2> - To create a level 2 header

<H3> - To create a level 3 header

<H4> - To create a level 4 header

<H5> - To create a level 5 header

<H6> - To create a level 6 header

<HEAD> - To create the head section of the web page

<HR> - To create a horizontal line

<HTML> - To identify the document as an HTML document

<I> - To display text in italics

<IMG> - Image tag to place an image on the web page

<ISINDEX> - To create a primitive search

<KBD> - To indicate text from a keyboard

<LI> - To create a list item

<LINK> - To define relationships between documents and to link to an external style sheet

<MENU> - To create a menu item list

<META> - To create an automatic page jump plus also used for document information

<OL> - To create an ordered list

<OPTION> - To create options in a form menu

<P> - To create a paragraph

<PRE> - To create preformatted text

<SAMP> - To display sample text that should be used literally

<STRONG> - To strongly emphasize text, usually in boldface

<TITLE> - To create a  title of the document

<TT> - To display text in a monospaced teletype font

<UL> - To create an unordered list

<VAR> - To indicate that the text is a variable

<!--> - To insert an invisible comment

 

FORM TAGS

<FORM> - To create an input form

<SELECT> - To create a menu in a form

<TEXTAREA> - To create an area where text can be written in a form

<INPUT> - To create a form element such as an input field or a  button, etc.

 

HTML 3.2 (WILBUR) TAGS

 

HTML 3.2 tags include the entire HTML 2.0 tags.

 

<A> - To create an anchor or a link

<ADDRESS> - To indicate address

<APPLET> - To insert an applet

<AREA> - To specify the coordinates of an image map

<B> - To display text in boldface

<BASE> - To specify the URL of the document used to generate any relative URLs

<BASEFONT> - To change the default font size throughout the entire page

<BIG> - To make text bigger than the surrounding text

<BLOCKQUOTE> - To indicate that a block of text is a quotation

<BODY> - To enclosed the main section of a web page

<BR> - To create a line break

<CAPTION> - To create a caption for a table

<CENTER> - To center text, images and other elements

<CITE> - To indicate that the text is a short citation

<CODE> - To indicate text is a computer code

<DD> - To indicate a definition description in a definition list

<DFN> - To indicate the definition of a term when used for the first time

<DIR> - To create a directory list

<DIV> - To divide a page into logical sections

<DL> - To create a definition list

<DT> - To indicate a term to be defined in the definition list

<EM> - To emphasize text, usually in italics

<FONT> - To change the size, face and color of individual letters or words

<H1> - To create a level 1 header

<H2> - To create a level 2 header

<H3> - To create a level 3 header

<H4> - To create a level 4 header

<H5> - To create a level 5 header

<H6> - To create a level 6 header

<HEAD> - To create the head section of the web page

<HR> - To create a horizontal line

<HTML> - To identify the document as an HTML document

<I> - To display text in italics

<IMG> - To place an image on the web page

<ISINDEX> - To create a primitive search

<KBD> - To indicate text from a keyboard

<LI> - To create a list item

<LINK> - To define relationships between documents and to link to an external style sheet

<MAP> - To create a client-side image map

<MENU> - To create a menu item list

<META> - To create an automatic page jump plus also used for document information

<OL> - To create an ordered list

<P> - To create a paragraph

<PARAM> - To transfer a parameter to an applet

<PRE> - To create preformatted text

<SAMP> - To display sample text that should be used literally

<SCRIPT> - To create an in-line script

<SMALL> - To make text smaller than the surrounding text

<STRIKE> - To display text with a line through it (same as <S>)

<STRONG> - To strongly emphasize text, usually in boldface

<STYLE> - To set up style information

<SUB> - To create a subscript

<SUP> - To create a superscript

<TITLE> - To create the document title

<TT> - To display text in a monospaced teletype font

<U> - To underline a  text

<UL> - To create an unordered list

<VAR> - To indicate that the text is a variable

<!--> - To insert an invisible comment

 

TABLE TAGS

<TABLE> - To create a table

<TD> - To create a cell in a table

<TH> - To create a header cell in a table

<TR> - To create a new row in a table

 

FORM TAGS

<FORM> - To create an input form

<SELECT> - To create a menu in a form

<TEXTAREA> - To create an area where text can be written in a form

<INPUT> - To create a form element such as an input field or a button, etc.

 

Tags in HTML 3.2 that are not part of HTML 2.0:

 

<APPLET> - To insert an applet

<AREA> - To specify the coordinates of an image map

<BASEFONT> - To change the default font size throughout the entire page

<BIG> - To make text bigger than the surrounding text

<CAPTION> - To create a caption for a table

<CENTER> - To center text, images and other elements

<DIV> - To divide a page into logical sections

<DFN> - To indicate the definition of a term when used for the first time

<FONT> - To change the size, face and color of individual letters or words

<MAP> - To create a client-side image map

<PARAM> - To transfer a parameter to an applet

<SCRIPT> - To create an in-line script

<SMALL> - To make text smaller than the surrounding text

<STRIKE> - To display text with a line through it (same as <S>)

<STYLE> - To set up style information

<SUB> - To create a subscript

<SUP> - To create a superscript

<TABLE> - To create a table

<TD> - To create a regular cell in a table

<TH> - To create a header cell in a table

<TR> - To create a new row in a table

<U> - To place a line underneath text

 

 HTML 3.2 TAGS INCLUDING THE ATTRIBUTES

 

HTML 3.2 tags along with their attributes if applicable.

 

<A> - To create a link or anchor

·         HREF - To specify the URL of the page or the name of the anchor that the link goes to

·         NAME - To mark the specific area of the page that a link is to jump to

<ADDRESS> - To indicate address information

<APPLET> - To insert an applet

·         CODE - To specify the URL of the applet's code

·         HEIGHT - To specify the height of the applet

·         WIDTH - To specify the width of the applet

<AREA> - To specify the coordinates of an image map

·         COORDS - To give the coordinates of the area in an image map

·         HREF - To specify the destination URL of the link of an area in the image map

·         NOHREF - To make the click in the area in the image map have no effect

·         SHAPE - To specify the shape of the area in an image map

·         TARGET - To specify the window or frame that the link must be displayed in

<B> - To display text in boldface

<BASE> - To specify the URL of the document used to generate any relative URLs

<BASEFONT> - To change the default font size throughout the entire page

·         SIZE - To change the size of text throughout the page

<BIG> - To make text bigger than the surrounding text

<BLOCKQUOTE> - To indicate that a block of text is a quotation

<BODY> - To enclosed the main section of a web page

·         ALINK - To specify the color of active links

·         BACKGROUND - To specify a background image

·         BGCOLOR - To specify the background color

·         LINK - To specify the color of new links

·         TEXT - To specify the color of text

·         VLINK - To specify the color of visited links

<BR> - To create a line break

·         CLEAR - To stop text wrap on one or both sides of an image

<CAPTION> - To create a caption for a table

·         ALIGN - For placing a caption above or below the table

<CENTER> - To center text, images and other elements

<CITE> - To indicate that the text is a short citation

<CODE> - To indicate text is a computer code

<DD> - To indicate a definition description in a definition list

<DFN> - To indicate the definition of a term when used for the first time

<DIR> - To create a directory list

<DIV> - To divide a page into logical sections

·         ALIGN - To align a given section to the left, right or center

·         CLASS - To give a name to each of the sections

<DL> - To create a definition list

<DT> - To indicate a term to be defined in the definition list

<EM> - To emphasize text, usually in italics

<FONT> - To change the size, face and color of individual letters or words

·         COLOR - To change the text color

·         FACE - To change the text font

·         SIZE - To change the text size

<H1> - To create a level 1 header

·         ALIGN - To align the header

<H2> - To create a level 2 header

·         ALIGN - To align the header

<H3> - To create a level 3 header

·         ALIGN - To align the header

<H4> - To create a level 4 header

·         ALIGN - To align the header

<H5> - To create a level 5 header

·         ALIGN - To align the header

<H6> - To create a level 6 header

·         ALIGN - To align the header

<HEAD> - To create the head section of the web page

<HR> - To create a horizontal line (horizontal rule)

·         ALIGN - To align the horizontal rule

·         NOSHADE - To display the horizontal rule without shading

·         SIZE - To specify the height of the horizontal rule

·         WIDTH - To specify the width of the horizontal rule

<HTML> - To identify the document as an HTML document

<I> - To display text in italics

<IMG> - To place an image on the web page

·         ALIGN - To align the image and for wrapping text around the image

·         ALT - To give alternative text that will be displayed if the image is not displayed

·         HSPACE - To specify the amount of space above and below the image

·         LOWSRC - To specify the URL of the low resolution version of the image

·         SRC - To specify the URL of the image

·         USEMAP - To specify the image map that should be used with the referenced image (Lesson 20)

·         VSPACE - To specify the amount of space to the sides of the image

·         WIDTH, HEIGHT - To specify the size of the image so that the web page is loaded more quickly, or for scaling the image

<ISINDEX> - To create a primitive search

<KBD> - To indicate text from a keyboard

<LI> - To create a list item

·         TYPE - To specify the symbol for this and the following list items

·         VALUE - To specify the initial value for this and the following list items

<LINK> - To define relationships between documents and to link to an external style sheet

<MAP> - To create a client-side image map

·         NAME - To name the map so it can be referenced later

<MENU> - To create a menu item list

<META> - To create an automatic page jump plus also used for document information

<OL> - To create an ordered list

·         START - To specify the initial value of the first list item

·         TYPE - To specify the symbol to begin each list item

<OPTION> - To create individual options in a form menu

·         SELECTED - To make a menu option be selected by default in a blank form

·         VALUE - To specify the initial value of a menu option

<P> - To create a new paragraph

·         ALIGN - To align the paragraph

<PARAM> - To transfer a parameter to an applet

<PRE> - To create preformatted text

<SAMP> - To display sample text that should be used literally

<SCRIPT> - To create an in-line script

<SMALL> - To make text smaller than the surrounding text

<STRIKE> - To display text with a line through it (same as <S>)

<STRONG> - To strongly emphasize text, usually in boldface

<STYLE> - To set up style information

<SUB> - To create a subscript

<SUP> - To create a superscript

<TITLE> - To create the document title

<TT> - To display text in a monospaced teletype font

<U> - To place a line underneath text

<UL> - To create an unordered list

·         TYPE - To specify the symbol to begin each list item

<VAR> - To indicate that the text is a variable

<!--> - To insert an invisible comment

___________________________________________________________________

TABLE TAGS

 

<TABLE> - To create a table

·         BORDER - To specify the thickness, if any, of the table border

·         CELLPADDING - To specify the amount of space between a cell's contents and its borders

·         CELLSPACING - To specify the amount of space between cells

·         WIDTH, HEIGHT - To specify the size of the table

<TD> - To create a regular cell in a table

·         ALIGN - To align a cell's contents horizontally

·         BGCOLOR - To change the background color of a cell

·         COLSPAN - To span a cell across more than one column

·         NOWRAP - To keep a cell's contents on one line

·         ROWSPAN - To span a cell across more than one row

·         VALIGN - To align a cell's contents vertically

·         WIDTH, HEIGHT - To specify the size of the cell

<TH> - To create a header cell in a table

·         ALIGN - To align a cell's contents horizontally

·         BGCOLOR - To change the background color of a cell

·         COLSPAN - To span a cell across more than one column

·         NOWRAP - To keep a cell's contents on one line

·         ROWSPAN - To span a cell across more than one row

·         VALIGN - To align a cell's contents vertically

·         WIDTH, HEIGHT - To specify the size of the cell

<TR> - To create a new row in a table

·         ALIGN - To align the contents of the row horizontally

·         BGCOLOR - To change the color of the entire row

·         VALIGN - To align the contents of the row vertically

_____________________________________________________________________

FORM TAGS

 

<FORM> - To create an input form

·         ACTION - To give the URL of the CGI script for the form

·         METHOD - To determine how the form is to be processed

<INPUT> - To create a form element such as an input field, button, etc.

·         CHECKED - To mark a radio button or a check box by default

·         MAXLENGTH - To determine the maximum number of characters that can be entered in a form element

·         NAME - To identify the data collected by the element

·         SIZE - To specify the width of a text box or password box.

·         SRC - To specify the URL of the active image

·         TYPE - To name the type of form element

·         VALUE - To specify the data of the form element that will be sent to the server

<SELECT> - To create a menu in a form

·         MULTIPLE - To allow users to choose more than one option in the menu

·         NAME - To identify the data collected by the menu

·         SIZE - To specify the number of items initially visible in the menu

<TEXTAREA> - To create a block area for text input in a form

·         NAME - To identify the data that is gathered with the text block

·         ROWS - To specify the number of rows in the text block

·         COLS - To specify the number of columns in the text block

________________________________________________________________

 

GROUPING THE TAGS

 

Here is a breakdown of the HTML 3.2 elements into groups beginning with the elements that, if used, must be placed in the HEAD section of the HTML document.

 

ELEMENTS FOR HEAD SECTION

 

The HEAD section of a document may only contain the following elements. It is not necessary that the HEAD section will contain all the elements listed below.

 

<TITLE> - To create the document title

<BASE> - To specify the URL of the document used to generate any relative URLs

<ISINDEX> - To create a primitive search

<LINK> - To define relationships between documents and to link to an external style                                               sheet

<META> - To create an automatic page jump plus also used for document information

<SCRIPT> - To create an in-line script

<STYLE> - To set up style information

 

If any other elements or plain text occur inside the HEAD section, the browser will assume the HEAD section has ended and that the BODY section has started.

 

ELEMENTS FOR BODY SECTION

 

There are two types of elements in the BODY section: block-level elements and text-level elements. Elements that generate a new paragraph are called block-level elements such as a header tag (for example <H1> or <H2> or lower level) or a paragraph tag (<P>). Text-level elements (also called in-line elements) are elements that do not generate a new paragraph but markup text such as <STRONG>, <S>, <EM>.

 

BLOCK-LEVEL MARKUP

Headings

<H1> - To create a level 1 header (top level)

<H2> - To create a level 2 header

<H3> - To create a level 3 header

<H4> - To create a level 4 header

<H5> - To create a level 5 header

<H6> - To create a level 6 header

Lists

<DD> - To indicate a definition description in a definition list

<DIR> - To create a directory list

<DL> - To create a definition list

<DT> - To indicate a term to be defined in the definition list

<LI> - To create a list item

<MENU> - To create a menu item list

<OL> - To create an ordered list

<UL> - To create an unordered list

Text containers

<ADDRESS> - To indicate address information

<BLOCKQUOTE> - To indicate that a block of text is a quotation

<P> - To create a new paragraph

<PRE> - To create preformatted text

Others

<CENTER> - To center text, images and other elements

<DIV> - To divide a page into logical sections

<TABLE> - To create a table

<HR> - To create a horizontal line

<FORM> - To create an input form

 

TEXT-LEVEL MARKUP

 

             LOGICAL MARKUP

<CITE> - To indicate that the text is a short citation.

<CODE> - To indicate text is a computer code.

<DFN> - To indicate the definition of a term when used for the first time.

<EM> - To emphasize text, usually in italics.

<KBD> - To indicate text from a keyboard.

<SAMP> - To display sample text that should be used literally.

<STRONG> - To strongly emphasize text, usually in boldface.

<VAR> - To indicate that the text is a variable.

 

PHYSICAL MARKUP

<B> - To display text in boldface.

<BIG> - To make text bigger than the surrounding text.

<I> - To display text in italics.

<SMALL> - To make text smaller than the surrounding text.

<STRIKE> - To display text with a line through it (same as <S>).

<SUB> - To create a subscript.

<SUP> - To create a superscript.

<TT> - To display text in a monospaced teletype font.

<U> - To place a line underneath text .

 

SPECIAL MARKUP

 

<A> - To create an anchor or link.

<APPLET> - To insert an applet.

<AREA> - To specify the coordinates of an image map.

<BASEFONT> - To change the default font size throughout the entire page.

<BR> - To create a line break.

<FONT> - To change the size, face and color of individual letters or words.

<IMG> - To place an image on the web page.

<MAP> - To create a client-side image map.

<PARAM> - To transfer a parameter to an applet.

 

Forms

<INPUT> - To create a form element such as an input field, button, etc.

<OPTION> - To create individual options in a form menu.

<SELECT> - To create a menu in a form.

<TEXTAREA> - To create a block area for text input in a form.

 

Tables

<CAPTION> - To create a caption for a table.

<TD> - To create a regular cell in a table.

<TH> - To create a header cell in a table.

<TR> - To create a new row in a table.

 

 

 

HTML 4.0 TAGS

 

W3C has given the following list of elements for HTML 4.0.

 

A - Anchor

ABBR - Abbreviation

ACRONYM - Acronym

ADDRESS - Address

APPLET - Java applet