Chapter 3

Building Blocks of HTML

by Eric Ladd

• HTML and Its Relationship to SGML
  • HTML Is a DTD of SGML
  • Advantages and Disadvantages
• Conformance to the Standard
  • The Current Standard: HTML 3.2
  • Choosing a Level of Conformance
  • Testing Conformance
• HTML Constructs
  • Tags
  • Tag Attributes
  • HTML Entities
  • Two Rules Browsers Follow When Processing HTML
  • An Overview of the HTML Elements

Hypertext Markup Language (HTML) is often confused as a programming language. HTML is exactly what its name suggests: a markup language. It is a means of providing formatting instructions for presenting text-based content on the World Wide Web. These instructions are embedded right in the content, much like an editor's markup instructions are embedded in the text of a printed document. Because HTML is so critical to governing how things appear on the Web, HTML instructions are considered to be the building blocks of all Web pages.

But HTML itself also has building blocks. This chapter discusses HTML's origins, its strengths and weaknesses, and its basic components.

HTML and Its Relationship to SGML

HTML and SGML have what is best described as a "parent-child" relationship. SGML, the "parent" language, is a document description language that gives content providers a set of very general instructions they can customize to a particular type of document. By creating new custom rules for applying SGML, you can generate all sorts of different "child" languages.

HTML is one such "child" language. It applies SGML instructions according to a particular set of rules appropriate to presenting content on the Web. Thus, while HTML is well-suited for Web documents, it lacks SGML's flexibility because the rules permit only one way to apply it.

HTML Is a DTD of SGML

Stated properly, HTML is a Document Type Definition (DTD) of SGML. A DTD refers to the set of rules that govern a specific application of SGML. The first few lines of the HTML 3.2 DTD are shown in Figure 3.1.

Figure 3.1 : The HTML DTD describes an appli-cation of SGML by specifying format and function instructions for each SGML element.

DTDs are written by SGML authors according to the specifications put forward in the set of rules in use. For example, the DTD in Figure 3.1 was written in accordance with the standards determined by the W3C.

Advantages and Disadvantages

In an earlier version of his World Wide Web Research Notebook, Daniel Connolly put forward several advantages and disadvantages of deriving HTML constructs and standards from SGML.

Among the advantages of deriving HTML from SGML are

• Easier conformance testing  Since HTML is based on SGML, it is a simple matter to use an SGML syntax checker to check the conformance of HTML code to the pre-scribed standard.
• The Entity Structure Information Set  This document arose from the SGML definition of HTML and allows all HTML documents to be interpreted in a standard way.
• Interchangeability  SGML and HTML both facilitate document exchange across many platforms.

The drawbacks of using SGML to define HTML include:

• Complexity  SGML coding is meant to be interpreted by a computer and not by a person. Thus, it is difficult to look at SGML code that defines HTML and understand it.
• Generalizability  Because of SGML's complicated structure, it's possible to look at related SGML documents and make incorrect conclusions about what's being defined.
• Manageability  Writing an HTML document is meant to be a manageable task for an author. Writing SGML code is an intricate process that could easily exceed one author's ability to manage the entire document.

Conformance to the Standard

The set of rules defining HTML that are in place at a given time are called the current HTML standard. As HTML has evolved from its founding at CERN (the European Center for High Energy Physics in Switzerland) in 1989, there have been a number of HTML standards:

• HTML 0 (1989)  Some people refer to the first release of HTML as HTML 0. This version of HTML is supported by only very basic document features like paragraph breaks, heading levels, and lists.
• HTML 1 (early 1990s)  This is another informal label for HTML's first big evolutionary jump. A driving force behind this evolution was the desire to incorporate graphics into documents. It was around this time that Mosaic came on the scene and set the early precedent for graphical browsers.
• HTML 2.0 (1994)  W3C's release of HTML 2.0 was an attempt to describe the way HTML was being used at the time. It was also intended to set "basic" HTML aside as standard and to create a line of demarcation between standard tags and HTML tags that were browser-specific. In particular, the Netscape Communications Corporation was pushing the HTML "envelope" by introducing many tags that only the Netscape Navigator browser would correctly interpret. Initially, this created compatibility problems on non-Netscape browsers.
• HTML 3.0 (1995)  HTML 3.0 was a set of proposals made to the W3C that would expand HTML to include support for tables, figures, and mathematical symbols, among other things.

HTML 3.0 was never adopted by W3C because an agreement could not be reached on every proposal. Instead, W3C jumped to what they called HTML 3.2-an expanded version of HTML 2.0 that included many, though not all, of the proposals put forward in HTML 3.0.

The Current Standard: HTML 3.2

The current HTML standard is HTML 3.2, announced by W3C in May 1996. Among HTML 3.2's new features were

