Carl's HTML Details 1

The Basics...
	Tags in General
	Document Tags	<HTML> ... <HEAD> ... <META> ... <TITLE> ... <BODY> ... <!--Comment-->
	<BODY> Structure	Headings ... Paragraphs ... Line Breaks ... <BODY attributes=" ">
	Text Formats	Bold and Italic ... Left-Center-Right ... <SMALL> ... <BIG> ... <FONT SIZE="x"> ... <FONT COLOR="#rrggbb"> ...<BLOCKQUOTE>
	List Structures
	Images Anchors and Links
...Beyond the Basics
	Tables ... Imagemaps ... Frames ... Animations and Scripts under construction
Writing Accessible HTML: overcoming major WWW barriers Web Designers Virtual Library: discussions, tutorials
... Creating a Web on Monon Back to ... Carl's Pages ... the MCCSC Pages

Full Page for Printing

Tags in General

HTML tags describe document "structure." The latest HTML 3.2 standards include commands and attributes which give the designer more control over document "appearance." Proprietary (i.e. Netscape Navigator and Microsoft Internet Explorer] extensions are non-standard HTML commands which may or may not achieve the desired effect in other browsers and, in some cases, may render the content unreadable. Use them judiciously, always testing their effect in multiple browsers.

HTML tags always appear inside pointed or angle brackets -- the "less than" and "greater than" symbols. Most HTML tags work in pairs around text and/or images: i.e. an opening tag (like ) to start the command and a closing tag (like ) to end the command. These tag pairs define containers. Any content within a container has the rules of that container applied to it.

HTML Coding Output
10-Minute Guide to HTML 10-Minute Guide to HTML

HTML Coding	Output
<I>10-Minute Guide to HTML</I>	10-Minute Guide to HTML

The opening "TAG," , and the closing "SLASH TAG", , contain the book title which has the Italic rule applied to it.

Tag_Pairs Thinking of tag-sets as containers will help to keep tag-pairs nested within each other, just as small cans are nested inside larger cans which can be nested inside even larger cans. If containers are overlapped, the document could be formatted in unexpected ways.

On this "page," you may scroll only as far as the sections on Tags in General and Document Tags. Please use the hyper-linked menu structure to access other topics. These pages are "clustered" to minimize loading time and contain "navigation" aids to move you back to the menus. If your browser has difficulty with the structural design of the pages, please e-mail Carl Zager, czager@mccsc.edu, with a description of the problem [including browser, version, operating system, and type of connection]. We have attempted to allow for multiple accessibility standards, but need feedback.

Back to...TOP Back to...Designing Web Pages

Document Tags

Document tags define an HTML document, divide it into two basic sections, and allow for "comments" or "remarks" to be stored along with the document.

<HTML>

The first and last tags in a document are the <HTML> . . .</HTML> pair. They define the largest container and inform a Web browser where the HTML code begins and ends. A basic Web documents is:

HTML Coding	Output
<HTML> </HTML>

Loaded into a Web browser, this code would display a blank page. Technically, an HTML document should also contain two sub-sections or containers -- the <HEAD> . . .</HEAD> and the <BODY>. . .</BODY> pairs. Doc_Tags

<HEAD>

The first of the two next smaller required containers is the <HEAD> . ..</HEAD> pair. It contains "header" information for the document. Headers are not graphic or type elements displayed within the browser window: <HEAD> is not a tag for headlines. Headers are read by the browser and by Web search tools to identify the document and create a "history" of Web sites.

<TITLE>

The <TITLE>. . .</TITLE> container pair is placed within the <HEAD> structure. Whatever is typed between the <TITLE> tags appears at the top of the browser's title bar, appears in the history list, and is used by browsers to create bookmark entries. <TITLE>. . .</TITLE> should be relatively short and descriptive of the document's contents: think of a book or magazine title rather than a PhD thesis ;-) If <TITLE>. . .</TITLE> is left empty or if <HEAD>. . .</HEAD> doesn't include that container pair, then the browser might use the actual file name forthe title. Therefore, a document file-named "ii-conce.html" could have that name appear in the history list. This, however, is poor practice, not descriptive, and causes problems with some browsers and some search tools.

<META>

A second <HEAD> element found in some pages is <META>. <META> (an "empty" tag) is read by search engines -- but not displayed anywhere on the user browser. One of the uses of the <META> tag is to "prime the pump," that is, to provide a list of "keywords" which could result in the page being a high-level "hit" when the search engine is looking for those keywords.

The <META> tag used in this manner requires two "attributes": name and value.

HTML Coding	Output
<META name="keywords" value="HTML, html, HTML_ Tutorial, markup, MCCSC">

<META> is not a required tag.

<BODY>

<BODY>. . .</BODY> comes after the <HEAD> structure and completes the <HTML> structure. Everything displayed in the browser window is within this container pair -- all of the text, graphics, and hyperlinks.

This simple "Home Page Template," described in Creating a Web Page on Monon, contains a minimum of information but creates a technically valid Web page:

HTML Coding	Output
<HTML> <HEAD> <TITLE>Your Name's Page</TITLE> </HEAD> <BODY>Your Name </BODY> </HTML>	In the browser title bar: Your Name's Page In the browser window: Your Name

Comment Tags

A programming technique is to insert notes explaining the various sections of a document. These "comment" or "remark" tags are displayed in the source, or text, version of the code but do not show up in the browser display window.

HTML Coding	Output
<!--Insert information about XYZ here -->

Your note would go where the text Insert information about XYZ here appears. The most important part of the comment tag is the exclamation point: the <! defines the comment tag. Also, there is no slash or closing tag. The comment tag is an empty tag, not a container.

You can put comments pretty much anywhere, but you shouldn't put any HTML markup within a comment tag. Most browsers "choke" -- they either mess up or crash -- on this practice. While commenting is good programming technique, it is best used to describe that which is not made obvious by the context of the document. For example:

<TITLE>Your Name's Page</TITLE>

is redundant and unnecessary. The HTML tags already identify the title. On the other hand, if you are creating a series of paragraphs or sections, comment tags can be used to remind the designer of where to add or insert information. Be judicious.

Forgot to include the exclamation point?

<--A comment tag -->

would display exactly as typed: <--A comment tag -->

There is disagreement between browsers about the syntax of the "tagging" structure itself: Some will recognize

<!A comment tag >

that is, without the "--" double dashes at beginning and end. At present, it is best to include the Standard Generalized Markup Language (SGML) pattern

in order to avoid the comment tag being displayed by the browser.

Back to...TOP Back to...Designing Web Pages

Last modified: 22 February 1998
Comments and/or Questions? Carl Zager: czager@mccsc.edu