XHTML - Guía rápida
XHTML son las siglas de EXtensible HyperText MArkup Language. Es el siguiente paso en la evolución de Internet. XHTML 1.0 es el primer tipo de documento de la familia XHTML.
XHTML es casi idéntico a HTML 4.01 con pocas diferencias. Esta es una versión más limpia y estricta de HTML 4.01. Si ya conoce HTML, entonces necesita prestar poca atención para aprender esta última versión de HTML.
XHTML fue desarrollado por World Wide Web Consortium (W3C) para ayudar a los desarrolladores web a realizar la transición de HTML a XML. Al migrar a XHTML hoy, los desarrolladores web pueden ingresar al mundo XML con todos sus beneficios, mientras siguen confiando en la compatibilidad hacia atrás y futura del contenido.
¿Por qué utilizar XHTML?
Los desarrolladores que migran su contenido a XHTML 1.0 obtienen los siguientes beneficios:
Los documentos XHTML se ajustan a XML, ya que se ven, editan y validan fácilmente con herramientas XML estándar.
Los documentos XHTML se pueden escribir para que funcionen mejor que antes en los navegadores existentes, así como en los nuevos.
Los documentos XHTML pueden utilizar aplicaciones como scripts y subprogramas que se basan en el modelo de objetos de documento HTML o el modelo de objetos de documento XML.
XHTML le brinda un formato más consistente y bien estructurado para que sus páginas web puedan ser fácilmente analizadas y procesadas por navegadores web actuales y futuros.
Puede mantener, editar, convertir y formatear fácilmente su documento a largo plazo.
Dado que XHTML es un estándar oficial del W3C, su sitio web se vuelve más compatible con muchos navegadores y se procesa con mayor precisión.
XHTML combina la fuerza de HTML y XML. Además, las páginas XHTML pueden ser renderizadas por todos los navegadores habilitados para XML.
XHTML define el estándar de calidad para sus páginas web y, si lo sigue, sus páginas web se cuentan como páginas web de calidad. El W3C certifica esas páginas con su sello de calidad.
Los desarrolladores web y los diseñadores de navegadores web descubren constantemente nuevas formas de expresar sus ideas a través de nuevos lenguajes de marcado. En XML, es relativamente fácil introducir nuevos elementos o atributos de elementos adicionales. La familia XHTML está diseñada para acomodar estas extensiones a través de módulos XHTML y técnicas para desarrollar nuevos módulos compatibles con XHTML. Estos módulos permiten combinar funcionalidades nuevas y existentes a la hora de desarrollar contenidos y diseñar nuevos agentes de usuario.
Entendimiento básico
Antes de continuar, veamos rápidamente qué son HTML, XML y SGML.
¿Qué es SGML?
Esto es Standard Generalizado MArkup Lla aplicación de idioma inglés (SGML) conforme a la Norma Internacional ISO 8879. HTML es ampliamente considerado como el lenguaje de publicación estándar de la World Wide Web.
Este es un lenguaje para describir los lenguajes de marcado, particularmente los que se utilizan en el intercambio de documentos electrónicos, la gestión de documentos y la publicación de documentos. HTML es un ejemplo de un lenguaje definido en SGML.
¿Qué es XML?
XML significa EXtensible MArkup Language. XML es un lenguaje de marcado muy parecido al HTML y fue diseñado para describir datos. Las etiquetas XML no están predefinidas. Debes definir tus propias etiquetas de acuerdo a tus necesidades.
La sintaxis XHTML es muy similar a la sintaxis HTML y casi todos los elementos HTML válidos son válidos también en XHTML. Pero cuando escribe un documento XHTML, debe prestar un poco más de atención para que su documento HTML sea compatible con XHTML.
Estos son los puntos importantes que debe recordar al escribir un nuevo documento XHTML o convertir un documento HTML existente en un documento XHTML:
Escriba una declaración DOCTYPE al comienzo del documento XHTML.
Escriba todas las etiquetas y atributos XHTML solo en minúsculas.
Cierre todas las etiquetas XHTML correctamente.
Anida todas las etiquetas correctamente.
Cite todos los valores de los atributos.
Prohibir la minimización de atributos.
Reemplace la name atributo con el id atributo.
Dejar de lado el language atributo de la etiqueta de script.
Aquí está la explicación detallada de las reglas XHTML anteriores:
Declaración DOCTYPE
Todos los documentos XHTML deben tener una declaración DOCTYPE al principio. Hay tres tipos de declaraciones DOCTYPE, que se describen en detalle en el capítulo XHTML Doctypes. Aquí hay un ejemplo de uso de DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Sensibilidad a mayúsculas y minúsculas
XHTML es un lenguaje de marcado que distingue entre mayúsculas y minúsculas. Todas las etiquetas y atributos XHTML deben escribirse solo en minúsculas.
<!-- This is invalid in XHTML -->
<A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
<!-- Correct XHTML way of writing this is as follows -->
<a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>En el ejemplo, Href y etiqueta de anclaje A no están en minúsculas, por lo que es incorrecto.
Cerrar las etiquetas
Todas y cada una de las etiquetas XHTML deben tener una etiqueta de cierre equivalente, incluso los elementos vacíos también deben tener etiquetas de cierre. Aquí hay un ejemplo que muestra formas válidas e inválidas de usar etiquetas:
<!-- This is invalid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.
<!-- This is also invalid in XHTML -->
<img src="/images/xhtml.gif" >La siguiente sintaxis muestra la forma correcta de escribir las etiquetas anteriores en XHTML. La diferencia es que, aquí hemos cerrado ambas etiquetas correctamente.
<!-- This is valid in XHTML -->
<p>This paragraph is not written according to XHTML syntax.</p>
<!-- This is also valid now -->
<img src="/images/xhtml.gif" />Cotizaciones de atributos
Se deben citar todos los valores de los atributos XHTML. De lo contrario, su documento XHTML se asume como un documento no válido. Aquí está el ejemplo que muestra la sintaxis:
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" width=250 height=50 />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" width="250" height="50" />Minimización de atributos
XHTML no permite la minimización de atributos. Significa que debe indicar explícitamente el atributo y su valor. El siguiente ejemplo muestra la diferencia:
<!-- This is invalid in XHTML -->
<option selected>
<!-- Correct XHTML way of writing this is as follows -->
<option selected="selected">Aquí hay una lista de los atributos minimizados en HTML y la forma en que necesita escribirlos en XHTML:
| Estilo HTML | Estilo XHTML |
|---|---|
| compacto | compacto = "compacto" |
| comprobado | comprobado = "comprobado" |
| declarar | declare = "declare" |
| solo lectura | readonly = "readonly" |
| discapacitado | disabled = "discapacitado" |
| seleccionado | selected = "seleccionado" |
| aplazar | aplazar = "aplazar" |
| ismap | ismap = "ismap" |
| nohref | nohref = "nohref" |
| sin sombra | noshade = "noshade" |
| Nowrap | nowrap = "nowrap" |
| múltiple | multiple = "multiple" |
| no redimensionar | noresize = "noresize" |
El atributo id
El atributo id reemplaza al atributo de nombre. En lugar de usar name = "name", XHTML prefiere usar id = "id". El siguiente ejemplo muestra cómo:
<!-- This is invalid in XHTML -->
<img src="/images/xhtml.gif" name="xhtml_logo" />
<!-- Correct XHTML way of writing this is as follows -->
<img src="/images/xhtml.gif" id="xhtml_logo" />El atributo del idioma
El atributo de idioma de la etiqueta de secuencia de comandos está obsoleto. El siguiente ejemplo muestra esta diferencia:
<!-- This is invalid in XHTML -->
<script language="JavaScript" type="text/JavaScript">
document.write("Hello XHTML!");
</script>
<!-- Correct XHTML way of writing this is as follows -->
<script type="text/JavaScript">
document.write("Hello XHTML!");
</script>Etiquetas anidadas
Debe anidar todas las etiquetas XHTML correctamente. De lo contrario, su documento se asume como un documento XHTML incorrecto. El siguiente ejemplo muestra la sintaxis:
<!-- This is invalid in XHTML -->
<b><i> This text is bold and italic</b></i>
<!-- Correct XHTML way of writing this is as follows -->
<b><i> This text is bold and italic</i></b>Prohibiciones de elementos
Los siguientes elementos no pueden tener ningún otro elemento dentro de ellos. Esta prohibición se aplica a todas las profundidades de anidación. Significa, incluye todos los elementos descendentes.
| Elemento | Prohibición |
|---|---|
| <a> | No debe contener otros elementos <a>. |
| <pre> | No debe contener los elementos <img>, <object>, <big>, <small>, <sub> o <sup>. |
| <botón> | No debe contener los elementos <input>, <select>, <textarea>, <label>, <button>, <form>, <fieldset>, <iframe> o <isindex>. |
| <etiqueta> | No debe contener otros elementos <label>. |
| <formulario> | No debe contener otros elementos <form>. |
Un documento XHTML mínimo
El siguiente ejemplo le muestra un contenido mínimo de un documento XHTML 1.0 -
<?xml version="1.0" encoding="UTF-8"?>
<!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/TR/xhtml1" xml:lang="en" lang="en">
<head>
<title>Every document must have a title</title>
</head>
<body>
...your content goes here...
</body>
</html>Debido al hecho de que XHTML es una aplicación XML, se deben cambiar ciertas prácticas que eran perfectamente legales en HTML 4 basado en SGML. Ya ha visto la sintaxis XHTML en el capítulo anterior, por lo que las diferencias entre XHTML y HTML son muy obvias. A continuación se muestra la comparación entre XHTML y HTML.
Los documentos XHTML deben estar bien formados
La buena formación es un nuevo concepto introducido por XML. Básicamente, esto significa que todos los elementos deben tener etiquetas de cierre y usted debe anidarlos correctamente.
CORRECT: Nested Elements
<p>Here is an emphasized <em>paragraph</em>.</p>INCORRECT: Overlapping Elements
<p>Here is an emphasized <em>paragraph.</p></em>Los elementos y atributos deben estar en minúsculas
Los documentos XHTML deben usar minúsculas para todos los elementos HTML y nombres de atributos. Esta diferencia es necesaria porque se supone que el documento XHTML es un documento XML y XML distingue entre mayúsculas y minúsculas. Por ejemplo, <li> y <LI> son etiquetas diferentes.
Se requieren etiquetas finales para todos los elementos
En HTML, ciertos elementos pueden omitir la etiqueta final. Pero XML no permite que se omitan las etiquetas finales.
CORRECT: Terminated Elements
<p>Here is a paragraph.</p><p>here is another paragraph.</p>
<br><hr/>INCORRECT: Unterminated Elements
<p>Here is a paragraph.<p>here is another paragraph.
<br><hr>Los valores de atributo siempre se deben cotizar
Todos los valores de los atributos, incluidos los valores numéricos, deben estar entre comillas.
CORRECT: Quoted Attribute Values
<td rowspan="3">INCORRECT: Unquoted Attribute Values
<td rowspan=3>Minimización de atributos
XML no admite la minimización de atributos. Los pares atributo-valor deben escribirse en su totalidad. Los nombres de atributos como compact y check no pueden aparecer en elementos sin que se especifique su valor.
CORRECT: Non Minimized Attributes
<dl compact="compact">INCORRECT: Minimized Attributes
<dl compact>Manejo de espacios en blanco en valores de atributo
Cuando un navegador procesa atributos, hace lo siguiente:
Elimina los espacios en blanco iniciales y finales.
Asigna secuencias de uno o más caracteres de espacio en blanco (incluidos los saltos de línea) a un solo espacio entre palabras.
Elementos de escritura y estilo
En XHTML, el script y los elementos de estilo no deben tener caracteres “<” y “&” directamente, si existen; luego se tratan como el inicio del marcado. Las entidades como "<" y "&" son reconocidas como referencias de entidad por el procesador XML para mostrar los caracteres "<" y "&" respectivamente.
Envolver el contenido del script o elemento de estilo dentro de una sección marcada con CDATA evita la expansión de estas entidades.
<script type="text/JavaScript">
<![CDATA[
... unescaped VB or Java Script here... ...
]]>
</script>Una alternativa es utilizar documentos de estilo y guiones externos.
Los elementos con atributos de identificación y nombre
XHTML recomienda el reemplazo del atributo de nombre con el atributo id . Tenga en cuenta que en XHTML 1.0, el atributo de nombre de estos elementos está formalmente en desuso y se eliminará en versiones posteriores de XHTML.
Atributos con conjuntos de valores predefinidos
Tanto HTML como XHTML tienen algunos atributos que tienen conjuntos de valores predefinidos y limitados. Por ejemplo,type atributo del inputelemento. En HTML y XML, estos se denominanenumerated attributes. En HTML 4, la interpretación de estos valores no distingue entre mayúsculas y minúsculas, por lo que un valor deTEXT era equivalente a un valor de text.
En XHTML, la interpretación de estos valores distingue entre mayúsculas y minúsculas, por lo que todos estos valores se definen en minúsculas.
Referencias de entidad como valores hexadecimales
Tanto HTML como XML permiten referencias a caracteres mediante el uso de valores hexadecimales. En HTML, estas referencias se pueden hacer utilizando&#Xnn; o &#xnn; y son válidos, pero en documentos XHTML, debe usar la versión en minúsculas solo, como &#xnn;.
El elemento <html> es imprescindible
Todos los elementos XHTML deben estar anidados dentro del elemento raíz <html>. Todos los demás elementos pueden tener subelementos que deben estar en pares y correctamente anidados dentro de su elemento padre. La estructura básica del documento es:
<!DOCTYPE html....>
<html>
<head> ... </head>
<body> ... </body>
</html>El estándar XHTML define tres definiciones de tipo de documento (DTD). El más utilizado y sencillo es el documento de transición XHTML.
Las definiciones de tipo de documento XHTML 1.0 corresponden a tres DTD:
- Strict
- Transitional
- Frameset
Hay pocos elementos y atributos XHTML, que están disponibles en una DTD pero no están disponibles en otra DTD. Por lo tanto, mientras escribe su documento XHTML, debe seleccionar sus elementos o atributos XHTML con cuidado. Sin embargo, el validador XHTML le ayuda a identificar elementos y atributos válidos e inválidos.
Consulte Validaciones XHTML para obtener más detalles sobre esto.
XHTML 1.0 estricto
Si planea usar la hoja de estilo en cascada (CSS) estrictamente y evita escribir la mayoría de los atributos XHTML, se recomienda usar este DTD. Un documento conforme a esta DTD es de la mejor calidad.
Si desea utilizar XHTML 1.0 Strict DTD, debe incluir la siguiente línea en la parte superior de su documento XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">XHTML 1.0 Transicional
Si planea usar muchos atributos XHTML, así como algunas propiedades de hojas de estilo en cascada, entonces debe adoptar esta DTD y debe escribir su documento XHTML en consecuencia.
Si desea utilizar XHTML 1.0 Transitional DTD, debe incluir la siguiente línea en la parte superior de su documento XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Conjunto de marcos XHTML 1.0
Puede usar esto cuando desee usar marcos HTML para dividir la ventana del navegador en dos o más marcos.
Si desea utilizar XHTML 1.0 Frameset DTD, debe incluir la siguiente línea en la parte superior de su documento XHTML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">Note- No importa qué DTD esté utilizando para escribir su documento XHTML; si es un documento XHTML válido, entonces su documento se considera un documento de buena calidad.
Hay algunos atributos XHTML / HTML que son estándar y están asociados a todas las etiquetas XHTML / HTML. Estos atributos se enumeran aquí con una breve descripción:
Atributos fundamentales
No es válido en elementos base, head, html, meta, param, script, style y title.
| Atributo | Valor | Descripción |
|---|---|---|
| clase | class_rule o style_rule | La clase del elemento. |
| Carné de identidad | id_name | Una identificación única para el elemento. |
| estilo | style_definition | Una definición de estilo en línea. |
| Título | tooltip_text | Un texto para mostrar en la punta del mouse. |
Atributos del idioma
los langEl atributo indica el idioma que se utiliza para el contenido adjunto. El idioma se identifica utilizando las abreviaturas del idioma estándar ISO, comofr para francés, enpara inglés, etc. Más códigos y sus formatos se describen en www.ietf.org .
No es válido en elementos base, br, frame, frameset, hr, iframe, param y script.
| Atributo | Valor | Descripción |
|---|---|---|
| dir | ltr | rtl | Establece la dirección del texto. |
| lang | Código de lenguaje | Establece el código de idioma. |
Atributos de propiedad de Microsoft
Microsoft introdujo una serie de nuevos atributos patentados con Internet Explorer 4 y versiones superiores.
| Atributo | Valor | Descripción |
|---|---|---|
| llave de acceso | personaje | Establece un atajo de teclado para acceder a un elemento. |
| idioma | cuerda | Este atributo especifica el lenguaje de secuencias de comandos que se utilizará con una secuencia de comandos asociada vinculada al elemento, normalmente a través de un atributo de controlador de eventos. Los valores posibles pueden incluir JavaScript, jScript, VBS y VBScript. |
| tabindex | número | Establece el orden de tabulación de un elemento. |
| contento | booleano | Permite a los usuarios editar contenido renderizado en Internet Explorer 5.5 o superior. Los valores posibles son verdadero o falso. |
| discapacitado | booleano | Los elementos con el conjunto de atributos desactivados pueden aparecer descoloridos y no responderán a la entrada del usuario. Los valores posibles son verdadero o falso. |
| esconderse | Encendido o apagado | Este atributo propietario, introducido con Internet Explorer 5.5, oculta el enfoque en el contenido de un elemento. El foco debe aplicarse al elemento mediante el atributo tabindex. |
| no seleccionable | Encendido o apagado | Se utiliza para evitar que se seleccione el contenido que se muestra en Internet Explorer 5.5. |
Cuando los usuarios visitan un sitio web, hacen cosas como hacer clic en texto, imágenes e hipervínculos, desplazarse sobre cosas, etc. Estos son ejemplos de lo que JavaScript llama eventos.
Podemos escribir nuestros controladores de eventos en JavaScript o VBScript y podemos especificar estos controladores de eventos como un valor de atributo de etiqueta de evento. El XHTML 1.0 tiene un conjunto similar de eventos que está disponible en la especificación HTML 4.01.
Eventos de nivel <body> y <frameset>
Solo hay dos atributos que se pueden usar para activar cualquier código JavaScript o VBScript, cuando ocurre cualquier evento a nivel de documento.
| Atributo | Valor | Descripción |
|---|---|---|
| onload | Guión | El script se ejecuta cuando se carga un documento XHTML. |
| descargar | Guión | El script se ejecuta cuando se descarga un documento XHTML. |
Note - Aquí, el script se refiere a cualquier función o fragmento de código de VBScript o JavaScript.
Eventos de nivel <form>
Hay los siguientes seis atributos que se pueden usar para activar cualquier código JavaScript o VBScript cuando ocurre un evento a nivel de formulario.
| Atributo | Valor | Descripción |
|---|---|---|
| onchange | Guión | El script se ejecuta cuando cambia el elemento. |
| onsubmit | Guión | El script se ejecuta cuando se envía el formulario. |
| reiniciar | Guión | La secuencia de comandos se ejecuta cuando se restablece el formulario. |
| onselect | Guión | El script se ejecuta cuando se selecciona el elemento. |
| en la falta de definición | Guión | El script se ejecuta cuando el elemento pierde el foco. |
| enfocado | Guión | El script se ejecuta cuando el elemento se enfoca. |
Eventos de teclado
Los siguientes tres eventos son generados por teclado. Estos eventos no son válidos en los elementos base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style y title.
| Atributo | Valor | Descripción |
|---|---|---|
| onkeydown | Guión | El script se ejecuta al presionar una tecla. |
| onkeypress | Guión | El script se ejecuta al presionar y soltar una tecla. |
| onkeyup | Guión | El script ejecuta la liberación de claves. |
Otros eventos
Los siguientes siete eventos son generados por el mouse cuando entra en contacto con cualquier etiqueta HTML. Estos eventos no son válidos en los elementos base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style y title.
| Atributo | Valor | Descripción |
|---|---|---|
| al hacer clic | Guión | El script se ejecuta con un clic del mouse. |
| ondblclick | Guión | El script se ejecuta con un doble clic del mouse. |
| onmousedown | Guión | El script se ejecuta cuando se presiona el botón del mouse. |
| onmousemove | Guión | El script se ejecuta cuando se mueve el puntero del mouse. |
| onmouseout | Guión | El script se ejecuta cuando el puntero del mouse se mueve fuera de un elemento. |
| el ratón por encima | Guión | El script se ejecuta cuando el puntero del mouse se mueve sobre un elemento. |
| onmouseup | Guión | El script se ejecuta cuando se suelta el botón del mouse. |
El W3C ha ayudado a que la comunidad de desarrollo de contenido de Internet pase de los días de marcado mal formado y no estándar al mundo válido y bien formado de XML. En XHTML 1.0, este movimiento fue moderado por el objetivo de proporcionar una fácil migración de contenido existente basado en HTML 4 (o anterior) a XHTML y XML.
El W3C ha eliminado el soporte para elementos y atributos obsoletos de la familia XHTML. Estos elementos y atributos tenían una funcionalidad orientada en gran medida a la presentación que se maneja mejor a través de hojas de estilo o comportamiento predeterminado específico del cliente.
Ahora, el Grupo de Trabajo HTML del W3C ha definido un tipo de documento inicial basado únicamente en módulos que son XHTML 1.1. Este tipo de documento está diseñado para ser portátil a una amplia colección de dispositivos de cliente y aplicable a la mayoría del contenido de Internet.
Conformidad del documento
El XHTML 1.1 proporciona una definición de documentos XHTML estrictamente conformes que DEBEN cumplir con todos los criterios siguientes:
El documento DEBE ajustarse a las restricciones expresadas en la definición de tipo de documento XHTML 1.1.
El elemento raíz del documento DEBE ser <html>.
El elemento raíz del documento DEBE designar el espacio de nombres XHTML utilizando el atributo xmlns .
El elemento raíz PUEDE contener también un atributo de ubicación de esquema como se define en el esquema XML.
DEBE haber una declaración DOCTYPE en el documento antes del elemento raíz. Si está presente, el identificador público incluido en la declaración DOCTYPE DEBE hacer referencia a la DTD que se encuentra en la definición de tipo de documento XHTML 1.1.
Aquí hay un ejemplo de un documento XHTML 1.1:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
<head>
<title>This is the document title</title>
</head>
<body>
<p>Moved to <a href="http://example.org/">example.org</a>.</p>
</body>
</html>Note- En este ejemplo, se incluye la declaración XML. No se requiere una declaración XML como la anterior en todos los documentos XML. Se recomienda encarecidamente a los autores de documentos XHTML que utilicen declaraciones XML en todos sus documentos. Esta declaración es necesaria cuando la codificación de caracteres del documento no es UTF-8 o UTF-16 predeterminada.
Módulos XHTML 1.1
El tipo de documento XHTML 1.1 se compone de los siguientes módulos XHTML.
Structure Module- El módulo de estructura define los principales elementos estructurales de XHTML. Estos elementos actúan efectivamente como base para el modelo de contenido de muchos tipos de documentos de la familia XHTML. Los elementos y atributos incluidos en este módulo son: cuerpo, encabezado, html y título.
Text Module - Este módulo define todos los elementos básicos del contenedor de texto, atributos y su modelo de contenido: abbr, acrónimo, dirección, blockquote, br, cite, code, dfn, div, em, h1, h2, h3, h4, h5, h6 , kbd, p, pre, q, samp, span, strong y var.
Hypertext Module- El módulo de hipertexto proporciona el elemento que se utiliza para definir enlaces de hipertexto a otros recursos. Este módulo admite el elemento a.
List Module- Como sugiere su nombre, el Módulo de listas proporciona elementos orientados a listas. Específicamente, el módulo de lista admite los siguientes elementos y atributos: dl, dt, dd, ol, ul y li.
Object Module- El módulo de objetos proporciona elementos para la inclusión de objetos de uso general. Específicamente, el módulo de objetos admite: objeto y parámetro.
Presentation Module - Este módulo define elementos, atributos y un modelo de contenido mínimo para un marcado simple relacionado con la presentación: b, big, hr, i, small, sub, sup y tt.
Edit Module - Este módulo define elementos y atributos para su uso en el marcado relacionado con la edición: del e ins.
Bidirectional Text Module - El módulo de texto bidireccional define un elemento que se puede utilizar para declarar las reglas bidireccionales para el contenido del elemento: bdo.
Forms Module- Proporciona todas las funciones de formulario que se encuentran en HTML 4.0. Específicamente, admite: botón, conjunto de campos, formulario, entrada, etiqueta, leyenda, selección, grupo de opciones, opción y área de texto.
Table Module - Admite los siguientes elementos, atributos y modelo de contenido: título, col, grupo col, tabla, tbody, td, tfoot, th, thead y tr.
Image Module- Proporciona incrustación de imágenes básica y se puede utilizar en algunas implementaciones de mapas de imágenes del lado del cliente de forma independiente. Es compatible con el elemento - img.
Client-side Image Map Module - Proporciona elementos para mapas de imágenes del lado del cliente: área y mapa.
Server-side Image Map Module- Proporciona soporte para la selección de imágenes y la transmisión de coordenadas de selección. El módulo de mapa de imágenes del lado del servidor admite: atributo ismap en img.
Intrinsic Events Module - Soporta todos los eventos discutidos en XHTML Events.
Meta information Module- El módulo de metainformación define un elemento que describe información dentro de la parte declarativa de un documento. Incluye elemento meta.
Scripting Module- Define los elementos utilizados para contener información perteneciente a scripts ejecutables o la falta de soporte para scripts ejecutables. Los elementos y atributos incluidos en este módulo son: noscript y script.
Style Sheet Module- Define un elemento que se utilizará al declarar hojas de estilo internas. El elemento y atributo definido por este módulo es estilo.
Style Attribute Module (Deprecated) - Define el atributo de estilo.
Link Module- Define un elemento que se puede utilizar para definir enlaces a recursos externos. Es compatible con el elemento de enlace .
Base Module- Define un elemento que se puede usar para definir un URI base contra el cual se resuelven los URI relativos en el documento. El elemento y atributo incluidos en este módulo es - base .
Ruby Annotation Module - XHTML también usa el módulo Ruby Annotation como se define en RUBY y admite: ruby, rbc, rtc, rb, rt y rp.
Cambios de XHTML 1.0 Strict
Esta sección describe las diferencias entre XHTML 1.1 y XHTML 1.0 Strict. XHTML 1.1 representa una desviación tanto de HTML 4 como de XHTML 1.0.
El más significativo es la eliminación de funciones que estaban en desuso.
Los cambios se pueden resumir de la siguiente manera:
En cada elemento, el atributo lang se ha eliminado en favor del atributo xml: lang .
En los elementos <a> y <map>, el atributo name se ha eliminado en favor del atributo id.
Se ha añadido la colección de elementos rubí .
Este capítulo enumera varios consejos y trucos que debe tener en cuenta al escribir un documento XHTML. Estos consejos y trucos pueden ayudarlo a crear documentos eficaces.
Consejos para diseñar documentos XHTML
Aquí hay algunas pautas básicas para diseñar documentos XHTML:
Diseño para servir e involucrar a su audiencia
Cuando piensa en satisfacer lo que quiere su audiencia, necesita diseñar documentos efectivos y atractivos para cumplir con el propósito. Su documento debe ser fácil para encontrar la información requerida y brindar un entorno familiar.
Por ejemplo, los académicos o médicos se sienten cómodos con un documento similar a una revista con oraciones largas, diagramas complejos, terminologías específicas, etc., mientras que el documento al que acceden los niños en edad escolar debe ser simple e informativo.
Reutiliza tu documento
Reutilice sus documentos exitosos creados previamente en lugar de comenzar desde cero cada vez que empaca un nuevo proyecto.
Dentro del documento XHTML
Aquí hay algunos consejos sobre los elementos dentro del documento XHTML:
La declaración XML
No se requiere una declaración XML en todos los documentos XHTML, pero se recomienda encarecidamente a los autores de documentos XHTML que utilicen declaraciones XML en todos sus documentos. Dicha declaración es necesaria cuando la codificación de caracteres del documento no es UTF-8 o UTF-16 predeterminada.
Elementos vacíos
Incluyen un espacio antes del final / y> de elementos vacíos. Por ejemplo, <br />, <hr /> y <img src = "/ html / xhtml.gif" alt = "xhtml" />.
Hojas de estilo y guiones incrustados
Utilice hojas de estilo externas si su hoja de estilo usa “<”, “&”, “]]>” o “-”.
Utilice secuencias de comandos externas si su secuencia de comandos utiliza “<”, “&” o “]]>” o “-”.
Saltos de línea dentro de los valores de atributo
Evite los saltos de línea y múltiples espacios en blanco dentro de los valores de los atributos. Estos se manejan de manera inconsistente por diferentes navegadores.
Elemento Isindex
No incluya más de un elemento isindex en el encabezado del documento. El elemento isindex está en desuso en favor del elemento de entrada.
Los atributos lang y xml: lang
Utilice los atributos lang y xml: lang al especificar el idioma de un elemento. El valor del atributo xml: lang tiene prioridad.
Identificadores de elementos
XHTML 1.0 ha desaprobado los atributos de nombre de los elementos a, applet, form, frame, iframe, img y map . Se eliminarán de XHTML en versiones posteriores. Por lo tanto, comience a usar el elemento id para la identificación del elemento.
Usar ampersands en valores de atributo
El carácter comercial ("&") debe presentarse como una referencia de entidad &.
Ejemplo
<!-- This is invalid in XHTML -->
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=user.
<!-- Correct XHTML way of writing this is as follows -->
http://my.site.dom/cgi-bin/myscript.pl?class=guest&name=userCaracteres de espacio en blanco en HTML y XML
Algunos caracteres que son legales en documentos HTML son ilegales en documentos XML. Por ejemplo, en HTML, el carácter de alimentación de formulario (U + 000C) se trata como un espacio en blanco, en XHTML, debido a la definición de caracteres de XML, es ilegal.
Referencia de carácter con nombre & Apos;
La referencia de carácter con nombre '(el apóstrofe, U + 0027) se introdujo en XML 1.0 pero no aparece en HTML. Por tanto, los desarrolladores web deberían utilizar & # 39; en lugar de 'para funcionar como se esperaba en los navegadores web HTML 4.
Cada documento XHTML se valida contra una definición de tipo de documento. Antes de validar un archivo XHTML correctamente, se debe agregar un DTD correcto como primera o segunda línea del archivo.
Una vez que esté listo para validar su documento XHTML, puede usar W3C Validator para validar su documento. Esta herramienta es muy útil y le ayuda a solucionar los problemas con su documento. Esta herramienta no requiere ninguna experiencia para realizar la validación.
La siguiente declaración en el cuadro de texto le muestra detalles. Debe proporcionar la URL completa de la página, que desea validar y luego hacer clicValidate Page botón.
Ingrese la dirección de su página en el cuadro a continuación:
Este validador verifica la validez de marcado de documentos web con varios formatos, especialmente en HTML, XHTML, SMIL, MathML, etc.
Hay otras herramientas para realizar otras validaciones diferentes.
Suponemos que ha entendido todos los conceptos relacionados con XHTML. Por lo tanto, debería poder escribir su documento HTML en un documento XHTML bien formado y obtener una versión más limpia de su sitio web.
Conversión de HTML a XHTML
Puede convertir su sitio web HTML existente en un sitio web XHTML.
Repasemos algunos pasos importantes. Para convertir su documento existente, primero debe decidir a qué DTD se va a adherir e incluir la definición del tipo de documento en la parte superior del documento.
Asegúrese de tener todos los demás elementos necesarios. Estos incluyen un elemento raíz <html> que indica un espacio de nombres XML, un elemento <head>, un elemento <title> contenido dentro del elemento <head> y un elemento <body>.
Convierta todas las palabras clave de los elementos y los nombres de los atributos a minúsculas.
Asegúrese de que todos los atributos tengan el formato nombre = "valor".
Asegúrese de que todos los elementos del contenedor tengan etiquetas de cierre.
Coloque una barra diagonal dentro de todos los elementos independientes. Por ejemplo, vuelva a escribir todos los elementos <br> como <br />.
Designe el código del script del lado del cliente y el código de la hoja de estilo como secciones CDATA.
Próximas versiones de XHTML
Aún se está mejorando XHTML y se ha redactado su próxima versión XHTML 1.1. Hemos discutido esto en detalle en el capítulo XHTML Versión 1.1.
Etiquetas, caracteres y entidades XHTML
Las etiquetas, caracteres y entidades XHTML son iguales que HTML, por lo que si ya conoce HTML, no necesita esforzarse más para aprender estos temas, especialmente para XHTML. También hemos enumerado todo el material HTML junto con el tutorial XHTML, porque también son aplicables a XHTML.
¿Lo que sigue?
Hemos enumerado varios recursos para XHTML y HTML, por lo que si está interesado y tiene tiempo disponible, le recomendamos que consulte estos recursos para mejorar su comprensión de XHTML. De lo contrario, este tutorial debe haberle dado suficiente conocimiento para escribir sus páginas web usando XHTML.
Sus comentarios sobre este tutorial son bienvenidos en [email protected]