Structuring Tags

Return to Main Page of Ted’s HTML Tutorial

An HTML source code document typically contains certain “structuring” tags which make up the basic “skeleton” of the source code document. Of the following HTML tags, although none of them are required, 1) the dark blue tags are strongly recommended, and 2) the light blue tags are optional (click on any tags to read more about them):

<HTML>

<HEAD>
<TITLE>Document XYZ</TITLE>
<BASE>
<META>
</HEAD>

<BODY>

Text, Hyperlinks, Graphics, Animations, etc. </BODY>

</HTML>

You can gather information about the home page of a web site I created if you go here: Web Page Example.

Here is what the non-empty HTML, HEAD, and BODY tag pairs are for:

<HTML>source code document</HTML>: identifies the file as an HTML source code document, indicating where it starts and ends.
<HEAD>source code document header</HEAD>: identifies the start and end of the header section of an HTML source code document. (Go to <HEAD> & </HEAD> to see parameters which can be placed between the <HEAD> & </HEAD> tags.)
<BODY>source code document body</BODY>: identifies the start and end of the body section of an HTML source code document. (Go to <BODY> to see parameters which can be placed inside the <BODY> tag.)

Between the <HEAD> & </HEAD> tags, other non-empty and empty tags may be included:

<TITLE>source code document title</TITLE>: located between the <HEAD> & </HEAD> tags; denotes the name displayed in the title bar of the web browser which is being used to view that page. The words in the title will attract a search engine looking for that particular topic. Furthermore, when someone adds that page to his/her “Favorite Places” or “Bookmark” list, the title name is what will appear on the list.
<BASE>: (optional tag) located between the <HEAD> & </HEAD> tags; denotes basic information pertaining to the hyperlinks in that document. (Go to <BASE> to read more about the BASE tag.)
<META>: (optional tag) located between the <HEAD> & </HEAD> tags; can be used to identify the creator, description and keywords of the page, to indicate what HTML specifications the page follows, to load the most recent version of a web page (by using an old expiration date), and to refresh the page automatically (that is, to load successive pages, as in a slideshow), among other attributes. (Go to <META> to read more about META tags.)

The empty <BASE> tag may contain within it further parameters as part of the command:

HREF="URL": designates the single URL (Uniform Resource Locator or web address) to which all hyperlinks in that document will go when activated (unless overridden). When all the hyperlinks in a document target the same URL, it is beneficial to include this URL only once in the <BASE HREF="URL"> tag so that it does not have to be listed for every hyperlink. The <BASE HREF="URL"> can be overridden by specifying a different URL in one or more hyperlinks in the document; but an overriding URL should be a complete URL (that is, <HREF="http://...">), or else the link may not connect properly.
Commonly, when using the base hypertext reference (BASE HREF) in a primary document, another document will be designated (e.g., <BASE HREF="http://www.tedmontgomery.com/bblovrvw/NIVBible/Rev.html">). In such a case, a hyperlink within the primary document will contain only a “#name” attribute (e.g., <A HREF="#20">), indicating a specific location in the other document specified by the URL.
It also is permissible for the <BASE HREF> to designate a certain directory (e.g., <BASE HREF="http://www.tedmontgomery.com/bblovrvw/NIVBible/">). In this case, a hyperlink within the primary document commonly will contain only the name of a specific document within the designated directory (e.g., <A HREF="Rev.html">). Note: When designating a directory with the <BASE HREF>, it is important to include a slash mark (“/”) at the end of the URL.

Note: With some browsers, when a <BASE HREF> has been designated, the URLs within <IMG SRC> tags in the document are affected as well. That is, graphic images may not appear unless they are located in the directory specifed by the <BASE HREF>.
TARGET="frame name": located inside of a frameset, points to a specific frame defined with that “frame name.” Documents, which are called up by hyperlinks in the document with the <BASE TARGET="frame name">, will appear in the specified frame when those hyperlinks are activated. That is, activated hyperlinks in document #1, containing the <BASE TARGET="frame name"> tag (and which, itself, has been brought into one frame of a frameset), will call up documents #2, #3, #4, etc. Then these documents will appear, in turn, in the frame specified with the “frame name” in a frameset.
If a given hyperlink (<A HREF>) has a different TARGET="frame name" specified within it, the latter frame name will override the frame name specified in the <BASE TARGET> tag, and the document will appear in the frame with the overriding frame name.
Every frame name must begin with an alphanumeric character (letter or number) except for the “special target names” (_BLANK, _SELF, _PARENT, and _TOP), each of which begins with the “_” character.

