XHTML—the beginning

Shawn Olson

Posted Dec 10, 2002
Last Updated Oct 30, 2011

When you start designing a web page you have the purpose of displaying an idea or image to people over the Internet. As the web designer, you have to know about the backbone of a web page; you must know the area of a web page of which most people are ignorant or take for granted. You must know the language of a web page.

Don’t get scared when you find out that you must learn a language to make a web page. The language of which we speak here is not like a human language. It’s really not even a language, as in a language we use to communicate ideas. This language, called the extensible hypertext markup language (XHTML), does not communicate ideas. It is really only a formatting scaffold for presenting ideas. XHTML exists to logically define types of information so that a browser can properly display information. You can, in reality, write the code for a web page that looks like this:

<html> <body> This is a web page. </body> </html>

The code above would create a web page. A browser seeing this code would simple display the words, "This is a web page.” Using tags, a web designer logically formats his information so that browsers can properly format how the page looks. In the sample above, the <html> is a tag. So is the <body>. Everything contained within the <> signs is a tag. Think of tags as being labels for your information. Tags and information are written to an HTML file (simply a text file with the file-type extension ".html”), from which a browser properly displays information.

Basic Tag Rules There are some simple rules to follow with tags in XHTML. First, all tags must be lowercase. While older HTML standards allow upper- or lowercase tags, and browsers still render properly either way, XHTML requires all lowercase. <HTML> is improper. <html> is proper. Second, you must properly close all tags. Notice that in the above example, for each tag there is a corresponding tag following it with a "/”. This closes the tag. All tags that contain information (such as <body>) have a closing tag (such as </body>). Some tags such as the <hr/> (for creating a horizontal rule) do not contain information, and their closing element "/” is within the single tag. <hr></hr> is improper. <hr/> is proper. Third, you must properly nest your tags. Nesting is placing a tag element inside another tag element. Notice in the example above that the <body> is after the <html>. Since <body> is inside the <html></html> container tag, so too must the </body> reside within the <html></html> container tag. Think of the <body></body> object as the "child” of the <html></html> object. All "children” objects must reside within their "parent” objects. Below is an example of improper nesting:

<html> <body> This is a web page. </html> </body>
 

This </body> tag should go before the </html>.

The Web Page There are three main parts to a web page: the XHTML container tag <html></html> is the main element that tells a browser to interpret all contained information as a web page. The two main parts within the <html></html> are the <head></head> and <body></body>. The <head></head> contains information that is largely invisible to a web page viewer. Information contained within the head is devoted, in part, to search engine utility. Most of the objects belonging in the <head></head> will be addressed in a later article. For now it is fine to limit ourselves to the <title></title> tag. This tag will display the title of the document at the top of most browsers, and will state the name of your page in shortcut links. The <body></body> is our current concern. This element contains all the information that is rendered on a web page (except for the information displayed in the <title></title>). Almost all tags in XHTML are used within the <body></body> element.

<html> <head> <title>My Web Page</title> </head> <body> This is my web page. </body> </html>
 

A Web Page Let’s assume you want to make a web page to show off your talents as a comedian, and you want to share a couple jokes you’ve created. First you would open a text editor such as Notepad or Microsoft Word. You could begin by typing the following information.

<html> <head> <title>My Comedy Page</title> </head> <body> These are my jokes. Why did the balloon lose his friends? He blew up on them. HA! </body> </html>
 

Type this into your text editor and hit "File/Save As”. Save the file as an HTML document. (In Notepad, you will have to choose "All Files” as the "Save as type” and then type ".html” after your filename.) Now this page would render as a real web page if you open it in a program like Internet Explorer or Netscape Navigator. But, ignoring it’s content, it’s a truly boring page. You could take this page and display it with tag formatting to help increase the visual appeal. Using the <h1></h1> and <p></p> (heading and paragraphs tags, respectively), you could better present your page:

<html> <head> <title>My Comedy Page</title> </head> <body> <h1>These are my jokes.</h1> <p>Why did the balloon lose his friends? </p> <p>He blew up on them. </p> <p>HA! </p> </body> </html>

Now you are learning how to format your information. Future installments in this series will teach you how to use cascading style sheets to create the exact look you want for each type of information. By using style sheets, you can define what fonts, colors, borders and margins are used for each type of element that is in your website. Properly formatting your information with XHTML tags helps you present your information. While your presentation options are limited before you learn about style sheets, you can begin to see the purpose of tags by understanding how tags divide types of information. You want your viewers to be able to discern the difference of a heading from a paragraph; tags are used to show those differences.

Other important tags you should learn now are:

  • <img/> This Image Tag allows you to place an image into your document.
  • <a></a> The Anchor Tag allows you to make links to other pages or websites.
  • <hr/> The Horizontal Rule tag creates a horizontal rule, effectively dividing areas of your page.
  • <br/> The Break tag breaks a line and starts text on the next line.
  • <table></table> Table tags allow you to display information in an organized table, such as in a spreadsheet.
  • <tr></tr> Table Row Tags designate a new row within a table.
  • <td></td> Cell Tags create cells within a table row.

The tags above will be demonstrated in later parts to this series.

Comment

No HTML Tags are permitted.

Wall Worm plugins and scripts for 3ds Max