XHTML Basics: Intro


XHTML vs. HTML and Why We Care

 

Intermediate web production is all about moving past HTML to the more precise, manageable, and World Wide Consortium (W3C) validated current standards for basic web coding. While HTML coding was very forgiving (it didn't require a doctype, charset, namespace, closing tags, or avoidance of dpereciated tags), it also requires more and more tweaking to work with multiple browsers and quirks.

 

As a result, this class, and your future code production, should focus on XHTML with CSS, which is more robust that HTML was. It has also been designed by the W3C to merge the best of HTML and XML (Extensible Markup Language), to work fluidly with the easy-to-organize CSS, and to be able to be parsed by every browser with as much uniformity in interpretation as possible.

 

XHTML is stricter than HTML, because it absolutely requires:

 

  • A doctype Marchlaration
  • Use of html, head, and body tags
  • All tags to be closed
  • Use of quotes around values
  • Use of all lower case elements, attributes, and predefined values
  • The ALT attribute and value is required for all images
  • Avoidance of depreciated tags that are being phased out by the W3C.

 

While this can sound pretty tough, it actually is easy to learn, results in organized and consistent code, allows clean validation, and keeps you away from depreciated tags and quirky practices that give browsers (and you) huge headaches.

 

Some Basics

 

doctype

Currently, the best doctype for new and developing websters to use is Transitional, which helps browsers assume the web page has been designed using standards mode. It is also more forgiving that strict and allows for the occasional ack and creep in of a borderline depreciated tag:

 

<!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

Charset

The basic charset (which is how browsers interpret the character you use in your xhtml code) is UTF-8. This focuses on ASCII characters:

 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

The more universal charset in America these days is ISO-8859-1, since it allows for characters to be used from North America, Western Europe, Latin America, the Caribbean, Canada, and Africa:

 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

 

Either one is acceptable for this class.

 

Tag Building Blocks

 

Tags have three components:

  • Element: <table width="100%">
  • Attribute: <table width="100%">
  • Value: <table width="100%">

 

Block and Inline elements

 

Block elements are structural pieces of your web pages, and are diplayed on their own line - DIV.

 

Inline elements often appear inside block elements, and are displayed in individual lines, not generating a new paragraph, like SPAN and STYLE.