XHTML

 

Reglas de sintaxis

Anidamiento

Debemos anidar los elementos correctamente:

Ejemplo incorrecto (solapamiento):

<p>Este lenguaje es <strong>más estricto que el anterior. </p></strong>

Ejemplo correcto (anidamiento):

<p>Este lenguaje es <strong>más estricto que el anterior. </strong></p>

Caja

Los nombres de las etiquetas y de los atributos tienen que estar en minúsculas.

Valores de atributos

Los valores de los atributos tienen que estar entre comillas dobles (") o simples (').

Simplificación de atributos

Los valores de atributos no se pueden simplificar.

Ejemplo incorrecto:

<option selected>una opción</option>

Ejemplo correcto:

<option selected="selected">una opción</option>

Elementos cerrados

Todos los elementos tienen que estar cerrados, tengan o no contenido.

Ejemplo incorrecto:

<p>un párrafo

<p>otro
<img src="unaimagen.jpg">

Ejemplo correcto:

<p>un párrafo</p>

<p>otro</p>
<img src="unaimagen.jpg" />

Elementos obligatorios

Algunos elemento son obligatorios (html, body, head, title).

El elemento HTML

El elemento raiz del documento debe contener una declaración xmlns para el espacio de nombres de XHTML.

<html xmlns="http://www.w3.org/1999/xhtml">

<script> y <style>

El contenido de los elementos <script> y <style> es una sección CDATA.

Ejemplo incorrecto:

<script type="text/javascript">

<!-- 

Un script

-->

</script>

Ejemplo correcto:

<script type="text/javascript">

Un script

</script>

Incompatibilidades entre elementos

A continuación se detallan las incompatibilidades en el anidamiento de elementos:

Ejercicios

Ejercicio 1

Corrige el siguiente código:

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

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<h1>Suspendisse  potenti.</h1>

<p> Nullam nonummy. Suspendisse fermentum hendrerit nisi. Suspendisse  potenti. </p>

<p>Praesent turpis metus, condimentum in, ullamcorper </p>

<h1> pellentesque lorem a turpis</h1>

<p>Integer condimentum nulla eget neque</p>

<p>augue enim vitae  mauri<p>

</body>

</html>

Ejercicio 2

Corrige el siguiente código:

<!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">

<head>

<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">

<title>Documento sin t&iacute;tulo</title>

</head>

<h1>Suspendisse  potenti.</h1>

<p> Nullam nonummy. Suspendisse fermentum hendrerit nisi. Suspendisse  potenti. </p>

<p>Praesent <a href='http://www.gag.com'>turpis metus</a>, condimentum in</p>

<p><img SRC="BR.GIF" width="8" height="8" alt="una imagen muy grande">

<table>

<tr>

<td>celda 1</td>

<td>celda 2</td>

</tr>

<tr>

<td>celda 1</tr>

<td>celda 2</td>

</td>

</table>

</html>

Ejercicio 3

Crea un documento XHTML con 5 errores de sintaxis e intercámbialo con un compañero para hacer las correcciones necesarias.