MaggsWeb:7 » XHTML http://www.maggsweb.com www.maggsweb.com Sat, 21 Aug 2010 20:50:00 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 HTML to XHTML http://www.maggsweb.com/miscellaneous/html-to-xhtml/ http://www.maggsweb.com/miscellaneous/html-to-xhtml/#comments Mon, 04 Jan 2010 11:35:42 +0000 chris http://www.maggsweb.com/?p=645 Here’s a quick check list of the important requirements of XHTML and the differences between HTML and XHTML.

This is NOT a comprehensive XHTML language reference.

All tags, attributes and values must be written in lowercase.

Right: <a href=”www.kilroyjames.co.uk” >
Wrong: <A HREF=”www.kilroyjames.co.uk” >

All attribute values must be within quotes

Right: <a href=”www.kilroyjames.co.uk” >
Wrong: <a href=www.kilroyjames.co.uk >

All tags must be properly nested

Right: <em>this emphasis just keeps getting <strong>stronger and stronger</strong></em>
Wrong: <em>this emphasis just keeps getting <strong>stronger and stronger</em></strong>

All XHTML documents must carry a DOCTYPE definition

The DOCTYPE is an intimidating looking piece of code that must appear at the start of every XHTML document, it tells the browser how to render the document.

Rules for the DOCTYPE tag:

* It must be the first tag in the document
* The DOCTYPE is not actually part of the XHTML document so don’t add a closing slash
* It should point to a valid definition file called a DTD that tells the browser how to read the document
* You must write the DOCTYPE tag correctly otherwise your document will explode (into little pieces of HTML called “tag soup”) and be unvalidatable.

There are three types of valid XHTML 1.0 document: Strict, Transitional, and Frameset. If you can get your document to validate with “Strict” then do so, however some legacy tags and attributes aren’t allowed in Strict so you can use “Transitional” instead.

Note also that using a Transitional DTD takes most browsers out of “Standards” mode. It is much trickier to get your web pages to look consistent across different browsers when the browsers are not in Standards mode. I’m not going to explain the minutae of the DOCTYPE tag as it gets deeper and more complicated, just know that for best results you should use one of the following, preferably the first one (Strict):

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

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

The HTML tag must contain an XMLNS attribute

You don’t need to understand the “XML namespace” attribute, except to know that it is required in all XHTML documents. Here is an example of how to write it:

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

Documents must be properly formed with HTML, HEAD, TITLE and BODY tags

In HTML it is possible to write a webpage that contains none of the above tags; in XHTML it is not. The above tags must be included and they must be nested and ordered correctly, as follows (the DOCTYPE has been omitted):

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
</head>

<body>
<p>
See how the TITLE must be placed in the document HEAD – the TITLE is considered
to be a “required child” element of the HEAD.
Notice that the HEAD must also appear before the document BODY.
Notice also how both the HEAD and the BODY must be contained
within the HTML tag. Again, HEAD and BODY are “required child”
elements of the HTML tag. Finally, notice that this text is
written within a <p>paragraph</p> tag; in XHTML you may
not write text directly in the BODY tag without using a suitable
container tag, such as <p> or <div>.
</p>
</body>
</html>

All tags must be closed, even single tags

Wrong:

<p>Mary had a little lamb
<p>It’s fleece was white as snow

Right:

<p>Mary had a little lamb</p>
<p>It’s fleece was white as snow</p>

In XHTML even single tags have to be closed – absolutely NO tag may be left open.

Wrong:<p>Mary had a little lamb <br>It’s fleece was white as snow</p>

Right: <p> Mary had a little lamb <br/> It’s fleece was white as snow</p>

Attribute minimisation isn’t allowed

In HTML, attributes can be strung together almost like they were keywords, ie. <dl compact>, this is called attribute minimisation. In XHTML that is not allowed, attributes and values must be excplicit, ie.

<dl compact=”compact”>

ID and NAME attributes

In HTML it was legal to use ID and NAME attributes interchangeably. In XHTML the NAME attribute is formally deprecated and cannot be used. In all cases where you would think to use a NAME attribute you must now use ID instead. e.g.

Correct HTML: <input type=”submit” name=”s” value=” Search ” >

Correct XHTML:<input type=”submit” id=”s” value=” Search ” />

STYLE is all in your HEAD

XHTML does not allow STYLE or SCRIPT declarations within the body of a document they must be placed in the document HEAD instead.

]]> http://www.maggsweb.com/miscellaneous/html-to-xhtml/feed/ 0 Using CSS for form layout (No more tables.. ) http://www.maggsweb.com/css/css-form-layout-2/ http://www.maggsweb.com/css/css-form-layout-2/#comments Sat, 01 Mar 2008 13:16:39 +0000 chris http://www.cmaggs.co.uk/html/32 Form fields need to line up. OK. Historically this was achieved using a table, and masses of markup. Although that’s still acceptable and would not fail validation, there is an easier and better way that uses less code and where using the correct tags will also cause the ‘name’ field become focused when you clicked the ‘name’ label.

Using CSS we can achieve this using less code, while providing improved usability.

  • Use a <P> tag to distinguish each line.
  • Use a <label> with the name attribute to link to an input with the same name attribute to create the links.
  • Put the <label> inside the <P> tag with a fixed width, floated left
  • Use the padding (inside) and margin (outside) on the <P> tag for spacing.

Perfect!

cssForm

?View Code HTML
 
<form action="#">
<p><label for="name">Name</label><input id="name" type="text" /></p>
<p><label for="e-mail">E-mail</label><input id="e-mail" type="text" /></p>
<p><input type="submit" value="Submit" /></p>
</form>

?View Code CSS
 
p {
  padding: 2px;
  margin: 5px;
}
p.submit {
  margin-left: 110px; 
}
label {
  width: 100px;
  float: left;
  text-align: right;
  margin-right: 5px;
  display: block;
}
]]> http://www.maggsweb.com/css/css-form-layout-2/feed/ 0 Simple centering – XHTML style… http://www.maggsweb.com/css/simple-centering-cross-browser-compatible/ http://www.maggsweb.com/css/simple-centering-cross-browser-compatible/#comments Tue, 18 Sep 2007 19:17:19 +0000 chris http://www.cmaggs.co.uk/?p=9 The perfect place to start – a centrally aligned ‘wrapper’.
You must have the DTD (Document Type Definition) declared for this to work.

?View Code HTML
 
<!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">
 
<style type='text/css'>
body {    text-align: center;    }
#container {    margin: 0 auto;}
</style>
 
<body>
    <div id="container">
	    <!-- Content Here -->
    </div>
</body>
]]> http://www.maggsweb.com/css/simple-centering-cross-browser-compatible/feed/ 0 ‘Box Model’ without hacking. http://www.maggsweb.com/css/box-model-without-hacking/ http://www.maggsweb.com/css/box-model-without-hacking/#comments Mon, 02 Oct 2006 12:13:15 +0000 chris http://www.cmaggs.co.uk/?p=7 Implementing a W3C valid, cross-browser compatible CSS2 ‘Box Model’, overcoming the bugs in IE without hacking.

?View Code CSS
#Column {
	padding: 100px !important;
 	padding: 70px;
 
 	/* <strong>!important</strong> is ignored by IE
 	so IE overwrites the initial padding value with the next entry.
 	The secondary value is ignored by Mozilla,
 	as the primary value contains !important */
 
	height: 450px !important; 	/* Mozilla */
 	height: 400px; 			/* IE */
 
}
]]> http://www.maggsweb.com/css/box-model-without-hacking/feed/ 0