XHTML : The Basics

XHTML : The BasicsMany of you may have heard of XHTML but your wondering what it is and why use it? Well I will try my best to explain what it is and how to use it correctly. XHTML stands for Extensible HyperText Markup Language, and is quoted by W3.org like this:

The XHTML family is the next step in the evolution of the Internet.

To start using XHTML you firstly need to give your page a DTD (Document Type Definition). There are 3 document types when it comes to using XHTML, these are strict, transitional and frameset. You can find a list of all doctypes on the doctype page.

When writing your XHTML you must always remember to keep all attributes in lower case and put all attribute values in quotes. E.G.

<TABLE WIDTH=200> - Incorrect
<table width="200"> - Correct

Line Breaks

Line breaks are coded differently in XHTML, this is because all tags in XHTML must be closed; it is done in the following way:

<br />

Horizontal Rule

This is also closed in the same way as the line break.

<hr />

ID attribute

In HTML there were various tags that had to be given a name attribute, such as a, applet, form, frame, iframe, img, and map. When using XHTML the attribute name is deprecated (obsolete / not used anymore) and is replaced by the id attribute instead. E.G.

<iframe src="page.html" id="frame_id">

There are certain tags that can't contain certain other tags, for instance, the a tag can not contain another a tag inside of it. Here is a list of the others:

a must not contain other a elements. pre must not contain the img, object, big, small, sub, or sup elements. button must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements. label must not contain other label elements. form must not contain other form elements.

If you are using an external stylesheet with your XHTML (which you probably will and should) then you must remember that instead of using the code:

<link rel="stylesheet" type="text/css" href="stylesheet.css">

Which has no closing tag, you must instead use the code:

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

Meta Tags

When you create your HTML document you must always remember to include the charset META tag. You have already included it in your previous HTML page but this will not validate because like the BR and HR tags it also needs to be closed. Here are a few examples of HTML meta tags.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="robots" content="index,follow">
<meta http-equiv="Content-Language" content="EN-GB">

Which are all going to be invalid with XHTML, here's how you close these tags:

<META HTTP-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> Wrong
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> Correct

This should get you well on your way to creating valid XHTML pages and away from the old HTML.


Close    To Top
  • Prev Article-Web Design:
  • Next Article-Web Design:
  • Now: Tutorial for Web and Software Design > Web Design > HTMLCSS > Web Design Content
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Geek Tutorial
     

    Blogging Tutorial

      RSS Tutorial
      Podcasting Tutorial
    Graphic Design Tutorial
      Coreldraw Tutorial
      Illustrator Tutorial
      3D Tutorials
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial/ Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial/ Articles
     

    XML Style

      AJAX Tutorial
      XML Mobile
    Flash Tutorial/ Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial/ Articles
      Linux Tutorial
      Symbian Tutorial
      MacOS Tutorial
    Personal Tech
      Hardware Tutorial
      Software Tutorial
      Online Auction