A search engine (such as Google, Yahoo, AltaVista, Lycos, WebCrawler) searches the web to find pages which contain “keywords” specified by someone utilizing the search engine. <META> tags, embedded in the source code of a web page, are elements that provide information to a search engine about that web page or web site when the search engine is looking for the “keywords” specified by a web user. (The <META> tag information is not displayed on a browser while viewing the page.) There are two main categories of <META> tags: 1) “name” tags (discussed next) and 2) “http-equiv” tags (discussed later). Examples will be included.

The four most commonly used <META NAME> tags are 1) author, 2) description, 3) keywords, and 4) robots (a separate <META> tag should be used for each):

NAME="AUTHOR"|"DESCRIPTION"|"KEYWORDS"|"ROBOTS": elements that provide information about that web page or site. The information is not displayed on a browser; rather, it is used by web search engines when looking for information entered by a web user. Following a “name” parameter, a complimentary “content” parameter, with information about the “name,” must be included. "AUTHOR" CONTENT="name of the person or people who created (authored) the page".
"DESCRIPTION" CONTENT="brief (usually 25 words or less) description of the page or of the web site if that page is the site’s primary home page". When a search engine displays a link to that page, the description also is visible for the person doing the search to read.
"KEYWORDS" CONTENT="major (key) words included on that page or at that web site". All keywords should be separated by commas, and there should be no period after the final keyword. When a person searching for information types keywords into a search engine, the search engine will locate pages (which have been registered with that search engine) in which these keywords have been listed.
"ROBOTS" CONTENT="index, follow" (the default) or "index, nofollow" or "noindex, follow" or "noindex, nofollow". Most web search sites use robots—programs that go to a website and automatically click on each link on the home page and on every other page at the site, indexing everything that they find. The behavior of these robots can be controlled by specifying one of the following:
"index, follow" (the default): robots will index the home page and all pages to which the home page is linked.
"index, nofollow": robots will index the home page but will not index any pages to which the home page is linked.
"noindex, follow": robots will not index the home page but will index any pages to which the home page is linked.
"noindex, nofollow": robots will index nothing.
"COPYRIGHT" CONTENT="copyright © year(s) by author" if the page’s author wishes to copyright it.

Go to <META> tag list to see a list of the <META> tags included on the page you are viewing now.

When a web page is requested from a web server, the server first checks for the existence of the page. If the page does exist, the server then sends a block of “HTTP headers” to the browser, followed by the requested page. Here is an example of an “HTTP header block” retrieved by my browser for my homepage (located at http://www.tedmontgomery.com):

HTTP/1.0 200 OK
MIME-Version: 1.0
Date: Tue, 15 Feb 2000 15:30:20 GMT
Server: NaviServer/2.0 AOLserver/2.3.3
Content-Type: text/html
Content-Length: 11558
Last-Modified: Thu, 10 Feb 2000 10:55:35 GMT
Version: Thu, 10 Feb 2000 10:55:35 GMT The block of HTTP headers contains information such as the current date and time, the type of web server it is, and other specifications. Using the HTTP-EQUIV (“hypertext transfer protocol equivalent”) parameter in a <META> tag, the information in a header can be extended. Note: The term “HTTP headers” should not be confused with HTML “header” tags (<HEAD> & </HEAD>). They are not the same.

The two most commonly used <META HTTP-EQUIV> tags are 1) expires and 2) refresh (a separate <META> tag should be used for each):

