Comenzando con xhtml

Instalación o configuración

Relación XHTML con HTML

XHTML es simplemente la versión serializada de HTML. XHTML originalmente estaba destinado a limpiar el marcado HTML para mejorar el soporte de estándares. Desafortunadamente, el trabajo del W3C en XHTML 2.0 no fue intuitivo y restó valor a la industria en su conjunto con HTML5. XHTML5 no es un estándar, aunque puede usar XHTML5 (XML serializado HTML5) con modificaciones menores. A continuación se proporcionan ejemplos para facilitar la adopción de XHTML5 y aclarar las ambigüedades en el estándar HTML5 donde XML no se tiene en cuenta.

Beneficios de XHTML

Debido a que XHTML usa el analizador XML de un navegador, es significativamente (aunque no absolutamente) menos propenso a errores de programación comunes. Si un desarrollador carga una aplicación XHTML con XML mal formado, la mayoría de los motores de renderizado de navegadores renderizarán hasta el XML malformado, mientras que el motor de renderizado Gecko (usado en Firefox) mostrará una página amarilla. En todos los casos, se mostrará un mensaje de error con los números de línea y columna donde se encontró el primer error de análisis XML encontrado. Muchos desarrolladores han cometido errores simples, como omitir una cita de un atributo HTML, lo que les obliga a pasar días tratando de determinar por qué uno o dos navegadores no muestran la página HTML como se esperaba. El uso de XHTML puede reducir drásticamente el tiempo de desarrollo sobre HTML. XHTML puede tener un refuerzo positivo para aprender a codificar HTML válido para las personas que están aprendiendo desarrollo web, ya que no permite que la aplicación XHTML se muestre en su totalidad con código mal formado y al dar un mensaje de error explícito que los nuevos desarrolladores pueden buscar en línea para trabajar. soluciones Dado que XHTML es un subconjunto de XML, tiene una compatibilidad muy alta con el software que funciona con XML en una amplia gama de usos industriales, comerciales y residenciales. Por último, debido a sus estrictos requisitos, el código XHTML en funcionamiento es automáticamente compatible con HTML y XML (sujeto a la ausencia de múltiples valores de atributo id iguales), mientras que HTML no es inherentemente compatible con otros cuerpos de HTML y XML, ya que no es inmediatamente evidente que el código HTML puede estar mal formado.

Inconvenientes de XHTML

Debido a las reglas mucho más estrictas del analizador XML, XHTML no es tan fácil, inicialmente, para los desarrolladores menos experimentados. XHTML no es tenido en cuenta a menudo por varios grupos, contiene ambigüedad con respecto a partes mal escritas del estándar HTML5 y no hay un validador explícito que declare soporte para XHTML5. XHTML es menos compatible con partes “más perezosas” de JavaScript, como innerHTML, que no serializa correctamente las nuevas partes del DOM; sin embargo, esto es más beneficioso para los desarrolladores dedicados que aprenden XHTML, ya que requiere un código más estricto e intercambiable.

Usando XHTML

XHTML es la combinación de HTML y el uso del analizador XML, que es una versión mucho más estricta del analizador HTML; todos los navegadores modernos tienen analizadores HTML para HTML y analizadores XML para XML (y posteriormente XHTML). XHTML no requiere una instalación de software (más allá de usar cualquier navegador moderno), sin embargo, una aplicación (X)HTML es solo XHTML cuando se sirve correctamente al navegador con un encabezado enviado por el servidor declarando application/xhtml+xml tipo mimo; puede verificar si su aplicación XHTML realmente se sirvió de esta manera al ver el tipo de medio/mimo/tipo en el panel de solicitudes de red de las herramientas de desarrollo web en su navegador. Una página servida como text/html no es XHTML y en su lugar será analizada por el analizador HTML del navegador.

Cargado desde un servidor

Al cargar un analizador XHTML desde el servidor, debe establecerse un encabezado, usar un elemento meta no tiene ningún propósito útil. En ejemplo en combinación con PHP:

<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 // Client header isset` and explicitly declares XHTML parser support.
 header('Content-Type: application/xhtml+xml; charset=UTF-8');
 echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
 echo '<!DOCTYPE html>'."\n";
 echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
 //Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
 echo '<!DOCTYPE html>'."\n";
 echo '<html>'."\n";
}
?>

Cargado desde un archivo

Si está realizando pruebas sin cargar una página desde una ruta de servidor (por ejemplo, localhost, 127.0.0.1, 192.168.xxx.yyy, etc.), la única forma de hacer que un navegador cargue una aplicación XHTML y use el analizador XML es dar la presentar una extensión .xhtml; ejemplo.xhtml.


Compatibilidad con navegador analizador XHTML/XML

Los navegadores con compatibilidad con XHTML a través de analizadores XML incluyen Internet Explorer 9+ (la compatibilidad con el analizador XML en versiones anteriores funciona de manera muy complicada con application/xml), Mozilla Suite 0.8+ (todas las versiones de Firefox), Opera 7+ y versiones anteriores de KHTML (Konqueror y, por lo tanto, todas las versiones de Safari y, por extensión, Chromium/Chrome).

