Xhtml validation

XHTML VALIDATION
Design | Development | Marketing

GOALS
By the end of this unit, you should
understand …
… the reasons for moving to XHTML.
… how to use a DOCTYPE statement.
… how to use the World Wide Web
Consortium's Validator.
… how to specify character encoding for
a page.
… the rules for HTML 4.01 Strict &
XHTML 1.0.

WHY BOTHER WITH XHTML?
HTML was working great … Why bother with XHTML?
 We can create pages that work uniformly across browsers ("graceful
decomposition").
 We can create pages that work on mobile devices.
 We can create pages that work with adaptive technology.
 XHTML pages "play well" with CSS.

LOOKS ARE DECEIVING …
Most browsers are very forgiving
when it comes to display error-
ridden HTML.
The problem is that, although
browsers might display that
contains errors, they display the
errors differently.
Writing standards-compliant pages
is the only way to guarantee some
semblance of consistency.

SOME HISTORY
Prior to HTML v4.0, what we called
"HTML" was actually a mishmash of
rules and design standards – each
browser manufacturer had their own
"version" of HTML.
HTML 4.0/4.01 changed that – for the
first time, industry leaders agreed on a
standard model for HTML (structure)
and CSS (style).
XHTML blends the browser compatibility
and popularity of HTML with
extensibility of XML.

WHICH VERSION?
Today, unless told otherwise, web browsers
display pages as if those pages used old-
style HTML.
This is a problem, because there is little
consistency among the browsers in how
to display old-style HTML that contains
errors.
However, armed with standards-compliant
XHTML, we can really unlock the power of
web development. We just need to let the
browser know we are using it …

THE DOCTYPE STATEMENT
To help the browser understand the
language in which we write a
document, we can add a DOCTYPE
statement at the top of our script
(even before <html>).
The DOCTYPE statement, technically
called a Document Type
Definition (DTD), instructs the
browser to use a standards-
compliant model for displaying your
page.

DOCTYPE SYNTAX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
A B C
E
A The ! specifies a Document Type
Definition. This is NOT an HTML
Element!
B Specifies html as the root (first)
element in the page.
D
C
Declares that the standard
(HTML 4.01 here) is publicly
available.
D
Tells the browser which standard we’re
using (HTML 4.01 here) and the human
language we use in the page (EN –
English). Everything in the quotes needs
to be on the same line!
E Points to the URL for the standard.

LET’S TRY ONE!
Download the file
n241IntroducingXHTMLAnd
Validation_examples.zip
to your storage device.
Decompress that file and
then edit the file
called lounge.html. Add
the DOCTYPE (you copy
the DOCTYPE from the
file called doctype.txt.
Open the file in a
browser. Any
difference?

VALIDATING WEB PAGES
Sometimes, it’s a difficult process to detect the minor mistakes that
can make your page non-compliant.
Fortunately, the W3C has a tool that can help – the W3C Markup
Validation Service:
http://validator.w3.org/

LET’S TRY ONE!
Open the W3C
Validator:
http://validator.w3.org
Use the “Validate
by File Upload”
option to
validate the
following file:
lounge.html.

THE <IMG> ELEMENT’S
ALT ATTRIBUTEThe rules of HTML 4.01 state that every <img> element must have an
alt attribute. Why?
Add an alt attribute to the drinks.gif image and validate your page
again …

CHARACTER ENCODING
In the previous validation, the
Validator indicated that our page
had no character encoding.
What is character encoding? It
“tells” the browser which
character set to use in order to
display the page – English,
Chinese, Arabic, etc.
To include a character encoding
scheme, we will use a <meta>
element …

THE <META> ELEMENT
A <meta> element tells a browser
information about the page. Here are
some things a <meta> element can do:
 It can set a character encoding scheme.
 It can configure a browser re-direct to another page.
 It can attract search engines.
You can have multiple <meta> elements
in a single HTML file.
We nest the <meta> element inside the
<head> element, before the <title>.

SPECIFYING CHARACTER ENCODING
Add the following line above the
<title> element in lounge.html.
Then, run your page through the
validator:
<meta http-equiv = “Content-Type”
content = “text/html; charset=ISO-8859-1”>

MOVING TO A STRICT DTD …
Did you notice the word “Transitional”
in DOCTYPE statement? It means that
we are using a transitional DTD. The
Transitional DTD allows for some
legacy HTML code, but enforces basic
rules of structure. The W3C created it
to help those with huge websites that
they needed to update.
Those creating new websites should use
a strict DTD.

LET’S TRY ONE!
Change the DOCTYPE declaration in
lounge.html to the declaration
below. Then, run your page through
the validator:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

NESTING ELEMENTS
According to the guidelines for
HTML 4.01, Strict, you MUST nest
inline elements, like the <img>
element, inside a block level
element.
Nest the <img> element in
lounge.html inside a <p> and
then run your page through the
validator …

CONGRATULATIONS!
Now you can celebrate and say that you’ve joined the ranks of true Web
Geeks by creating an HTML 4.01 Strict page!
Now for some HTML 4.01 Strict rules …

RULES FOR HTML 4.01 STRICT
The first line in an HTML 4.01 Strict
document must be a DOCTYPE
declaration.
The <html> element must be the first
line after the DOCTYPE declaration.
A compliant page includes both <head>
and <body> elements.
A compliant page includes a <title>
element, nested in the <head>.
continued …

Nest ONLY block elements inside a
<body> element; all inline elements
need to be nested inside other block-
level elements.
Do NOT nest block-level elements inside
inline elements.
Do NOT nest block-level elements inside
the <p> element.
Only nest <li> elements inside the <ol>
& the <ul> elements.
continued …

You may nest text, inline or block-level
elements inside the <li> element.
The <blockquote> elements requires
one or more block-level elements
nested inside of it.
Take care when nesting inline elements
inside other inline elements:
 NEVER nest an <a> element inside another <a> element.
 NEVER nest any other element inside an empty element, like the
<img> element.
 Remember to close nested elements in the opposite way that you
opened them!

MOVING TO XHTML …
XHTML – eXtensible HTML – is the
“next evolution” of HTML.
XHTML is actually a form of
eXtensible Markup Language
(XML), which allows developers to
extend existing scripting
languages and create new
languages to fit their business
needs.
Let’s consider a sample XML
document …

<recipe xmlns=“http://www.foodnetwerk.com/recipe”<recipe xmlns=“http://www.foodnetwerk.com/recipe”
lang=“en” xml:lang=“en”>lang=“en” xml:lang=“en”>
<name>Head First Lounge Iced Tea</name><name>Head First Lounge Iced Tea</name>
<description><description>
A brisk iced tea with a bit of a kick ...A brisk iced tea with a bit of a kick ...
</description></description>
<ingredients><ingredients>
<ingredient measurement=“6 cups”><ingredient measurement=“6 cups”>
WaterWater
</ingredient></ingredient>
......
</ingredients></ingredients>
<preparation><preparation>
<time duration=“10 minutes” /><time duration=“10 minutes” />
<step><step>
Boil one cup of water in a pan, remove pan ...Boil one cup of water in a pan, remove pan ...
</step></step>
......
</preparation></preparation>
</recipe></recipe>
Sample XML ScriptSample XML Script

WHY MOVE TO XHTML?
XHTML is more compatible with adaptive
web software, like aural screen
readers.
The syntax is almost exactly like HTML;
if you know how to write in HTML 4.01
Strict, the transition is almost
seamless. In fact, XHTML is backwards
compatible.
XHTML is more compatible with mobile
web agents like cell phones and PDAs.
continued …

WHY MOVE TO XHTML?
Because XHTML is XML, you write new
markup for it; there are already extensions
to XHTML for vector graphics and
mathematics.
Any software that can read XML can read
XHTML.
Many large databases store data using XML;
transitioning to XHTML will be easier than
HTML.
Since XHTML is XML, we reap the benefits of
XML, including the ability to store large,
structured documents.

LET’S TRY ONE!
Change the DOCTYPE declaration in
lounge.html to the declaration
below. DON’T run your page through
the validator, just yet!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">

ALMOST THERE …
Change the <html> element in
lounge.html to add the attributes
below. Then, run your page through
the validator.
<html xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en">

CLOSING EMPTY TAGS
We already know that any paired element
contains two tags – an opening tag and
a closing tag.
XHTML, however, requires that you also
close empty elements.
To close an empty element (like <img> or
<meta> use " />" at the end of the tag
name, like this:
<meta />
Update lounge.html and then validate
…

RULES FOR XHTML
The <html> element must include
xmlns, lang and xml:lang attributes.
The <html> element must be the first
tag after the DOCTYPE declaration.
Write element names in lowercase.
Close empty elements with a space
and then a /, like this <tag />.
continued …

RULES FOR XHTML
Enclose attribute values in double
quotes, like this:
<tag attribute = "value">
Attribute values must not be empty.
Use entities in the place of the &
character and other special
characters. See the following URL
for entity codes:
http://www.w3schools.com/tags/ref_entities.asp

TIPS FOR DEBUGGING
Pay close attention to the line
number the validator returns;
don't stress over the exact error
message.
When the validator returns multiple
errors, correct one error at a
time, starting with the top error.
Then, re-validate.

CONTACT US
http://marketing.clicksbazaar.com/xhtml-
validation
http://clicksbazaar.com |
Contact@clicksbazaar.com

Xhtml validation

More Related Content

Xhtml validation