HTTP-EQUIV="EXPIRES"|"REFRESH": elements that control or direct the actions of web browsers (just as normal HTTP headers do) and are used to refine even further the information which is provided by the actual headers. <META HTTP-EQUIV> tags are designed to affect a web browser in the same manner as actual headers. Certain web servers may translate <META HTTP-EQUIV> tags into actual HTTP headers automatically so that a user’s web browser will see them simply as normal headers. "EXPIRES" CONTENT="Mon, 31 Dec 2001 23:59:59 GMT". A browser stores a copy of a visited web page in a cache (usually located in the “Temporary Internet Files” folder) on the computer’s hard drive. The next time that page is visited on the web, the browser recognizes it and, instead, displays the version of the page which has been saved in the computer’s cache. This enables the page to load more quickly, because it is being retrieved directly from the user’s computer rather than from the web.
If a web page includes a <META HTTP-EQUIV="EXPIRES" CONTENT="old date"> tag, with an old (expired) date defined in the CONTENT parameter, the browser will retrieve the page directly from the web each time it is requested rather than from the computer’s cache. When the contents of a web page are modified frequently, this tag is helpful because it will cause any browser to display the most recent version of the page rather than any previous version which might have been stored in a computer’s cache. The “expiration date” used can be any date which already has passed, and it must be written in the form listed above.
It is not a good idea to place the latter tag in the source code of a page on which there are numerous graphic images. This is because the graphics will have to upload into someone’s browser each and everytime that person visits the page (since the graphics have not been stored in the cache on that person’s computer). If the page takes a long time to load into a browser, people revisiting the page may become impatient and stop visiting. "REFRESH" CONTENT="time in seconds; URL=newpage.html". When a browser retrieves a page from the web, it is possible to direct the browser, after a certain length of time, to open another page automatically. A similar tag can be included on the new page to open yet another page, and so on. This method is useful, for instance, in making a “slideshow” where different photos are displayed on a sequence of pages.
If a web page includes a <META HTTP-EQUIV="REFRESH" CONTENT="number of seconds the page is viewed; URL of the next page"> tag, the browser will open that page, display the page for the designated number of seconds (“10” seconds is a common amount), and then skip automatically to the page which is specified in the URL.

The following shows all the HTML tags (including the <META HTTP-EQUIV="REFRESH" CONTENT="time URL=newpage.html"> tag) for the three pages of a brief slideshow. (Note that the last page will return the browser to this page.) Click on Slideshow to see the show in action (each picture will be displayed on your browser for 10 seconds).

Page 1 (page1.html):
<HTML>

<HEAD>
<TITLE>Slideshow: Page 1</TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT="10; URL=page2.html">
</HEAD>

<BODY TEXT="713D2D" BGCOLOR="#E1CD9D">
<CENTER>
<H1>Camel Rock near Tesuque, New Mexico</H1>
<IMG SRC="graphics/camelrck.jpg" WIDTH="340" HEIGHT="255" ALT="Camel Rock near Tesuque, NM">
</CENTER>
</BODY>

</HTML>

Page 2 (page2.html):
<HTML>

<HEAD>
<TITLE>Slideshow: Page 2</TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT="10; URL=page3.html">
</HEAD>

<BODY TEXT="713D2D" BGCOLOR="#E1CD9D">
<CENTER>
<H1>Rock near Chimayo, New Mexico</H1>
<IMG SRC="graphics/chmyorck.jpg" WIDTH="340" HEIGHT="255" ALT="Rock near Chimayo, NM">
</CENTER>
</BODY>

</HTML>

Page 3 (page3.html):
<HTML>

<HEAD>
<TITLE>Slideshow: Page 3</TITLE>
<META HTTP-EQUIV="REFRESH" CONTENT="10; URL=../strcture.html#slideshow">
</HEAD>

<BODY TEXT="713D2D" BGCOLOR="#E1CD9D">
<CENTER>
<H1>Rock near Nambé, New Mexico</H1>
<IMG SRC="graphics/namberck.jpg" WIDTH="340" HEIGHT="255" ALT="Rock near Nambé, NM">
</CENTER>
</BODY>

</HTML>

The following is a list of all the <META> tags used on the page you are viewing now:

<HTML>

<HEAD>
<TITLE>HTML Structuring Tags</TITLE>

<META NAME="AUTHOR" CONTENT="Ted M. Montgomery">

<META NAME="DESCRIPTION" CONTENT="This page is part of Ted's HTML Tutorial. Here, you will learn about various aspects of HTML Structuring Tags.">

<META NAME="KEYWORDS" CONTENT="HTML tutorial, <HTML>, <HEAD>, <TITLE>, <BASE>, <META>, author, description, keywords, CONTENT, http-equiv, expires, revisit, revisit-after, robots, <BODY>, links, LINK, active links, ALINK, visited links, VLINK, background color, BGCOLOR, BACKGROUND, , <BR>, <HR>">

<META NAME="ROBOTS" CONTENT="index, follow">

<META HTTP=EQUIV="EXPIRES" CONTENT="Mon, 31 Dec 2001 23:59:59 GMT">
</HEAD>

The <BODY> tag may contain within it further parameters as part of the command, each designating the particular colors of various elements of a web document (for more on color coding, go to Color Coding):

TEXT="COLOR"|"#COLOR CODE": indicates the color of the text of a web document (the default text color is black).