• Support for tables
• Attributes to control document backgrounds and text, and to link colors
• Finer alignment control inside of block and text elements
• Expanded image support, including provisions for wrapping text around an image
• Additional font level formatting styles
• Support for client-side image maps (image maps that are processed by the browser, rather than being sent to the server for processing)
• Support for embedding Java applets

Additionally, W3C announced that it was still working on proposals for including multimedia objects, client-side scripts, mathematical expressions, and style sheets (collections of font and block attributes that can be applied to a document or a portion of a document). In the cases of client-side scripting and style sheets, W3C reserved tags to support these items and suggested that details on their syntax would follow in later releases of the standard.

Choosing a Level of Conformance

When you write an HTML document, you are free to choose the level of HTML-0, 1, 2, 3, or 3.2-you want to use. For example, even though HTML 3.2 is the current standard, you may opt to use HTML 2.0 to author your documents if you're concerned that most of your audience will not have a browser that is HTML 3.2-compatible.

Indeed, your audience should be uppermost in your mind when you decide which level to use. The best rule of thumb for helping you make your choice is: Choose the highest level you can (to get the maximum amount of markup flexibility) without making your document inaccessible to your audience.

Testing Conformance

Once you've chosen an HTML level for your authoring, you can check your documents for proper syntax by using one of the many HTML validation services available over the Web. Some HTML validators can even be downloaded and run locally on your machine.

Figure 3.2 shows the WebTechs Validation Service Web page. Notice that the first option lets you choose which level of conformance you want to check. Your choices are

Figure 3.2 : The WebTechs Validation Service will check your HTML documents for any of seven different conformance levels.

• Strict  Checks to make sure that only recommended constructs are used in the document.
• Level 2  Checks your document against the HTML 2.0 DTD.
• Level 3  Checks against the proposals put forward for HTML 3.0.
• Level 3.2 (Wilbur)  Checks against the HTML 3.2 DTD from W3C.
• Mozilla  Mozilla is Netscape's friendly, fire-breathing mascot. Checking your HTML against the Mozilla DTD allows you to verify that you have used Netscape extensions to HTML correctly in your document.
• SoftQuad  Checks against SoftQuad's Rules File. The Rules File is an important part of SoftQuad's HTML authoring tool HoTMetaL PRO 2.0.
• Microsoft IE  Checks any Microsoft extensions in your document for proper usage.

Once you've chosen a level, you need only provide an URL (see Figure 3.3) or a chunk of code (see Figure 3.4) and the service takes care of the rest.

Figure 3.3 : You can feed the WebTechs Validation an URL...

Figure 3.4 : ...or a piece of HTML code for testing.

What you'll get back is a report (see Figure 3.5) of any errors in your document or, if there are no errors, an invitation to label your site as conforming to the level you tested against. WebTechs maintains several images that you can place in your documents to indicate the level of conformance you checked out at-kind of like the different colored stars you got on your assignments in grade school!

Figure 3.5 : An HTML validation service returns a report of any errors it finds. WebTechs also provides a list of all HTML tags it encounters.

HTML Constructs

Now that you have some sense of where HTML comes from, you can begin to explore the language itself. There are two main kinds of constructs in HTML: elements (also called tags) and entities.

Tags

An HTML tag is a signal to a browser that it should do something other than just throw text up on the screen in the default font. Tags are instructions that are embedded directly into the informational text of your document. They are offset from the information text by less than (<) and greater than (>) signs. For example, in the line of text:

<I>Italics</I> are used to emphasize a word or phrase.

the <I> and the </I> are HTML tags. The "I" sandwiched between the less than and greater than signs signals the browser to turn on italic formatting. The "/I" between less than and greater than signs instructs the browser to turn italics off. Figure 3.6 shows an HTML source code listing in which you can see many different tags.

Figure 3.6 : HTML tags are placed directly into the same file as your informational text.

HTML tags come in two varieties: container tags and stand-alone tags.

Container Tags  A tag is said to be a container tag if it, along with a companion tag, flanks something (usually text). The <I> tag above is an example of a container tag. <I> and its companion tag </I> cause the text they contain to be rendered in italics. Similarly, the effects of other container tags are applied only to the text they contain.

Most HTML tags are container tags in which the opening tag activates an effect and the closing tag turns the effect off.

Stand-Alone Tags  The second type of HTML tag is the empty or stand-alone tag. A stand-alone tag does not have a companion tag and does not contain anything (hence the name "empty"). An example of an empty tag that you've already encountered in this chapter is the <IMG> tag. <IMG> simply places an image on a Web page. It produces no effect that needs to be carried over any amount of text, so no </IMG> tag is required. You just put the <IMG> tag at a position in the document that corresponds to where you want the image to appear on-screen.

Tag Attributes

Every HTML tag has some keyword that indicates what the tag does. "I" for italics and IMG for image are such keywords. In the case of the <I> tag, the keyword is enough to tell a browser what it has to do: turn italics on.

