Visión General de HTML 5
HTML 5 (HyperText Markup Language, versión 5) es la quinta revisión importante del lenguaje básico de la World Wide Web, HTML. Establece una serie de nuevos elementos y atributos, respecto a sus versiones anteriores, que reflejan el uso típico de los sitios web modernos.
- HTML Living Standard define una gran parte de la plataforma web, con mucho detalle. (Inglés)
Historia e Introducción a HTML
HTML fue desarrollado originalmente por Tim Berners-Lee en 1989 mientras trabajaba en el CERN (Consejo Europeo para la Investigación Nuclear). Su objetivo era crear una forma de intercambiar documentos y enlaces entre los investigadores del CERN a través de una red de ordenadores.
Desde entonces, HTML ha evolucionado a través de varias versiones, cada una añadiendo nuevas características y mejoras. Algunas de las versiones más importantes de HTML incluyen:
- HTML 1.0 (1993): la primera versión publicada del lenguaje. Incluía elementos básicos como títulos, párrafos, listas y enlaces.
- HTML 2.0 (1995): añadió soporte para tablas y formularios.
- HTML 3.2 (1997): introdujo elementos de estilo (como negrita, cursiva, subrayado) y soporte para imágenes.
- HTML 4.0 (1997): añadió soporte para frames (marcos), formularios avanzados y mejoras en la semántica del código.
- HTML 4.01 (1999): una actualización menor que añadió soporte para caracteres internacionales y mejoras en la seguridad.
- XHTML (2000): una versión más estricta y extensible de HTML basada en XML.
- HTML5 (2014): la última versión de HTML, que ha sido desarrollada por el W3C (World Wide Web Consortium) y ha sido adoptada por la mayoría de los navegadores modernos.
Novedades en HTML 5
HTML 5 introduce una serie de nuevas características y mejoras sobre las versiones anteriores de HTML, como:
- Mejoras en la semántica y estructura del código: HTML 5 introduce nuevos elementos semánticos como header, footer, nav, section, etc., que permiten una mejor organización y estructuración del contenido. También permite la eliminación de elementos que ya no son necesarios (como el elemento div sin clase o id). Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico, como por ejemplo <nav> (bloque de navegación del sitio web) y <footer> (pie de página), contribuyendo a mejorar la web semántica y publicar datos legibles por aplicaciones informáticas.
- Soporte para multimedia: HTML 5 permite la incorporación de audio y vídeo sin la necesidad de plugins adicionales. Además, ofrece una API para personalizar los controles de reproducción y aspecto de los medios.
- Canvas y gráficos en 2D y 3D: HTML 5 incluye el elemento canvas, que permite dibujar gráficos y animaciones en tiempo real con JavaScript. También ofrece una API para manipular imágenes y gráficos en 2D y 3D.
- Geolocalización y APIs: HTML 5 ofrece una API de geolocalización que permite acceder a la ubicación del usuario y otras APIs para integrar contenido y servicios externos (como maps, redes sociales, etc.).
En resumen, HTML 5 ofrece una mayor flexibilidad y potencial para el desarrollo de aplicaciones web y mejoras en la experiencia de usuario.
Si es la primera vez que lees acerca de elementos, atributos, etc. no te preocupes, en próximos apuntes se explican más a fondo.
Beneficios de HTML 5
HTML 5 ofrece una serie de beneficios y ventajas sobre las versiones anteriores de HTML y otros lenguajes de marcado:
- Mejoras en la experiencia de usuario: HTML 5 permite la incorporación de audio y vídeo sin la necesidad de plugins adicionales, lo que mejora la experiencia de usuario al reducir la carga de descargar e instalar plugins. Además, la API de canvas permite crear animaciones y gráficos más atractivos y dinámicos.
- Mayor facilidad de uso y aprendizaje: HTML 5 simplifica la sintaxis y estructura del código, eliminando elementos innecesarios y haciendo más fácil el aprendizaje y uso del lenguaje.
- Mayor compatibilidad con navegadores: HTML 5 ha sido adoptado por la mayoría de los navegadores modernos, lo que significa que el contenido creado con HTML 5 será más fácilmente accesible para los usuarios.
- Mayor SEO y visibilidad: los elementos semánticos de HTML 5 permiten una mejor organización y estructuración del contenido, lo que puede ayudar a mejorar el SEO (optimización para motores de búsqueda) y aumentar la visibilidad de la página web en los resultados de búsqueda.
En resumen, HTML 5 ofrece una mayor flexibilidad, mejoras en la experiencia de usuario, facilidad de uso y aprendizaje, mayor compatibilidad y mejoras en el SEO.
Estructura Básica de un Documento HTML
Dejando atrás la introducción a HTML más histórica, vamos a empezar ya con la parte técnica desde el principio, así será más fácil comprender el funcionamiento del marcado o estructurado HTML.
Aquí abajo puedes ver una estructura básica de un documento HTML.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primer documento en HTML</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
Todos los documentos HTML deben comenzar con una declaración <!DOCTYPE> ya que es un preámbulo obligatorio.
Esta declaración no es una etiqueta HTML como tal. Es una especie de «indicación» para el navegador sobre el tipo de documento que se espera recibir.
En HTML 5, la declaración es sencilla:
<!DOCTYPE html>El Elemento html
El elemento html representa la raíz de un documento HTML.
Se recomienda especificar un atributo lang en el elemento html raíz, que indique el idioma del documento. Esto ayuda a las herramientas de síntesis de voz a determinar qué pronunciaciones utilizar, a las herramientas de traducción a determinar qué reglas utilizar, etc.
En el siguiente ejemplo, el elemento html declara que el idioma del documento es el español.
<html lang="es">El Elemento head
El elemento head representa una colección de metadatos para el documento, incluyendo, entre otras cosas, su título y enlaces a scripts y hojas de estilos.
Tiene una etiqueta de inicio y una etiqueta de cierre.
En su interior, se añaden elementos como:
- title
- base
- link
- style
- meta
- script
- noscript
En el código que hay a continuación, dentro del head, tenemos 2 elementos meta y el title.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primer documento en HTML</title>
</head>Más adelante, profundizaremos en estos y el resto de elementos, pero aún así veamos en que consisten los del ejemplo.
En el primer elemento meta, que incluye el atributo charset, estamos especificando que tipo de codificación de caracteres vamos a utilizar para el documento HTML. Se recomienda utilizar siempre UTF-8, ya que abarca prácticamente todos los caracteres y símbolos del mundo.
El segundo elemento meta, viene con dos atributos: name y content.
Cuando un elemento meta tiene el atributo name, establece los metadatos del documento. Estos metadatos se expresan en términos de pares nombre-valor. El atributo name indica el nombre y el atributo content del mismo elemento asigna el valor.
En el ejemplo anterior, estamos asignando el aspecto inicial que tendrá el viewport, o lo que es lo mismo, el área visible del usuario en una página web.
- width=device-width: establece el ancho de la página para ajustarse al ancho de la pantalla que variará según el dispositivo.
- initial-scale=1.0: establece el nivel de escala inicial cuando el navegador carga la página por primera vez.
Esta línea de código sirve para que nuestro sitio web tenga un diseño adaptable o responsive y se vea lo mejor posible en todos los dispositivos.
Por último, el elemento title representa el título o nombre del documento.
El Elemento body
El elemento body representa el contenido del documento. Al igual que head, y muchos otros elementos que iremos viendo, tiene una etiqueta de inicio y una etiqueta de cierre.
<body>
</body>Dentro del body es donde añadiremos el contenido visible de nuestro sitio web, utilizando una gran variedad de elementos destinados para ello. Pero eso ya lo veremos más adelante que en este apunte ya hemos tenido bastante introducción a HTML.
Y para finalizar el documento se debe poner la etiqueta de cierre del elemento html.
</html>
