HTML vs XHTML - climate.cs.buap.mxclimate.cs.buap.mx/.../Notas/04_HTML_vs_XHTML.pdf · Si has utilizado alguna vez HTML puedes apoyar tus conocimientos en la lista ... Una nueva losofía

HTML vs XHTML

Facultad de Ciencias de la Computación

Juan Carlos Conde R.

Web Technologies

Introducción La importancia de XML Propósito de XHTML Diferencias Básicas

Contenido

1 Introducción

2 La importancia de XML

3 Propósito de XHTML

4 Diferencias Básicas

1 / 31


Contenido

1 Introducción




2 / 31


La base es HTML

Si has utilizado alguna vez HTML puedes apoyar tus conocimientos en la listade diferencias con XHTML que se presentan en este documento.

Esto ayudará a entender este lenguaje evolución de HTML.

Sin embargo, más allá de comenzar a trabajar con un nuevo formato debesentender:

¾Qué es exactamente XHTML?

3 / 31


Signi�cado de XHTML

XHTML es un lenguaje similar a HTML, pero con algunas diferencias que lohacen:

I mucho más robusto y

I útil en modelado de páginas web

Las siglas XHTML se corresponden con las palabras en inglés eXtensible Hyper-

Text Markup Language, que en castellano es algo parecido a �lenguaje extensiblede marcado e hipertexto�.

4 / 31


HTML y su evolución poco controlada

Como sabes, HTML tiene diferentes versiones, en las que ha cambiado bastantecon respecto a la idea inicial.

Dado que la web ha crecido y evolucionado bastante rápido, incluso con mayorvelocidad que los propios estándares de HTML, se ha visto superada por lasnecesidades de las empresas y desarrolladores.

Al surgir necesidades como la incorporación de vídeo, sonido, animaciones com-plejas, etc., HTML ha crecido varias veces sin considerar las reglas de�nidas porel W3C.

5 / 31


Contenido

1 Introducción




6 / 31


La base es XML

XHTML es una vuelta atrás; ya que intenta recuperar la línea marcada por losestándares, y al mismo tiempo un vistazo hacía el futuro; ya que lo prepara paraadaptarse a las nuevas necesidades y corrientes tecnológicas.

XML es un lenguaje de marcado que sirve como base para crear otros lenguajesmultidisciplinarios. Además soluciona muchas necesidades de tipos de documen-

tos colectivos, necesarios para esta nueva cultura de la información.

7 / 31


¾Por qué es tan útil XML?

XML es un lenguaje que también funciona con etiquetas, igual que HTML, perocuyas reglas de creación de documentos son mucho más estrictas que las delpropio lenguaje HTML.

Ésto da pie a la posibilidad de procesarlos automáticamente por programas

informáticos.

Este pequeño detalle, realmente es la base para toda una serie de ventajas quehacen que XML sea una �herramienta� ideal para el momento actual, donde lainformación circula sin límite por las redes globales

Por lo tanto, XHTML intenta aprovecharse de ello.

8 / 31


XHTML: La versión XML de HTML

Desde el punto de vista del desarrollador:

I XHTML hereda la rigidez de XML, con lo cual NO se puede escribir docu-mentos XHTML de cualquier manera, como ocurría con HTML, sino aten-diendo a ciertas normas.

I Ese detalle, que en principio pueda parecer una limitación, en realidad tieneuna serie de ventajas.

I Se puede procesar su contenido por cualquier programa informático (igualque ocurre con el XML).

I Los navegadores no tienen por qué dejar de ser compatibles intentandointerpretar lo que el desarrollador ha querido escribir ni solucionar los posibleserrores de código cometidos, como ocurría con HTML.

9 / 31


Contenido

1 Introducción




10 / 31


Una nueva �losofía de modelado

XHTML no es sólo un HTML con sintaxis XML.

En realidad XHTML incorporta una nueva concepción o �losofía de modeladode páginas web; busca la creación de una Web Semántica.