The <IMG> tag is different. A browser that sees the keyword IMG will not have enough information to complete the task of placing an image on the page. At the very least, the browser needs to know where the image file resides so it can retrieve and display the image. Additionally, information on how big the image is, how much space to leave around it, whether or not it should have a border, and what to do if the image file can't be loaded, might also be helpful. This type of extra information is specified by means of tag attributes.

Attributes modify or expand on the effect of a tag by providing the browser with further instructions. They typically are set equal to some value, though some attributes stand on their own. For example, in the following expanded <IMG> tag:

<IMG SRC="images/header.gif" WIDTH=500 HEIGHT=120 HSPACE=5 VSPACE=3 
BORDER=2 ISMAP>

SRC, WIDTH, HEIGHT, HSPACE, VSPACE, BORDER, and ISMAP are all attributes of the <IMG> tag. Almost all of them are set equal to some quantity-SRC to the URL of the image file, WIDTH and HEIGHT to the number of pixels that represent the dimensions of the image, HSPACE and VSPACE to the number of pixels of empty space (also called "white space" though it is not necessarily white in color) to leave around the image, and BORDER to the number of pixels wide the image's border should be. The ISMAP attribute indicates that the image is to be part of an image map. Since the word ISMAP is sufficient to signal the browser of this, it is not necessary to set ISMAP equal to anything.

Many HTML tags, both container and stand-alone, have attributes that give document authors many more options in how they design pages. Indeed, many of the "extensions" that have been introduced into HTML come in the form of attributes to existing tags, rather than completely new tags.

HTML Entities

HTML entities are character sequences that reproduce special characters on a browser screen. Special characters come in two flavors:

• Reserved characters  To work properly, HTML has to reserve a few characters for itself. In particular, the less than sign (<), greater than sign (>), ampersand (&), and quotation marks (") are HTML reserved characters. You've seen that the less than and greater than signs are used to compose tags. In the earlier section on attributes, note in the example that the SRC attribute of the <IMG> tag is set equal to a URL enclosed in quotes. Quotes are used inside of tags to represent text that needs to be interpreted literally, so quotation marks are a reserved character as well. As you'll see later, the ampersand earns its reserved character status because it is used to start each HTML entity.
• Other-than-English language characters  A veces, p‡ginas del Web se escriben en idiomas differentes de ingl...s. See the accented characters in the previous sentence? When Web pages are done in languages other than English, it is necessary to have a way to render the entire ISO-Latin1 character set. Characters that are not on the standard English language keyboard are also represented by entities. (By the way, the first sentence in this paragraph translates to: "Sometimes Web pages are written in languages different from English.")

An HTML entity always starts with an ampersand and ends with a semicolon. What's between them determines what gets rendered on the browser screen. For example, the entity

>

produces a greater than sign on screen. The foreign language character entities are made up of the base character followed by the applicable diacritical mark. For example, the entity

ü

produces a lowercase umlauted "u." To produce an uppercase umlauted "u," just change the first u in the entity to a U.

One special HTML entity is the non-breaking space: &nbsp;. You can put a non-breaking space between two words that should not be separated by a line.

In addition to the reserved characters, foreign language characters, and non-breaking space, you can represent any character with an HTML entity. All you need to know is the character's decimal ASCII value. For example, if you needed a bullet point (¨) and you knew a bullet's ASCII value was 183, you could use the entity

·

to place a bullet on your page.

Two Rules Browsers Follow When Processing HTML

While there will always be individual differences between browsers, there are two rules they follow consistently:

• HTML is not case-sensitive.
• Extra white space is ignored.

HTML Is Not Case-Sensitive  When writing HTML tags, you are free to use any combination of uppercase and lowercase letters inside the tag. This means that each of the following tags will be interpreted the same way:

<IMG SRC="button.gif" WIDTH=50 HEIGHT=50 BORDER=0>
<Img Src="button.gif" Width=50 Height=50 Border=0>
<img src="button.gif" width=50 height=50 border=0>
<iMG SRc="button.gif" WiDtH=50 hEiGhT=50 BoRdEr=0>

The only exception to this rule is any text contained inside quotes. Text in quotes is interpreted literally by a browser.

Extra Space Is Ignored  Browsers will recognize the first space after a character, but any spaces after that are ignored. Other space characters-tabs and carriage returns-are also ignored.

This rule can be frustrating for new HTML authors who diligently place carriage returns in their documents, only to have the browser treat them like they're not there. It can also be frustrating for those who want to indent the first word of a paragraph several spaces. You can put the customary five spaces before the first word, but the browser will only acknowledge the first one.

An Overview of the HTML Elements

Tables 3.1 through 3.6 provide an overview of all standard HTML 3.2 elements-both tags and entities. Tables describing tags indicate whether the tag is a container or a stand-alone tag and what the tag's purpose is. Proper tag syntax, including the use of attributes, is discussed over the next several chapters. The entity tables list characters and their associated entities.