Ejemplo completo de XHTML y JavaScript

El siguiente es un ejemplo completo del uso de XHTML con JavaScript servido por PHP como un solo archivo.

<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 // Client header isset` and explicitly declares XHTML parser support.
 header('Content-Type: application/xhtml+xml; charset=UTF-8');
 echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
 echo '<!DOCTYPE html>'."\n";
 echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
 //Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
 echo '<!DOCTYPE html>'."\n";
 echo '<html>'."\n";
}
?>
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
</style>
<script type="application/javascript">
//<![CDATA[
window.onload = function(event)
{
 alert('This JavaScript alert will load once the page has loaded.');
}
//]]>
</script>
</head>

<body>

<h1><span>XHTML and JavaScript Simple Demonstration</span></h1>

</body>
</html>

Agregar XML a una aplicación XHTML y recuperar XML de una aplicación XHTML

Al utilizar XHTML, debe evitar métodos como document.write e innerHTML, ya que tratan XML como texto y no serializan correctamente el código; un atributo id en HTML se descarga esencialmente en el DOM y el atributo id no está serializado, lo que significa que cuando se intenta hacer referencia a él con algo como document.getElementById('example'), el navegador no “ver” la identificación. Los siguientes ejemplos obtienen “obtener” código XHTML de y “establecer” código XHTML a la aplicación XHTML.

Agregar XHTML a y recuperar XML desde el DOM

<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
 // Client header isset` and explicitly declares XHTML parser support.
 header('Content-Type: application/xhtml+xml; charset=UTF-8');
 echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
 echo '<!DOCTYPE html>'."\n";
 echo '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'."\n";
}
else
{
 //Some browsers do not declare support, IE9 shamelessly uses `*/*` in example.
 echo '<!DOCTYPE html>'."\n";
 echo '<html>'."\n";
}
?>
<head>
<style type="text/css">
* {border: 0; margin: 0; padding: 0;}
</style>
<script type="application/javascript">
//<![CDATA[
function xml_get(target)
{
 return new XMLSerializer().serializeToString(target)
}

function xml_set(xml,position,target)
{
 if (typeof target=='string' && document.getElementById(target)) {target = document.getElementById(target);}

 if (!target) {alert('Error: target element was not found in the DOM.');}
 else if (position=='after')
 {
  if (target.nextSibling && target.nextSibling!='[object Text]') {target.insertBefore(xml.getElementsByTagName('*')[0],target.nextSibling);}
  else {target.parentNode.appendChild(xml.getElementsByTagName('*')[0]);}
 }
 else if (position=='before') {target.parentNode.insertBefore(document.importNode(xml.getElementsByTagName('*')[0],true),target);}
 else if (position=='inside') {target.appendChild(document.importNode(xml.getElementsByTagName('*')[0],true));}
 else if (position=='replace') {target.parentNode.replaceChild(document.importNode(xml.getElementsByTagName('*')[0],true),target);}
 else {alert('Error: unknown position to import data to: '+position+'.');}
}

window.onload = function(event)
{
 var xml_after = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>after</em> the h1[0] element!</p>','application/xml');
 var xml_before = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>before</em> the h1[0] element!</p>','application/xml');
 var xml_inside = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>inside</em> inside the element with the id <code>example</code>!</p>','application/xml');
 var xml_replace = new DOMParser().parseFromString('<p xmlns="http://www.w3.org/1999/xhtml">XML string for <em>replace</em> example!</p>','application/xml');
 xml_set(xml_after,'after',document.getElementsByTagName('h1')[0]);
 xml_set(xml_before,'before',document.getElementsByTagName('h1')[0]);
 xml_set(xml_inside,'inside','example');
 xml_set(xml_replace,'replace','example_replace');

 alert(xml_get(document));
}
//]]>
</script>
</head>

<body>

<h1><span>XHTML and JavaScript Simple Demonstration</span></h1>
<div id="example"></div>
<div id="example_replace"></div>

</body>
</html>

XHTML5 y atributos booleanos

HTML5 define algunos atributos HTML como booleanos; un booleano solo puede ser “verdadero” o “falso”. La especificación simplemente establece que la presencia de un atributo booleano implica que el atributo se establece en verdadero. En el ejemplo, usar un atributo deshabilitado en el siguiente ejemplo deshabilita el elemento de entrada del botón:

<input disabled type="button" value="HTML Button">

XML, y por lo tanto XHTML por extensión, debe tener un atributo y un valor válidos. Debido a que HTML5 no está escrito de manera que aclare tales cosas (la ambigüedad en los estándares anteriores ha llevado a diferentes implementaciones de navegador), los atributos de HTML5, cuando se sirven en una aplicación XHTML, siempre deben usar un valor “verdadero”, al menos hasta que una especificación futura elimine el valor innecesario. ambigüedad.

<input disabled="true" type="button" value="XHTML Button" />