LINK="COLOR"|"#COLOR CODE": indicates the initial color of the “unvisited” hyperlinks in a web document (the default unvisited link color is blue).

ALINK="COLOR"|"#COLOR CODE": optional; indicates the color of a hyperlink for the moment or so after it has been “activated” (there is no default activated link color).

VLINK="COLOR"|"#COLOR CODE": indicates the color of the previously activated hyperlinks in a web document, showing which other web pages or sites have been “visited” or called up (the default visited link color is purple or, on some browsers, olive).

BGCOLOR="COLOR"|"#COLOR CODE": indicates the uniform background color of a web document (the default background color is white or, on some browsers, gray).

BACKGROUND="backgrnd.gif or .jpg": indicates the background design of a web document. The design is taken from a graphic file, such as backgrnd.gif or backgrnd.jpg. Note: If both the BGCOLOR and BACKGROUND parameters are included, the browser will display the BGCOLOR first until the BACKGROUND loads completely.
BGPROPERTIES="FIXED": causes the BACKGROUND on the page to remain fixed (non-moving) while scrolling up or down the page. Note: Some browsers do not recognize the BGPROPERTIES parameter

Most browsers recognize some standard color names (such as AQUA, BLACK, BLUE, CHARTREUSE, FUCHSIA, GRAY, GREEN, LIME, MAROON, NAVY, OLIVE, ORANGE, PURPLE, RED, SILVER, TEAL, WHITE, YELLOW, and others). Otherwise, the color code number (preceded by the “#” character) can be used. For more on color coding and color names, go to Color Coding.

Here is the <BODY> code of the initial page (“Ted’s Comprehensive HTML Tutorial”) of this portion of my web site:

<BODY TEXT="#FFFF80" LINK="#FFC080" ALINK="#E8A868" VLINK="#C08040" BACKGROUND="graphics/HTMLback.gif" BGCOLOR="#2F6790">, where “HTMLback.gif” is a background I created myself. Note: Some browsers will not display the BACKGROUND. For those that do, the BGCOLOR will appear first until the BACKGROUND is loaded.

Here are examples of “empty” tags, so-called because they occur alone and not as part of a pair:

 (“comment” tag): allows the author to type a comment which helps clarify something within an HTML source code document. This comment will not appear in the marked up web document on the browser.
<BR> (“break” tag): forces a line break at that point, causing the text after the break to be displaced down one line. See <BR>, in the “Text Modification Characters & Tags” section, for more information on this tag.
<HR> (“horizontal rule” tag): creates an engraved, shaded horizontal line at that location.

The <HR> tag may contain within it further parameters as part of the command:

WIDTH="W": defines the horizontal width “W” of the line on the page. “W” can be expressed as a percentage “W%” (of the total width of the page) or simply as a whole number without the percent (indicating the number of pixels wide). The default width is 100%.

SIZE="H": defines the vertical height “H” of the line on the page. “H” can be expressed as a whole number from 0 to 200 (indicating the number of pixels high). The default size (height) is 2 pixels. Note: If the size (height) of a horizontal rule is expressed as a percentage (H%), a browser will ignore the “%” sign and make the line H pixels high.

ALIGN="LEFT"|"CENTER"|"RIGHT": positions the line at a specific location on the page. "LEFT" aligns the line with the left margin of the page.
"CENTER" (the default) centers the line horizontally on the page.
"RIGHT" aligns the line with the right margin of the page.

NOSHADE="NOSHADE": changes the engraved line into a solid line or strip (whose color will be either gray or else the same as the computer screen’s background color, depending on the browser). Without the NOSHADE parameter, the shaded line appears engraved into the page.

COLOR="COLOR"|"#COLOR CODE": indicates the color of a horizontal rule.

Here are some examples of horizontal rules:

<HR> will yield:

<HR NOSHADE="NOSHADE"> will yield:

<HR WIDTH="60%" SIZE="15" ALIGN="LEFT"> will yield:

<HR WIDTH="300" SIZE="50" NOSHADE="NOSHADE"> will yield:

Note: Some browsers will display a horizontal rule having a NOSHADE="NOSHADE" parameter with squared ends, and some will display it with rounded ends.

<HR WIDTH="600" SIZE="30" ALIGN="RIGHT"> will yield:

<HR WIDTH="7" SIZE="70" ALIGN="CENTER"> will yield:

Proceed to Color Coding

Return to Main Page of Ted’s HTML Tutorial