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

EA The ! specifies a Document Type

Definition. This is NOT an HTML Element!

B Specifies html as the root (first)element in the page.

D

CDeclares that the standard (HTML 4.01 here) is publicly available.

DTells 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 n241IntroducingXHTMLAndValidation_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’SALT 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.Design | Development | Marketing

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 | [email protected]


xhtml validation

Technology

html element

standard html

design standards

html structure

version of html

popularity of html

oldstyle html

html v4