XHTML vs HTML

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.

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Which tag is a block element?

<div>Web Programming and Development</div>

Which CSS code displays the text underlined?

font-style: italic; text-decoration: underline; font-weight: 500;

h2 {
  text-decoration: underline;
}

Click on the JavaScript function that can access other function after a specified time.

insertBefore() setTimeout() querySelector()

function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);

Click on the instruction that returns the number of items of a multidimensional array in PHP.

count($array) count($array, 1) strlen()

$food =["fruits" =>["banana", "apple"), "veggie" =>["collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6

XHTML vs HTML

Html Course

XHTML syntax rules

Daily Test with Code Example

HTML

CSS

JavaScript

PHP-MySQL

Last accessed pages

Popular pages this month