Scribd
Upload
80 views

What You Should Already Know: HTML Tutorial

The document provides information about XHTML, including: - XHTML stands for EXtensible HyperText Markup Language and is a stricter version of HTML defined as an XML application. - All browsers support XHTML, and W3Schools was completely rewritten to XHTML 1.0 in 1999. - To write valid XHTML, elements must be properly nested, always closed, in lowercase, and documents must have a single root element. Attributes must also be in lowercase with values in quotes.

Uploaded by

Ashwani_Kumar_2709
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
80 views

What You Should Already Know: HTML Tutorial

The document provides information about XHTML, including: - XHTML stands for EXtensible HyperText Markup Language and is a stricter version of HTML defined as an XML application. - All browsers support XHTML, and W3Schools was completely rewritten to XHTML 1.0 in 1999. - To write valid XHTML, elements must be properly nested, always closed, in lowercase, and documents must have a single root element. Attributes must also be in lowercase with values in quotes.

Uploaded by

Ashwani_Kumar_2709
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

What You Should Already Know

Before you continue you should have a basic understanding of the following:

 HTML and the basics of building web pages

If you want to study HTML first, please read our HTML tutorial.

What Is XHTML?
 XHTML stands for EXtensible HyperText Markup Language
 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
 XHTML is a W3C Recommendation

XHTML is a W3C Recommendation


XHTML 1.0 became a W3C Recommendation January 26, 2000.

Stay updated with the latest W3C recommendations in our W3C tutorial.

All Browsers Support XHTML


XHTML is compatible with HTML 4.01. All browsers support XHTML.

W3Schools Has Converted To XHTML


W3Schools was completely rewritten to XHTML 1.0 in 1999.

A click on this symbol: validates the XHTML part of this page.

A click on this symbol: validates the CSS part of this page.

About This Tutorial


The next chapters of this tutorial will explain:

 Why you should use XHTML


 The syntax of XHTML
 How W3Schools was converted to XHTML
 XHTML validation
 XHTML modularization

XHTML - Why?
« Previous Next Chapter »

XHTML is a combination of HTML and XML (EXtensible Markup Language).

XHTML consists of all the elements in HTML 4.01, combined with the strict syntax of
XML.

Why XHTML?
Many pages on the internet contain "bad" HTML.

The following HTML code will work just fine if you view it in a browser (even if it does
NOT follow the HTML rules):

<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>

XML is a markup language where everything must be marked up correctly, which


results in "well-formed" documents.

XML is designed to describe data, and HTML is designed to display data.

Today's market consists of different browser technologies, some browsers run on


computers, and some browsers run on mobile phones or other small devices. The last-
mentioned do not have the resources or power to interpret a "bad" markup language.

Therefore - by combining the strengths of HTML and XML, W3C recommended a


markup language that is useful now and in the future - XHTML.

Get Ready For XHTML


XHTML is not very different from the HTML 4.01 standard.

So, bringing your code up to the 4.01 standard is a good start.


Our complete HTML 4.01 reference can help you with that.

In addition, you should start NOW to write your HTML code in lowercase letters, and NEVER skip
closing tags (like </p>).

The Most Important Differences:


 XHTML elements must be properly nested
 XHTML elements must always be closed
 XHTML elements must be in lowercase
 XHTML documents must have one root element

XHTML Elements Must Be Properly Nested


In HTML, some elements can be improperly nested within each other, like this:

<b><i>This text is bold and italic</b></i>

In XHTML, all elements must be properly nested within each other, like this:

<b><i>This text is bold and italic</i></b>

Note: A common mistake with nested lists, is to forget that the inside list must be within <li> and </li>
tags.

This is wrong:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
<li>Milk</li>
</ul>

This is correct:

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Notice that we have inserted a </li> tag after the </ul> tag in the "correct" code example.

XHTML Elements Must Always Be Closed


Non-empty elements must have a closing tag.

This is wrong:

<p>This is a paragraph
<p>This is another paragraph

This is correct:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Empty Elements Must Also Be Closed


Empty elements must also be closed.

This is wrong:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

This is correct:

A break: <br />


A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML Elements Must Be In Lower Case


Tag names and attributes must be in lower case.

This is wrong:

<BODY>
<P>This is a paragraph</P>
</BODY>

