The explanation from this tutorial are for those who already know HTML, presented in detail in previous lessons of this course.
XHTML (eXtensible HyperText Markup Language) has the same role and capabilities as HTML, it's a more advanced version of HTML, but with a slightly different syntax, more strict.
XHTML is a modern replacement for HTML, a combination between HTML and XML, it is almost identical to HTML 4.01.
The main difference that should be considered from HTML to XHTML is its syntax; all tags and attributes must be write in lowercase.
If you already know HTML, by following the rules of XHTML syntax, described below, can be said that you know XHTML too.
XHTML syntax rules
1) For an XHTML document to be considered valid, a correct DTD must be added as the first line of the file.
A DTD (
Document Type Definitions) contains the standard rules and the allowed syntax of the elements on the page.
There are three XHTML DTDs:
Strict, Transitional and
Frameset.
- Strict - used for a strict syntax, with no element that is not part of XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- Transitional - Widely used by web-authoring tools. Allows some flexibility in coding. This 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">
- Frameset - rarely used. This is for pages that use frames:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
- HTML5 uses:
<!DOCTYPE HTML>
After one of these statements it should be added the code for XHTML document structure, as shown in the following example (
the standard structure of an XHTML web page):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<meta name="description" content="Page description" />
<meta name="keywords" content="principal, keywords, in page" />
</head>
<body>
... The content of page that is displayed in the Web browser.
</body>
</html>
2) Tag names and attributes must be in
lower case.
- Incorect: <DIV> Incorect </DIV>
- Corect: <div> Corect </div>
- Incorect: <p Class="val"> Incorect </p>
- Corect: <p class="val"> Corect </p>
3) Attribute values must be
quoted.
- Incorect: <table width=80%>
- Corect: <table width="80%">
4) Unlike HTML, where elements are closed with a second tag (identical), and some do not use closing tag, in XHTML all elements must be closed and there are specific elements which have singular closing, in the same tag .
In XHTML |
In HTML |
<meta ... /> |
<meta ...> |
<br /> |
<br> |
<hr /> |
<hr> |
<input /> |
<input> |
<img ... /> |
<img ...> |
- Other items, such as:
<p> </p>, <div> </div>, <span> </span>, ..., etc., are identical.
5) In XHTML, all elements must be properly nested within each other.
- Incorect: <b><i> Text </b></i>
- Corect: <b><i> Text </i></b>
6) All attributes must have a value.
In HTML there are attributes (like "checked") which are written without any value.
Here are some of the most common:
In XHTML |
In HTML |
checked="checked" |
checked |
declare="declare" |
declare |
readonly="readonly" |
readonly |
disabled="disabled" |
disabled |
selected="selected" |
selected |
nowrap="nowrap" |
nowrap |
noresize="noresize" |
noresize |
7) The
name attribute of the <a> and <map> tags was replaced with
id.