HTML’s Transition to XHTML

1

HTML’s Transition to

XHTML

2

XHTML

• XHTML is the next evolution of HTML

• Extensible HTML

• eXtensible based on XML (extensible markup language)

• XML like HTML is a markup language

3

So what’s different in XHTML ?

Opening HTML element <html> with xmlns declaration

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Adding a <meta> content tag to specify the content encoding<meta http-equiv="content-type" content="text/html;charset=utf-8" />

XHTML requires all tags have closing tags

Empty elements having closing < />

4

First, what is XML?

• XML is used for structuring data

• XML allows for custom elements unlike HTML

• In XML we do not use the same elements we are used to using with HTML

5

Custom elements are used in XML

• Custom element example:

<element name> </element name>

6

Empty elements in XML

• Empty elements will have only the closing tag

<element name />

• An empty element does not have any data in between the element tags since there is only a closing element tag

7

Root element in XML

The first line is referred to as the “root element”

<anyname xmlns="URL goes here" lang="en" xml:lang="en"><first_element_name> data can go here</first_element_name>

<second_element_name> more data goes here</second_element_name>

<third_element_name> and more here</third_element_name>

</anyname>

8

W3C.org states XML declaration is not required

An XML declaration is not required in all XML documents;

However XHTML document authors are strongly encouraged to use XML declarations in all their documents.

Such a declaration is required when the character encoding of the document is other than the default UTF-8 or UTF-16 and no encoding was determined by a higher-level protocol.

<?xml version="1.0" encoding="UTF-8"?>

9

XHTML adds xmlns attribute

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

(The xlmns attribute holds a unique identifier that determines the language you mean, for xhtml its "http://www.w3.org/1999/xhtml")

XML uses the URL as a unique identifier for the language for this document, so you can create your own language

(URL address does not have pertinent info, in other words there is no requirement that anything actually has to exist at the URL, just that the URL has to be unique for each language)

10

XHTML root element

The root element of the document must contain an xmlns declaration for the XHTML namespace [XMLNS].

The namespace for XHTML is defined to be http://www.w3.org/1999/xhtml.

An example root element might look like:


Use both the lang and xml:lang attributes when specifying the language of an element.

The value of the xml:lang attribute takes precedence.

http://www.w3.org/1999/xhtml

11

An XML declaration is not required in all XML documents

In this XHTML example, the XML declaration is included.

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


<head>

<title>Virtual Library</title>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

</head>

<body>

<p>Moved to <a href="http://example.org/">example.org</a>.

</p>

</body>

</html>

12

Adding a <meta> content tag to specify the content encoding

<meta> tag goes right after the <head> element

<head>


<title>Welcome</title>

</head>

UTF-8 stands for Unicode Transformation Format-8.

UTF-8 is the default encoding for XML.

13


• The Document Character Set is used to promote interoperability, each HTML application specifies its document character set

• A document character set consists of: A repertoire A set of abstract characters and Code positions

• Each HTML document is a sequence of characters from the repertoire

• Names for character encodings are case-insensitive

14

W3C.org recommendations for XML Character Encoding

Historically, the character encoding of an HTML document is either specified by a web server via the charset parameter of the HTTP Content-Type header, or via a meta element in the document itself.

In an XML document, the character encoding of the document is specified on the XML declaration

For example:

<?xml version="1.0" encoding="EUC-JP"?>

15

Character Encoding

According to the W3C.org…

In order to portably present documents with specific character encodings, the best approach is to ensure that the web server provides the correct headers.

If this is not possible, a document that wants to set its character encoding explicitly must include both the XML declaration an encoding declaration and a meta http-equiv statement

Example:<?xml version="1.0" encoding="EUC-JP"?>

<meta http-equiv="Content-type" content="text/html; charset=EUC-JP" />).

16

Charset/Character encoding examples

Commonly character encodings:

ISO-8859-1 (also referred to as "Latin-1"; usable for most Western European languages)

ISO-8859-5 (which supports Cyrillic)

SHIFT_JIS (a Japanese encoding)

EUC-JP (another Japanese encoding)

UTF-8 (an encoding of ISO 10646 using a different number of bytes for different characters)

(Names for character encodings are case-insensitive, so that for example "SHIFT_JIS", "Shift_JIS", and "shift_jis" are equivalent)

17

XHTML What’s else is different?

Empty elements having closing < />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<img src=“image.gif” alt=“The image” />

18

XHTML requires all tags have closing tags

• Elements are required to have closing tags, if there is no closing tag then these empty tags should end in />

<br /><img /><meta />

• Putting a space before /> is recommended not required

For example:<meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1" /><img src=“image.gif” alt=“The image” /><br />

19

XHTML 1.0 Strict Requirements

• Opening HTML tag <html> must be the first tag after the DOCTYPE

• Closing HTML tag </html> must be the last tag in the document

• All element names must be written with lowercase letters

20

XHTML 1.0 Strict Requirements

• All opening tags must have closing tags

• If element is an empty tag must end with a space and then />

• All attribute values must be surrounded by double quotes and must have values

• Don’t use & (ampersand character) in the content section

• Instead of & use the html entitity:&

• Convert any other special characters to html entities

21

Benefits to using XHTML

• More likely to work with future browsers and devices

• Better for aural screen readers and visually impaired devices

• Can be extended to include new markups

• XHTML is more current, better to go with the current versus using antiquated HTML

22

Benefits to using XHTML

• XML data can be more easily translated into XHTML

• XHTML can more easily tie into third party software which understands XML

• XHTML is designed to be backwards compatible with older browsers

23

Migrating from strict HTML 4.01 to XHTML 1.0 is fairly straightforward

• Always make sure to validate pages to check for conformance

http://validator.w3.org

http://validator.w3.org/

24

http://validator.w3.org

You can even add validation logo to show you passed

To show your readers that you have taken the care to create an interoperable Web page, you may display this icon on any page that validates.

http://validator.w3.org/

25

Converting and Validating in DW

Dreamweaver enables you to convert pages to desired version of HTML

File>Convert

Dreamweaver enables you to validate pages based on your documents DTD

File>Validate>Markup

26

Migrating websites to XHTML

• There are also third party tools that can help to convert whole websites to XHTML like http://tidy.sourceforge.net

• Can take non validating html and reformat/update the code so that it can validate

• Also can removes much of the legacy presentation code and replace with CSS

27

Review of the benefits to always validating

• Web pages will work more consistently and on a wide variety of browsers and load faster

• Will be better supported on new devices being used to view web pages

• More accessible to the visually impaired who use aural screen readers and businesses required to be ADA compliant (<img> alt and src required for strict)

• Job security?

28

XHTML specific required tags shown in bold for validation for XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>my page</title></head><body><h1>welcome to my webpage </h1></body></html>

-end of slides

Documents

HTML’s Transition to XHTML