Attribute Minimization Is Forbidden
This is wrong:
This is correct:
Here is a list of the minimized attributes in HTML and how they should be written in XHTML:
HTML
|
XHTML
|
compact
|
compact="compact"
|
checked
|
checked="checked"
|
declare
|
declare="declare"
|
readonly
|
readonly="readonly"
|
disabled
|
disabled="disabled"
|
selected
|
selected="selected"
|
defer
|
defer="defer"
|
ismap
|
ismap="ismap"
|
nohref
|
nohref="nohref"
|
noshade
|
noshade="noshade"
|
nowrap
|
nowrap="nowrap"
|
multiple
|
multiple="multiple"
|
noresize
|
noresize="noresize"
|
The id Attribute Replaces The name Attribute
HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.
This is wrong:
This is correct:
Note: To interoperate with older browsers for a while, you should use both name and id, with identical attribute values, like this:
IMPORTANT Compatibility Note:
To make your XHTML compatible with today's browsers, you should add an extra space before the "/" symbol.
The Lang Attribute
The lang attribute applies to almost every XHTML element. It specifies the language of the content within an element.
If you use the lang attribute in an element, you must add the xml:lang attribute, like this:
Mandatory XHTML Elements
All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element.
This is a minimum XHTML document template:
XHTML DTD
The most common DTD is XHTML Transitional.
<!DOCTYPE> Is Mandatory
An XHTML document consists of three main parts:
- the DOCTYPE declaration
- the <head> section
- the <body> section
The basic document structure is:
Note: The DOCTYPE declaration is always the first line in an XHTML document!
An XHTML Example
This is a simple (minimal) XHTML document:
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
simple document
a simple paragraph
|
The DOCTYPE declaration above defines the document type. The rest of the document looks like HTML.
Document Type Definitions (DTD)
- A DTD specifies the syntax of a web page in SGML
- DTDs are used by SGML applications, such as HTML, to specify rules for documents of a particular type, including a set of elements and entity declarations
- An XHTML DTD describes in precise, computer-readable language, the allowed syntax of XHTML markup
There are three XHTML DTDs:
- STRICT
- TRANSITIONAL
- FRAMESET
XHTML 1.0 Strict
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
Use the strict DOCTYPE when you want really clean markup, free of presentational clutter. Use together with CSS.
XHTML 1.0 Transitional
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
Use the transitional DOCTYPE when you want to still use HTML's presentational features.
XHTML 1.0 Frameset
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
|
Use the frameset DOCTYPE when you want to use HTML Frames to split the web page into two or more frames.
XHTML HowTo
How W3Schools Was Converted To XHTML
W3Schools was converted from HTML to XHTML the weekend of 18. and 19. December 1999, by Hege Refsnes and Ståle Refsnes.
To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules of the previous chapters. The following steps were executed (in the order listed below):
A DOCTYPE Definition Was Added
The following DOCTYPE declaration was added as the first line of every page:
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
Tip: Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML.
Lowercase Tags And Attribute Names
Since XHTML is case-sensitive, and only accept lowercase tags and attributes, a general "find-and-replace" function was executed to replace all uppercase tags with lowercase tags. The same was done for attribute names.
All Attribute Values Were Quoted
The XHTML 1.0 Recommendation states that all attribute values must be quoted, so every page in W3Schools.com was checked to see that attribute values were quoted.
Empty Tags: <hr> , <br> and <img>
Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and <br />.
A general "find-and-replace" function was executed to swap the tags.
We decided not to close the <img> tags with </img>, but with /> at the end of the tag. This was done manually.
The Web Site Was Validated
Finally, all our pages were validated against the official W3C DTD Validator:
W3C XHTML Validator.
A few more errors were found and edited manually. The most common error was missing </li> tags in lists.
We could also have used a converting tool like HTML TIDY.
Dave Raggett's HTML TIDY is a free tool for cleaning up HTML code. It works great on the hard-to-read markup, and it can help to identify where you need to pay further attention on making your pages more accessible to people with disabilities.
XHTML Validation
An XHTML document can be validated with W3C's validator.
Validate XHTML With A DTD
Before an XHTML file can be validated, a correct DTD must be added as the first line of the file.
The Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
|
The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
|
The Frameset DTD includes everything in the transitional DTD plus frames as well:
!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"
|
Validate Your XHTML With The W3C Validator
XHTML Modularization
The XHTML modularization-model defines the modules of XHTML.
Why XHTML Modularization?
XHTML contains most of the functionality a web developer will need.
For some purposes XHTML is too large and complex, and for other purposes it's too simple.
By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and well-defined sets of XHTML elements that can be used separately for small devices, or combined with other XML standards in more complex applications.
With modular XHTML, designers can:
- Choose the elements to be supported by a device
- Simplify XHTML for small devices
- Extend XHTML for complex applications by adding new XML functionality (like MathML, SVG, Voice and Multimedia)
- Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices)
XHTML Modules
W3C has split the definition of XHTML into 28 modules:
Module name
|
Description
|
Applet Module
|
Defines the deprecated* applet element
|
Base Module
|
Defines the base element
|
Basic Forms Module
|
Defines the basic forms elements
|
Basic Tables Module
|
Defines the basic table elements
|
Bi-directional Text Module
|
Defines the bdo element
|
Client Image Map Module
|
Defines browser side image map elements
|
Edit Module
|
Defines the editing elements del and ins
|
Forms Module
|
Defines all elements used in forms
|
Frames Module
|
Defines the frameset elements
|
Hypertext Module
|
Defines the a element
|
Iframe Module
|
Defines the iframe element
|
Image Module
|
Defines the img element
|
Intrinsic Events Module
|
Defines event attributes like onblur and onchange
|
Legacy Module
|
Defines deprecated* elements and attributes
|
Link Module
|
Defines the link element
|
List Module
|
Defines the list elements ol, li, ul, dd, dt, and dl
|
Metainformation Module
|
Defines the meta element
|
Name Identification Module
|
Defines the deprecated* name attribute
|
Object Module
|
Defines the object and param elements
|
Presentation Module
|
Defines presentation elements like b and i
|
Scripting Module
|
Defines the script and noscript elements
|
Server Image Map Module
|
Defines server side image map elements
|
Structure Module
|
Defines the elements html, head, title and body
|
Style Attribute Module
|
Defines the style attribute
|
Style Sheet Module
|
Defines the style element
|
Tables Module
|
Defines the elements used in tables
|
Target Module
|
Defines the target attribute
|
Text Module
|
Defines text container elements like p and h1
|
* Deprecated elements should not be used in XHTML.
HTML 4.01 / XHTML 1.0 Reference
Ordered Alphabetically
DTD: indicates in which XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset
Tag
|
Description
|
DTD
|
<!--...-->
|
Defines a comment
|
STF
|
<!DOCTYPE>
|
Defines the document type
|
STF
|
<a>
|
Defines an anchor
|
STF
|
<abbr>
|
Defines an abbreviation
|
STF
|
<acronym>
|
Defines an acronym
|
STF
|
<address>
|
Defines an address element
|
STF
|
<applet>
|
Deprecated. Defines an applet
|
TF
|
<area>
|
Defines an area inside an image map
|
STF
|
<b>
|
Defines bold text
|
STF
|
<base>
|
Defines a base URL for all the links in a page
|
STF
|
<basefont>
|
Deprecated. Defines a base font
|
TF
|
<bdo>
|
Defines the direction of text display
|
STF
|
<big>
|
Defines big text
|
STF
|
<blockquote>
|
Defines a long quotation
|
STF
|
<body>
|
Defines the body element
|
STF
|
<br>
|
Inserts a single line break
|
STF
|
<button>
|
Defines a push button
|
STF
|
<caption>
|
Defines a table caption
|
STF
|
<center>
|
Deprecated. Defines centered text
|
TF
|
<cite>
|
Defines a citation
|
STF
|
<code>
|
Defines computer code text
|
STF
|
<col>
|
Defines attributes for table columns
|
STF
|
<colgroup>
|
Defines groups of table columns
|
STF
|
<dd>
|
Defines a definition description
|
STF
|
<del>
|
Defines deleted text
|
STF
|
<dir>
|
Deprecated. Defines a directory list
|
TF
|
<div>
|
Defines a section in a document
|
STF
|
<dfn>
|
Defines a definition term
|
STF
|
<dl>
|
Defines a definition list
|
STF
|
<dt>
|
Defines a definition term
|
STF
|
<em>
|
Defines emphasized text
|
STF
|
<fieldset>
|
Defines a fieldset
|
STF
|
<font>
|
Deprecated. Defines text font, size, and color
|
TF
|
<form>
|
Defines a form
|
STF
|
<frame>
|
Defines a sub window (a frame)
|
F
|
<frameset>
|
Defines a set of frames
|
F
|
<h1> to <h6>
|
Defines header 1 to header 6
|
STF
|
<head>
|
Defines information about the document
|
STF
|
<hr>
|
Defines a horizontal rule
|
STF
|
<html>
|
Defines an html document
|
STF
|
<i>
|
Defines italic text
|
STF
|
<iframe>
|
Defines an inline sub window (frame)
|
TF
|
<img>
|
Defines an image
|
STF
|
<
———
Back
| |