Title: XHTML
1XHTML
- eXtensible HyperText Markup Language
2What is XHTML?
- XHTML stands for EXtensible HyperText Markup
Language - XHTML is aimed to replace HTML
- XHTML is almost identical to HTML 4.01
- XHTML is a stricter and cleaner version of HTML
- XHTML is HTML defined as an XML application
3W3C Recommendation
- XHTML 1.0 became an official W3C Recommendation
January 26, 2000 - Recommendations
- Stable
- Reviewed
- Web standard
4Why XHTML?
- Bad HTML
- lthtmlgt
- ltheadgt lttitlegtThis is bad HTMLlt/titlegt ltbodygt
- lth1gtBad HTML
- lt/bodygt
- Some browsers cant interpret bad HTML.
- mobile phones, pdas, etc.
- XML must be marked up correctly well formed.
5Why XHTML?
- XHTML
- can be read by all XML enabled devices
- allows "well-formed" documents now, that work in
all browsers and that are backward browser
compatible
6The Most Important Differences
- XHTML elements must be properly nested
- XHTML documents must be well-formed
- Tag names must be in lowercase
- All XHTML elements must be closed
7Elements Must Be Properly Nested
- Improper nesting in HTML
- ltbgtltigtThis text is bold and italiclt/bgtlt/igt
- Correct form
- ltbgtltigtThis text is bold and italiclt/igtlt/bgt
8Documents Must Be Well-formed
- All XHTML elements must be nested within the
lthtmlgt root element. - All other elements can have sub (children)
elements. - Sub elements must be in pairs and correctly
nested within their parent element. - Gives a basic document structure of
9Basic Document Structure
- lthtmlgt
- ltheadgt ...
- lt/headgt
- ltbodygt ...
- lt/bodygt
- lt/htmlgt
- - remember also the doctype see further on
10Tag Names Must Be in Lower Case
- Remember, XHTML documents are XML applications.
- XML is case sensitive.
- Incorrect ltBODYgt ltPgtThis is a paragraphlt/Pgt
lt/BODYgt - Correct ltbodygt ltpgtThis is a paragraphlt/pgt
lt/bodygt
11All Elements Must Be Closed
- Non-empty elements must have an end tag.
- Incorrect
- ltpgtThis is a paragraph
- ltpgtThis is another paragraph
- Correct
- ltpgtThis is a paragraphlt/pgt
- ltpgtThis is another paragraphlt/pgt
12Empty Elements Must also Be Closed
- Empty elements must either have an end tag or the
start tag must end with /gt. - Incorrect
- This is a breakltbrgt
- Here comes a horizontal rulelthrgt
- Here's an image ltimg src"happy.gif" alt"Happy
face"gt
13Empty Elements Must also Be Closed
- Correct
- This is a breakltbr /gt
- Here comes a horizontal rulelthr /gt
- Here's an image ltimg src"happy.gif" alt"Happy
face" /gt
14Browser Compatibility
- To make your XHTML compatible with today's
browsers, you should add an extra space before
the "/" symbol like this ltbr /gt, and this lthr
/gt.
15Some more XHTML Syntax Rules
- Attribute names must be in lower case
- Attribute values must be quoted
- Attribute minimization is forbidden
- The id attribute replaces the name attribute
- The XHTML DTD defines mandatory elements
16Attribute Names must be Lower Case
- Incorrect
- lttable WIDTH"100"gt
- Correct
- lttable width"100"gt
17Attribute Values must be Quoted
- Incorrect
- lttable width100gt
- Correct
- lttable width"100"gt
18Attribute Minimization is Forbidden
- Incorrect
- ltdl compactgt
- ltinput checkedgt
- ltinput readonlygt
- ltinput disabledgt
- ltoption selectedgt
- ltframe noresizegt
19Attribute Minimization is Forbidden
- Correct
- ltdl compact"compact"gt
- ltinput checked"checked" /gt
- ltinput readonly"readonly" /gt
- ltinput disabled"disabled" /gt
- ltoption selected"selected" /gt
- ltframe noresize"noresize" /gt
20Minimised Attributes List
21The id Attribute replaces the Name Attribute
- HTML 4.01 defines a name attribute for
- a
- applet
- frame
- iframe
- img
- map
22The id Attribute replaces the Name Attribute
- In XHTML the name attribute is deprecated. Use id
instead. - Incorrect
- ltimg src"picture.gif" name"picture1" /gt
- Correct
- ltimg src"picture.gif" id"picture1" /gt
23The id Attribute replaces the Name Attribute
- To interoperate with older browsers for a while,
use both name and id, with identical attribute
values - ltimg src"picture.gif" id"picture1"
name"picture1" /gt
24The Lang Attribute
- Applies to almost every XHTML element.
- Specifies the language of the content.
- If you use the lang attribute in an element, you
must add the xmllang attribute - ltdiv lang"no" xmllang"no"gtHeia Norge!lt/divgt
25Mandatory XHTML Elements
- DOCTYPE
- HTML
- HEAD
- BODY
- TITLE (present inside head element)
- Gives minimum document template gt
26Minimum Document Template
- lt!DOCTYPE Doctype goes heregt
- lthtml xmlns"http//www.w3.org/1999/xhtml"gt
- ltheadgt
- lttitlegtTitle goes here
- lt/titlegt
- lt/headgt
- ltbodygt Body text goes here
- lt/bodygt
- lt/htmlgt
27Some notes on previous page
- The DOCTYPE declaration is not a part of the
XHTML document itself. It is not an XHTML
element, and it should not have a closing tag. - The xmlns attribute inside the lthtmlgt tag is
required in XHTML. - "xmlnshttp//www.w3.org/1999/xhtml" is a fixed
value and will be added to the lthtmlgt tag even if
you do not include it.
28Document Type Definitions
- The lt!DOCTYPEgt is Mandatory
- XHTML documents contain 3 main parts
- The DOCTYPE
- The Head
- The Body
29Basic Document Structure Revisited
- lt!DOCTYPE ...gt
- lthtmlgt
- ltheadgt
- lttitlegt...
- lt/titlegt
- lt/headgt
- ltbodygt ...
- lt/bodygt
- lt/htmlgt
30Simple XHTML Example
- lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt - lthtmlgt
- ltheadgt
- lttitlegtsimple documentlt/titlegt
- lt/headgt
- ltbodygt
- ltpgta simple paragraphlt/pgt
- lt/bodygt
- lt/htmlgt
31What is a Document Type Definition?
- DTD specifies the syntax of a web page in SGML.
- DTD is used by SGML applications, such as HTML,
to specify rules that apply to the markup of
documents of a particular type, including a set
of element and entity declarations. - XHTML is specified in an SGML document type
definition or 'DTD'. - An XHTML DTD describes in precise,
computer-readable language the allowed syntax and
grammar of XHTML markup.
323 DTDs for XHTML
- STRICT
- TRANSITIONAL
- FRAMESET
33XHTML 1.0 Strict
- lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt - Used for clean markup, free of presentational
clutter. - Use together with Cascading Style Sheets.
34XHTML 1.0 Transitional
- lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt - Used to take advantage of HTML's presentational
features - Used for supporting browsers that don't
understand Cascading Style Sheets.
35XHTML 1.0 Frameset
- lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http//www.w3.org/TR/xhtml1/DTD/xht
ml1-frameset.dtd"gt - Used to partition the browser window using HTML
frames. - Reference XFrames. W3C Working Draft
36Validating your XHTML pages.