This is correct:

<body>
<p>This is a paragraph</p>
</body>

XHTML Documents Must Have One Root Element


All XHTML elements must be nested within the <html> root element. Child elements must be in pairs
and correctly nested within their parent element.

The basic document structure is:

<html>
<head> ... </head>
<body> ... </body>
</html>

XHTML Syntax

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

Attribute Names Must Be In Lower Case


This is wrong:

<table WIDTH="100%">

This is correct:

<table width="100%">

Attribute Values Must Be Quoted


This is wrong:
<table width=100%>

This is correct:

<table width="100%">

Attribute Minimization Is Forbidden


This is wrong:

<input checked>
<input readonly>
<input disabled>
<option selected>
<frame noresize>

This is correct:

<input checked="checked" />


<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />
<frame noresize="noresize" />

Here is a list of the minimized attributes in HTML and how they should be written in XHTML:

HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"

The Lang Attribute


The lang attribute applies to almost every XHTML element. It specifies the language of the content
within an element.
If you use the lang attribute in an element, you must also add the xml:lang attribute, like this:

<div lang="it" xml:lang="it">Ciao bella!</div>

Mandatory XHTML Elements


All XHTML documents must have a DOCTYPE declaration. The html, head, title, and body elements
must be present.

This is an XHTML document with a minimum of required tags:

<!DOCTYPE Doctype goes here>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>

<body>
</body>

</html>

Note: The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML
element. You will learn more about the XHTML DOCTYPE in the next chapter.

Note: The xmlns attribute in <html>, specifies the xml namespace for a document, and is required in
XHTML documents. However, the HTML validator at w3.org does not complain when the xmlns
attribute is missing. This is because the namespace "xmlns=http://www.w3.org/1999/xhtml" is default,
and will be added to the <html> tag even if you do not include it.

XHTML DTD
The most common DTD is XHTML Transitional.

<!DOCTYPE> Is Mandatory
An XHTML document consists of three main parts:

 the DOCTYPE declaration


 the <head> section
 the <body> section

The basic document structure is:

<!DOCTYPE ...>
<html>
<head>
<title>... </title>
</head>
<body> ... </body>
</html>

Note: The DOCTYPE declaration is always the first line in an XHTML document!

An XHTML Example
This is a simple (minimal) XHTML document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>simple document</title>
</head>
<body>
<p>a simple paragraph</p>
</body>
</html>

The DOCTYPE declaration above defines the document type. The rest of the document looks like
HTML.

Document Type Definitions (DTD)


 A DTD specifies the syntax of a web page in SGML
 DTDs are used by SGML applications, such as HTML, to specify rules for documents of a
particular type, including a set of elements and entity declarations
 An XHTML DTD describes in precise, computer-readable language, the allowed syntax of
XHTML markup

There are three XHTML DTDs:

 STRICT
 TRANSITIONAL
 FRAMESET

XHTML 1.0 Strict


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Use the strict DOCTYPE when you want really clean markup, free of presentational clutter. Use it
together with CSS.

XHTML 1.0 Transitional


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Use the transitional DOCTYPE when you want to still use HTML's presentational features.

XHTML 1.0 Frameset


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Use the frameset DOCTYPE when you want to use HTML frames.

XHTML HowTo

How W3Schools Was Converted To XHTML


W3Schools was converted from HTML to XHTML the weekend of 18. and 19. December 1999, by
Hege Refsnes and Ståle Refsnes.

To convert a Web site from HTML to XHTML, you should be familiar with the XHTML syntax rules
of the previous chapters. The following steps were executed (in the order listed below):

A DOCTYPE Was Added


The following DOCTYPE was added to the first line of every page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Tip: Your pages must have a DOCTYPE declaration if you want them to validate as correct XHTML.

Lowercase Tags And Attribute Names


A general "find-and-replace" function was executed to replace all uppercase tags with lowercase tags.
The same was done for attribute names.

All Attribute Values Were Quoted


Every page in W3Schools.com was checked to see that attribute values were quoted.
Empty Tags: <hr> , <br> and <img>
Empty tags are not allowed in XHTML. The <hr> and <br> tags should be replaced with <hr /> and
<br />.

A general "find-and-replace" function was executed to swap the tags.

