Introducción A HTML 5
Introducción A HTML 5
1
Introducción y uso de HTML 5
Versiones de HTML
• HTML 1.0 y 2.0. Surgió con la masificación de Internet. Un contenido
estático, bastante básico pero con hipertextos. Tenía una orientación a
mostrar contenidos simples.
• HTML 3.0 y 3.2. Propuesto por el recién formado W3C. Incluyó facilidades
para crear tablas, flujo del texto alrededor de figuras y muestra de fórmulas
complejas. Se abandonó por la falta de apoyo de los fabricantes de
navegadores web. La versión 3.2 abandonó muchas características de la 3.0
y adoptó otras de los navegadores Netscape y Mosaic. Se incluye MathML
para representar las fórmulas matemáticas. Durante este tiempo se vivió la
"guerra de los navegadores", entre Netscape e Internet Explorer, lo que
produjo muchas diferencias entre ambos.
2
Introducción y uso de HTML 5
Versiones de HTML
• HTML 4.0. Fin de la "guerra de los navegadores", con el plan de la W3C de
crear "un solo HTML". Planteó la separación entre contenido y estilos
gráficos, a través de las hojas CSS. Incluyó muchos elementos específicos
de navegadores concretos a la vez que comenzó a limpiar el lenguaje,
declarando algunas etiquetas como “desaconsejadas”. Estandarizó los
marcos (frame), que luego quedaron en desuso.
• HTML 4.01. Incorporó algunos cambios de detalle a la versión 4.0. Fue una
versión suficientemente aceptada como para no ser modificada
significativamente en mucho tiempo.
3
Introducción y uso de HTML 5
Versiones de HTML
• XHTML 1.0. Unió el conceptos de XML, que estaba en pleno proceso de
asimilación y HTML, con el objetivo de hacerlo más riguroso. La recepción
de XHTML fue variada, pues la rigurosidad fue percibida también como falta
de flexibilidad.
4
Introducción y uso de HTML 5
notas sobre XHTML
XHTML (eXtensible Hyper Text Markup Language) es, en términos simples,
HTML cumpliendo las especificaciones de XML, que son más estrictas. Por
ejemplo:
• Se deben cerrar todas las etiquetas:
<br/> <br>
<img src="logo.gif" /> <img src="logo.gif">
• Los atributos de las etiquetas deben tener comillas, simples o dobles:
<input type="text" /> <input type=text>
• Se debe utilizar minúsculas en etiquetas y atributos:
<ol type="A"></ol> <OL TYPE="A"></OL>
• Todos los atributos deben tener un valor, no usando forma minimizada:
<input disabled="disabled" /> <input disabled>
Introducción y uso de HTML 5
notas sobre XHTML
Además de ser más estricto por la aplicación de XML, XHTML tiene otras
características:
• Su objetivo es lograr páginas web donde la información y la forma de
presentarla estén claramente separadas.
• XHTML es por tanto, un lenguaje semántico en el que no se define el
aspecto de las cosas sino lo que significan.
• Se utiliza únicamente para transmitir los contenidos de un documento,
dejando el aspecto y diseño para las hojas de estilo CSS y la interactividad y
funcionalidad a JavaScript.
Estructura de la página
diferencias entre HTML 4.01 y 5
En HTML 4.01, se utiliza una nomenclatura en la página, que es modificada en
HTML 5:
• Declaración del doctype
• Declaración del juego de caracteres
• Hoja de estilos
• JavaScript
En HTML5 se simplifica:
No especifica un "5". Se
<!DOCTYPE html> simplifica bastante.
Según la W3C, todas las futuras versiones de HTML (6, 7, ...) utilizarán este
doctype, no siendo necesario actualizarlo.
Estructura de la página
juego de caracteres
El juego de caracteres de la página, en HTML 4.01 "strict" o "transitional", se
especifica así, por ejemplo con utf-8 (recomendable):
<meta charset="utf-8">
<script type="text/javascript">
var name = "basic";
</script>
<script src="lib.js"></script>
<script>
var name = "basic";
</script>
Etiquetas y marcas
nuevas etiquetas
HTML5 agregan nuevas etiquetas que se agrupan en los siguientes tipos:
• canvas: para dibujar gráficos con JavaScript.
• media: audio, video, contenido interactivo.
• formulario: nuevos tipos de campos de entrada, autocompletado.
• estructurales: definición de elementos como header, section, footer, article.
12
Elementos estructurales
• La etiqueta <nav> se usa para marcar una sección del documento cuya
función es la navegación por la página web.
14
Elementos semánticos
Continuación
• La etiqueta <aside> se usa para marcar un trozo de contenido que está
relacionado con el contenido de la página web, pero que no es parte del
mismo. Ejemplos de uso serían: glosario de términos, grupos de enlaces a
páginas relacionadas, barras laterales, ...
15
Elementos desaprobados
Etiquetas eliminadas
Dado que las hojas de estilo están asimiladas y son un estándar, se eliminan
las etiquetas de formato de las versiones de HTML antiguas: <basefont>,
<center>, <font>, <strike> y <tt> .
Ejemplo de reemplazo: