Understanding HTML Basics

[Previous] [Next]

Before we begin using the basic components of an XML document to create Web applications, we must cover some basics of HTML documents. Unlike XML, HTML markup does not always define content within the markup. For example, HTML includes a set of tags that do not contain anything, such as <hr>, <img>, and <br>. These elements do not have end tags in HTML; if you include end tags with these elements, the Web browser will ignore them.

Logical and Physical HTML Elements

For the most part, elements and attributes in HTML can be divided into two groups: physical and logical. A logical HTML element or attribute is similar to an XML element. Logical elements and attributes describe the format of the content enclosed within the tags. For example, here the text Hello, world should be displayed with a font size of 3:

 <font size="3">Hello, world</font> 

The actual size of the font will depend on the browser settings and the user's preferences. With logical elements, the Web browser will use the markup elements and attributes to identify what the content is and then display the content accordingly.

Physical elements and attributes do not give the user any options as to how content is displayed—they define exactly what the content will look like. Rewriting our font size example using a physical attribute, we have:

 <font size="12 pt">Hello, world</font> 

The Hello, world text will now always be displayed in 12 point type, regardless of the user's preferences. The attribute no longer defines the content as being of a certain format that the application will interpret; it simply sets the attribute to a value that the application will use.

When you develop XML applications, you will want to define elements and attributes that give the user more control, such as logical HTML elements and attributes. These elements and attributes will be used by the application to identify the content contained within the element. Once the application understands what the content is, it can determine how to use the content based on user preferences (for example, setting the default size 3 text to 14 point text in the browser), the structure of the database (for example, in one corporation a customer's last and first names might be saved as a single entity called CustomerName, and in another corporation the same information might be saved as LName and FName), and so on. As we create Web applications using XML throughout this book, we will use logical elements and attributes whenever possible.

The main problem we will have with building Web applications using XML is that most people are working with browsers that only understand HTML. We'll need some way to get the non-XML browsers to view XML code as HTML code so that the pages will render properly in the browser. When cascading style sheets (CSS) were introduced, they also faced the same problem: how to render documents properly in non-CSS browsers. The ingenious solution that was used for CSS documents can also be used for XML. Let's take a look at how CSS can work in both browsers that understand style sheets and browsers that do not.

CSS and Non-CSS Browsers

When the CSS standard was created, a great number of people were still using browsers that did not support style sheets (many still are). Web developers need to be able to create Web applications using style sheets for the new browsers and yet still have these applications present properly in browsers that do not support style sheets.

This might sound like an impossible task, but it is actually quite simple. Web browsers will ignore any tag or attribute they do not recognize. Thus, you could put the following tag in your HTML code without causing any errors:

 <Jake>This is my tag</Jake> 

The browser will ignore the <Jake> tag and output This is my tag to the browser. Taking advantage of this browser characteristic is the key to using style sheets.

A style sheet is a document that defines what the elements in the document will look like. For example, we can define the <h1> tag as displaying the normal font at 150 percent of the default h1 size, as shown here:

 <style> h1 {font: normal 150%} </style> 

NOTE

---

The style definitions do not have to be contained in a separate document; you can place the style definitions in the same document as the HTML code that will use these definitions. To support both CSS browsers and non-CSS browsers, it's recommended that the style sheet be referred to as a separate document.

In browsers that support style sheets, this definition will display all content within <h1> tags in the document in the normal font at 150 percent of the default h1 size. If the style definition is saved in a document named MyStyle.css, you can use this style in your HTML page by including the following line of code:

 <link rel=MyStyle.css> 

Browsers that do not support style sheets will not know what the <link> tag is, nor will they know what the rel attribute is. These browsers will simply ignore the <link> tag and use the default settings associated with the h1 element. Browsers that do support style sheets will recognize the tag, access and read the style sheet, and present the h1 elements as defined in the style sheet (unless the style definition is overridden locally in the HTML page).

A detailed discussion of style sheets is beyond the scope of this book. The specification for the latest version for CSS can be found at http://www.w3.org/TR/REC-CSS2/. You can use style sheets to do much more than simply override the standard HTML tags.

XMLizing HTML Code

To "XMLize" your HTML code, that is to convert HTML to XML, you will begin by creating a Web document using XML elements that will default to standard HTML tags. To do this, you will have to close all HTML tags. For example, if you use the tag <br> that does not have an end tag in the document, you will have to add one, as shown here:

 <br></br> 

Because the Web browser does not know what the </br> tag is, it will ignore it. You could not use the following empty element XML notation, however, because non-XML browsers would not be able to identify the tag:

 <br/> 

Adding end tags is one of several tasks that will need to be performed to create a well-formed document—in other words, the first step in XMLizing your HTML is to make the document well formed.

HTML Quirks

HTML contains many features that can make it a difficult language to use. For example, the following code would work but probably would not give you the results you wanted:

 <h1>Hello, world <p>How are you today?</p> 

The missing end tag </h1> is added implicitly at the end of the document, meaning that both lines would be presented in the h1 style, not just the first line. Another problem with HTML is that there is no easy way to create an application to validate HTML documents to find errors such as the one shown above.

Keeping your document well formed will help prevent these types of problems. When you create a document, you will need to make sure that tags are positioned correctly so that you get the results you want. With these HTML basics in mind, you are ready to build an XML Web application using XML Notepad.