We decided not to close the <img> tags with </img>, but with /> at the end of the tag. This was done
manually.

IMPORTANT Compatibility Note:

To make your XHTML compatible with today's browsers, you should add an extra space before the "/"
symbol.

W3Schools Was Validated


Finally, all our pages were validated against the official W3C DTD Validator:

W3C XHTML Validator.

A few more errors were found and edited manually. The most common error was missing </li> tags in
lists.

« Previous Next Chapter »

XHTML Validation
« Previous Next Chapter »

An XHTML document can be validated with W3C's validator.

Validate XHTML With A DTD


Before an XHTML file can be validated, a correct DTD must be added as the first line of the file.

The Strict DTD includes elements and attributes that have not been deprecated or do not appear in
framesets:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

The Frameset DTD includes everything in the transitional DTD plus frames as well:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"

Validate Your XHTML With The W3C Validator


Input a web address in the box below:

http://w w w .w 3schools.com/xhtml/default.asp

Validate the page

« Previous Next Chapter »

XHTML Modularization
« Previous Next Chapter »

The XHTML modularization-model defines the modules of XHTML.

Why XHTML Modularization?


XHTML contains most of the functionality a web developer will need.

For some purposes XHTML is too large and complex, and for other purposes it's too simple.

By splitting XHTML into modules, the W3C (World Wide web Consortium) has created small and
well-defined sets of XHTML elements that can be used separately for small devices, or combined with
other XML standards in more complex applications.

With modular XHTML, designers can:

 Choose the elements to be supported by a device


 Simplify XHTML for small devices
 Extend XHTML for complex applications by adding new XML functionality (like MathML,
SVG, Voice and Multimedia)
 Define XHTML profiles like XHTML Basic (a subset of XHTML for mobile devices)
XHTML Modules
W3C has split the definition of XHTML into 28 modules:

Module name Description


Applet Module Defines the deprecated* applet element
Base Module Defines the base element
Basic Forms Module Defines the basic forms elements
Basic Tables Module Defines the basic table elements
Bi-directional Text Module Defines the bdo element
Client Image Map Module Defines browser side image map elements
Edit Module Defines the editing elements del and ins
Forms Module Defines all elements used in forms
Frames Module Defines the frameset elements
Hypertext Module Defines the a element
Iframe Module Defines the iframe element
Image Module Defines the img element
Intrinsic Events Module Defines event attributes like onblur and onchange
Legacy Module Defines deprecated* elements and attributes
Link Module Defines the link element
List Module Defines the list elements ol, li, ul, dd, dt, and dl
Metainformation Module Defines the meta element
Name Identification Module Defines the deprecated* name attribute
Object Module Defines the object and param elements
Presentation Module Defines presentation elements like b and i
Scripting Module Defines the script and noscript elements
Server Image Map Module Defines server side image map elements
Structure Module Defines the elements html, head, title and body
Style Attribute Module Defines the style attribute
Style Sheet Module Defines the style element
Tables Module Defines the elements used in tables
Target Module Defines the target attribute
Text Module Defines text container elements like p and h1

* Deprecated elements should not be used in XHTML.


You Have Learned XHTML, Now What?
« Previous Next Chapter »

XHTML Summary
This tutorial has taught you how to create stricter and cleaner HTML pages.

You have learned that all XHTML elements must be properly nested, XHTML
documents must be well-formed, all tag names must be in lowercase, and that all
XHTML elements must be closed.

You have also learned that all XHTML documents must have a DOCTYPE declaration,
and that the html, head, title, and body elements must be present.

For more information on XHTML, please look at our XHTML reference.

Now You Know XHTML, What's Next?


The next step is to learn CSS and JavaScript.

CSS

CSS is used to control the style and layout of multiple Web pages all at once.

With CSS, all formatting can be removed from the HTML document and stored in a
separate file.

CSS gives you total control of the layout, without messing up the document content.

To learn how to create style sheets, please visit our CSS tutorial.

JavaScript

JavaScript can make your web site more dynamic.

A static web site is nice when you just want to show flat content, but a dynamic web site
can react to events and allow user interaction.

JavaScript is the most popular scripting language on the internet and it works with all
major browsers.

If you want to learn more about JavaScript, please visit our JavaScript tutorial.

You might also like