SHARE
Facebook X Pinterest WhatsApp

XHTML Syntax

Written By
thumbnail
Vince Barnes
Vince Barnes
Jan 4, 2005

If you’re already familiar with HTML
and would like to write XHTML,
then this is for you!


 

Sometimes I think it’s harder to change from one learned
system to another that is similar, but has it’s differences, than it is to learn
a new one from scratch.  That’s because habits have formed.  "You
can’t teach an old dog new tricks" says the saying.  Web programmers, on
the other hand, have to learn new tricks all the time because the web is an ever
changing, rapidly evolving  place.

Our fundamental language, HTML, is a perfect example.  We
have watched in evolve through four version releases into HTML 4.0 and now it is
evolving into XHTML, the eXtensible HyperText Markup Language.  XHTML
introduces new levels of power and flexibility to web pages, but does so at the
expense of the forgiving nature of HTML syntax.  XHTML brings the rigorous
nature of XML coding into web page coding, so for those familiar with HTML, here
is a quick overview of the most obvious differences in syntax.

Document Type Definition.

Your XHTML documents will begin with XML and XHTML DTD
statements like these:


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


There are variations on these, but that’s a subject for a more in depth look at
XHTML.

CaSe Matters


While HTML allowed tags to be written in either upper or lower case (for example
<BR> or <br>) XHTML only allows lower case tags.  Attribute values can, of
course, be either upper or lower case, so that:


<font color="ffaacc"> … </font>      and
<font color="FFAACC"> … </font>


are both acceptable.
 



Closed Tags


HTML allows the omission of certain end, or closing, tags (for example <p>
without a </p>) where XHTML requires all tags to be closed (<p> ….. </p>). 
Tags that do not have closing tags, such as <br> and <hr> must contain a closing
slash thus: <br />  <hr />  and <img src"……  " />



Tags must maintain Nesting Level


In HTML <b><i> … </b></i> would be acceptable, whereas it is not in XHTML.  
XHTML requires nesting levels to be maintained, thus:


<b><i> … </i></b>
 


Tag Attributes must be in Quotes


The quotes are mandatory in XHTML, as in the earlier examples:


<font color="ffaacc"> … </font>      and
<font color="FFAACC"> … </font>



Attributes may not be minimized


HTML allows certain attribute to be minimized, such as:


<input type="checkbox" checked>


The word "checked" in this example is actually a minimized attribute. 
XHTML requires attributes to be denoted in full, thus:


<input type="checkbox" checked="checked" />
 


Mandatory Head and Body tags


The <head> ….. </head>  and <body> …. </body> tags are mandatory.



Comments are CDATA


Instead of <!–  this is a comment –> comments are formatted like this:


<[CDATA[this is a comment]]>


 


Miscellaneous


Other notable rules include:

  • The <pre> tag cannot contain: img, object, big, small, sub,
    or sup.

  • You may not have any forms inside of other forms.

  • If your code contains a &, it must be written as &amp.

  • Any use of CSS should use all lower case lettering.

  • JavaScript should be done through external JavaScripting.


 


This overview should help you to recognize XHTML code when you see it.  In
order to become an effective XHTML coder, however, you will need to study
further!  Keep your eyes on HTML Goodies — we’ve got more XHMTL coming!

Recommended for you...

Parsing Atom Feeds using XPath
Rob Gravelle
Mar 30, 2015
Handling Errors when Processing WP_Ajax_Response XML Data
Robert Gravelle
Aug 11, 2014
Serve Up XML Using WP_Ajax_Response
Rob Gravelle
Dec 4, 2013
Displaying RSS Feeds with XHTML, CSS and JQuery
Michael Rohde
Jul 28, 2011
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.