HTML tiene muchas etiquetas y atributos (como align, bgcolor o vspace)que expresan la forma con la que tiene que mostrarse un elemento, es decir,sirven para de�nir el aspecto de los contenidos de la página.

Con el constante uso de HTML y la evolución de la web, se ha demostrado que½todo lo anterior era incorrecto!.

11 / 31


XHTML como lenguaje semántico

Lo ideal es que los desarrolladores escriban el contenido de manera que se expreseQUÉ es cada cosa y no cómo tiene que verse cada cosa. De ese modo, la websería semántica, porque se especi�caría sólo el signi�cado de cada elemento y nocómo se debe de visualizar.

NOTA: Para de�nir el aspecto de las páginas existen otros mecanismos y nos estamosre�riendo al lenguaje CSS, que sirve para especi�car cómo deben de mostrarse loselementos de la página, en cada uno de sus contenidos.

XHTML suprime todas las etiquetas y atributos que sirven para de�nir el as-pecto y sólo permite las etiquetas que sirven para de�nir el signi�cado de cadaelemento de la página.

12 / 31


Por ejemplo

La etiqueta <strong> sirve para de�nir que una información está destacada. Escorrecto, porque sirve para de�nir qué es ese contenido (un texto a resaltar).

Sin embargo, otras etiquetas como B no son correctas, porque sirven para de�nircómo debe mostrarse un texto en concreto (en Bold, negrita).

La Web Semántica permite separar el contenido de la vista o presentación y esees el objetivo desde hace años, un tema que se ha puesto en práctica medianteel uso de XHTML.

13 / 31


Contenido

1 Introducción




14 / 31


Funcionamiento similar a HTML

Algo cierto es que el funcionamiento que ya conocíamos de HTML y la mayoría desus principales etiquetas, siguen permaneciendo igual. En consecuencia, con unospocos cambios en las costumbres de codi�cación con HTML, podrás comenzara trabajar con XHTML sin demasiados problemas.

En XHTML estamos obligados a especi�car cosas como el juego de caracteres,el DTD que estamos utilizando con el Doctype o un nuevo elemento BODY unpoco más complejo.

15 / 31


El DOCTYPE XHTML

El DOCTYPE se encarga de decirle al navegador qué contiene el archivo queestá abriendo. Nosotros usaremos la especi�cación XHTML 1.0 Strict, que esesta:

<!DOCTYPE html PUBLIC �-//W3C//DTD XHTML 1.0 Strict//EN�

�http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd�>

El DOCTYPE anterior es de tipo XHTML estricto, pero podríamos elegir otrosdoctypes para XHTML, por ejemplo el transicional.

NOTA: Si no tienen una declaración de doctype, interpretarán la página en lo que sellama �quirks mode�, un modo que procura maximizar la compatibilidad de la páginacon versiones anteriores del lenguaje HTML

16 / 31


17 / 31


TAREA: Tipos de DOCTYPE

Investigar cuántos, cuáles y en qué se diferencían los distintos tipos deDOCTYPE que existen.

La investigación se registrará en la libreta y en limpio.

18 / 31


Etiquetas bien anidadas

Recuerda que existen reglas estrictas en XHTML para la anidación de etiquetasy que es obligatorio que se cierren antes las que se abrieron después. Es decir,no se puede alterar el orden de apertura y cierre de las etiquetas.

Correcto: <strong><em>Hola</em></strong>

Incorrecto: <em><strong>Hola</em></strong>

19 / 31


Todas las etiquetas se cierran

Todas las etiquetas deben tener su correspondiente etiqueta de cierre. Ademásse permite que aquellas etiquetas como BR o IMG, que no tienen cierre en HTML,se puedan cerrar con una barra al �nal de la apertura.

Correcto: <img> </img> o bien <img/> o bien <img />

Incorrecto: <br>

20 / 31


Etiquetas y atributos van en minúscula

