XHTML

1
XHTML

• eXtensible HyperText Markup Language

2
What 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

3
W3C Recommendation

• XHTML 1.0 became an official W3C Recommendation
  January 26, 2000
• Recommendations
• Stable
• Reviewed
• Web standard

4
Why 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.

5
Why 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

6
The 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

7
Elements 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

8
Documents 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

9
Basic Document Structure

• lthtmlgt
• ltheadgt ...
• lt/headgt
• ltbodygt ...
• lt/bodygt
• lt/htmlgt
• - remember also the doctype see further on

10
Tag 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

11
All 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

12
Empty 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

13
Empty 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

14
Browser 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.

15
Some 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

16
Attribute Names must be Lower Case

• Incorrect
• lttable WIDTH"100"gt
• Correct
• lttable width"100"gt

17
Attribute Values must be Quoted

• Incorrect
• lttable width100gt
• Correct
• lttable width"100"gt

18
Attribute Minimization is Forbidden

• Incorrect
• ltdl compactgt
• ltinput checkedgt
• ltinput readonlygt
• ltinput disabledgt
• ltoption selectedgt
• ltframe noresizegt

19
Attribute 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

20
Minimised Attributes List
21
The id Attribute replaces the Name Attribute

• HTML 4.01 defines a name attribute for
• a
• applet
• frame
• iframe
• img
• map

22
The 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

23
The 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

24
The 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

25
Mandatory XHTML Elements

• DOCTYPE
• HTML
• HEAD
• BODY
• TITLE (present inside head element)
• Gives minimum document template gt

26
Minimum 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

27
Some 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.

28
Document Type Definitions

• The lt!DOCTYPEgt is Mandatory
• XHTML documents contain 3 main parts
• The DOCTYPE
• The Head
• The Body

29
Basic Document Structure Revisited

• lt!DOCTYPE ...gt
• lthtmlgt
• ltheadgt
• lttitlegt...
• lt/titlegt
• lt/headgt
• ltbodygt ...
• lt/bodygt
• lt/htmlgt

30
Simple 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

31
What 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.

32
3 DTDs for XHTML

• STRICT
• TRANSITIONAL
• FRAMESET

33
XHTML 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.

34
XHTML 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.

35
XHTML 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

36
Validating your XHTML pages.

• http//validator.w3.org