XHTML Basics: A Programmer's Perspective

XHTML Basics: A Programmer's Perspective

My Web Markup page gives the basics of where XHTML falls in the universe of web markup standards.

Why XTHML over HTML? Because you are a programmer, damnit! It has become the emerging standard because it is better parsing (it is valid XML!), better standards, and cooler because you hold it over the heads of the graphic designers working with you! (Okay, they have their skills, we have ours.)

The Markup

XHTML markup is tag-based. That is, there is a start tag, data, and an end tage. Alternately, there is a tag-only syntax when there is no data associated with the tag.

<tagname>data</tagname>
or
<tagname />
or
<tagename></tagname>

Each tag can optionally have attributes, with and without attribute data.

<tagname attribute="data" attribute="data" attribute>data</tagname>
or
<tagname attribute="data" attribute="data" attribute />
or
<tagname attribute="data" attribute="data" attribute></tagname>

Use a space before the “/>” so you won’t confuse the parsing.

Tagname is the XHTML markup tag. Tags are nested, like XML, but not all tags have a “CDATA” (data) part. Some formatting tags still exist in XHTML but the idea is you should not use them. Some of these are the line break (<br />) and horizontal rule (<hr />).

Skeleton XHTML Page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>cyberdesk</title>
 <link rel="top" href="http://cyberdesk.com/" title="Cyberdesk Home" />
 <link rel="shortcut icon" href="http://cyberdesk.com/favicon.ico" type="image/x-icon" />
 <meta name="description" content="blah blah blah" />
 <meta name="keywords" content="keyword, keyword, keyword" />
 <meta name="Creator" content="Your Name" />
 <meta name="Publisher" content="Your Name" />
 <meta name="Robots" content="All" />
 <meta name="Revisit-After" content="1 Day" />
 <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
 
 <link rel="StyleSheet" href="/style.css" type="text/css" />
 <style type="text/css">
  body {
    font: 90% "Lucida Grande", Verdana, Lucida, Helvetica, Arial, sans-serif;
    background-color: White;
    color: Black;
    margin: 0;
    padding: 0;
  }
 </style>
 
 <script language="javascript" type="text/javascript" charset="utf-8" src="/scripts/script.js"></script>
 <script type="text/javascript"><!--
function BlogThis() {
  Q='';
  x=document;
  y=window;
  if(x.selection) { Q=x.selection.createRange().text;
  } else if (y.getSelection) {  Q=y.getSelection();
  } else if (x.getSelection) { Q=x.getSelection();}
  popw = y.open('http://www.blogger.com/blog_this.pyra?t=' + escape(Q) + '&u=' + escape(location.href) + '&n=' + escape(document.title),'bloggerForm','scrollbars=no,width=475,height=300,top=175,left=75,status=yes,resizable=yes');
  void(0);
}
--></script>
 
</head>
 
<body>
   Content here!
   <a class="navlink" href="javascript:BlogThis();">BlogThis!</a>
</body>
</html>

XHTML Basics: A Programmer's Perspective

The Markup

Skeleton XHTML Page

Style

Data-based Web Pages