El lenguaje XML es sensible a mayúsculas y minúsculas, por ello para XML laetiqueta con las letras de su nombre o atributos en mayúsculas es distinta quelas que van con ellas en minúsculas.

Así pues, en XHTML se ha tomado la convención de escribirlo todo en minús-culas.

21 / 31


El contenido de BODY va dentro de alguna etiqueta

Para que el documento XHTML esté bien formado, no se puede meter un textodirectamente en el cuerpo de la página sin haberlo metido en alguna etiquetapreviamente.

Correcto: <body><div>texto</div></body>

Incorrecto: <body>texto</body>

22 / 31


Valores de atributos entre comillas

Es indiferente usar comillas dobles (� �) o simples (' '), pero estas obligado ausarlas en los valores que asignas a cualquier atributo de las etiquetas.

23 / 31


Todos los atributos deben tener valor

No se puede minimizar atributos, es decir, todos deben tener un valor asignado.Un ejemplo de ello es el atributo �selected� de un elemento <option> que seindicaba para decir que debe aparecer como seleccionado por defecto.

Debes colocarlo asignándole algún valor siempre.

Correcto: <option selected=�selected�>lo que sea</option>

Incorrecto: <option selected>lo que sea</option>

24 / 31


No se deben insertar elementos block dentro de elementos inline

Los elementos de tipo �bloque�, como <p> o <div>, son más generales que loselementos de tipo �en línea�, como <strong> o <em>. Por ello no podemoscolocar elementos tipo block dentro de otros menos generales como los inline.

Correcto: <p>Pepe dijo: <em>Hola</em></p>

Incorrecto: <em>Pepe dijo: <p>Hola</p></em�

25 / 31


scripts y estilos deben colocarse en bloques CDATA

Debido a las características de XML, caracteres como �<� o �&�, pueden serinterpretados como parte parte del propio etiquetado del documento XHTML ypara evitar que esto ocurra se encapsulan los bloques de script o estilos.

De tal modo, cuando se abre un bloque de script o de estilos CSS, para evitarcasos de incompatibilidad, debemos colocar su contenido dentro de un bloqueCDATA.

<script type=�text/javascript�>

<![CDATA[ //contenido del script sin que XML tenga

que preocuparse por lo que haya dentro... ]]>

</script>

26 / 31


Validación automática

El XHTML está diseñado para que sea funcional no sólo a los navegadores sinoa varios dispositivos Web (teléfonos móviles, portátiles, PDAs, etc.).

El �chero de un documento XHTML, en sí, es un archivo de texto plano gen-eralmente con alguna de estas extensiones: .html, .htm, o bien .xhtml.

Los navegadores (IE, Firefox, Mozilla, Opera, etc.) interpretan estos archivos yprocesan el código para mostrarlos en pantalla.

27 / 31


Servicio de validación W3C

Una manera fácil de validar si tu sitio cumple con el estándar es usar la aplicaciónWeb de la W3C:

https://validator.w3.org/

28 / 31

https://validator.w3.org/


Icono de validación W3C

El logotipo que indica que un sitio Web aplica esta tecnología y cumple lasespeci�caciones del W3C es el siguiente:

29 / 31


Conclusiones

I El W3C recomienda el uso de XHTML, por lo tanto vale la pena darlela importancia que se merece con el objetivo de que comiences a modelarpáginas tomando como referencia este lenguaje (un poco más estricto queel HTML).

I Si quieres que tus Páginas Web validen correctamente el contenido y respetelos estándares, deberás tener en cuenta todas las reglas anteriores.

30 / 31


C o m e n t a r i o s . . .

Juan Carlos Conde [email protected]

31 / 31

Documents

HTML vs XHTML - climate.cs.buap.mxclimate.cs.buap.mx/.../Notas/04_HTML_vs_XHTML.pdf · Si has utilizado alguna vez HTML puedes apoyar tus conocimientos en la lista ... Una nueva losofía