Como hemos visto en el punto anterior, el lenguaje de marcas HTML (HyperText Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web. Este lenguaje proporciona la estructura y el contenido de una página web.
HTML utiliza etiquetas para marcar diferentes partes del contenido, como encabezados, párrafos, enlaces, imágenes, tablas, formularios, entre otros. Estas etiquetas permiten a los navegadores web interpretar y renderizar correctamente el contenido de la página.
1. Lenguaje de marcas HTML
El lenguaje de marcas HTML es un estándar reconocido en todo el mundo y sus normas están definidas en la página web del organismo W3C (World Wide Web Consortium) y en la página oficial del grupo de trabajo WHATWG (Web Hypertext Application Technology Working Group).
1.1. Breve historia HTML
HTML fue desarrollado por Tim Berners-Lee en 1991 como parte del proyecto World Wide Web en el CERN (Consejo Europeo para la Investigación Nuclear). A lo largo de los años, HTML ha evolucionado con nuevas versiones y características para adaptarse a las necesidades cambiantes de la web.
La última versión estable es HTML5, que ofrece mejoras en multimedia, interactividad y accesibilidad. HTML ha sido fundamental en el crecimiento y la expansión de Internet, permitiendo la creación de contenido digital accesible a nivel mundial.
¿Sabías que…? El origen de HTML se remonta a 1980, cuando el físico Tim Berners-Lee, trabajador del CERN (Organización Europea para la Investigación Nuclear) comenzó su desarrollo. Sin embargo, no se publicó ningún documento HTML formal hasta el año 1991. Hoy en día, este documento puede ser consultado online: w3.org/History/19921103hypertext/hypertext/WWW/MarkUp/Tags.html
En el este vídeo puedes conocer de forma breve la historia de HTML: ver vídeo
1.2. Versiones HTML
HTML (HyperText Markup Language) ha pasado por varias versiones desde su creación en 1991, cada una mejorando y ampliando las capacidades de la anterior:
- HTML 1.0 (1991): Básica, creada por Tim Berners-Lee.
- HTML 2.0 (1995): Estándar oficial, añadió soporte para formularios.
- HTML 3.2 (1997): Introdujo tablas, scripts y mayor control de estilo.
- HTML 4.0 (1997): Separación de estructura y presentación, introducción de CSS.
- HTML 4.01 (1999): Corrección de errores y mejoras.
- XHTML 1.0 (2000): Reformulación como aplicación XML con reglas estrictas.
- HTML5 (2014): Soporte nativo para multimedia, nuevos elementos semánticos, mejoras en formularios y APIs.
- HTML 5.1 (2016) y 5.2 (2017): Actualizaciones menores con nuevas características y mejoras.
- HTML Living Standard: HTML se actualiza continuamente bajo la supervisión de WHATWG y W3C, sin versiones numeradas específicas, adaptándose a nuevas tecnologías y necesidades.
1.3. ¿Qué versión de HTML debo aprender?
Estudiar HTML5 y sus mejoras es esencial, ya que representan el estado actual y el futuro del desarrollo web. HTML5 introduce soporte nativo para multimedia, nuevos elementos semánticos, mejoras en formularios y una serie de APIs (del inglés, application programming interface) que amplían las capacidades interactivas del navegador.
Además, conocer XHTML 1.0 proporciona una base histórica y ayuda a entender la evolución de las tecnologías web. Por su parte, XHTML 1.0, con sus reglas estrictas basadas en XML, fomenta una escritura de código limpio y bien estructurado.
Por ello, en este tutorial, nos centramos en HTML5 pero destacamos algunas diferencias clave entre HTML5 y XHTML 1.0 para proporcionar una comprensión contextualizada de la evolución del HTML.
1.4. Documentación oficial y páginas de referencia de HTML
La documentación oficial y las páginas de referencia más importantes para HTML son mantenidas principalmente por el W3C (World Wide Web Consortium) y WHATWG (Web Hypertext Application Technology Working Group). Veamos las principales fuentes:
| Fuente | Enlace | Descripción |
|---|---|---|
| WHATWG (Web Hypertext Application Technology Working Group) | HTML Living Standard | Esta es la versión continuamente actualizada del estándar HTML mantenida por WHATWG. |
| W3C (World Wide Web Consortium) | W3C HTML Specifications | Incluye versiones históricas y documentos sobre el desarrollo de HTML. |
| MDN Web Docs (Mozilla Developer Network) | MDN HTML | Una referencia con documentación, tutoriales y ejemplos prácticos. |
| Can I use | Can I use | Información sobre la compatibilidad de características HTML en diferentes navegadores. |
| HTML5 Doctor | HTML5 Doctor | Ofrece artículos y recursos sobre las características de HTML5, con ejemplos prácticos y explicaciones. |
| W3Schools | W3Schools HTML | Tutoriales interactivos y referencias fáciles de seguir para aprender y practicar HTML. |
2. Etiquetas HTML
Todas las etiquetas HTML disponen de los símbolos mayor que y menor que ( < > ), y normalmente se utilizan en parejas. Una al principio (etiqueta de apertura) y otra al final del texto al que afectan (etiqueta de cierre).
En el siguiente ejemplo se define un párrafo mediante la etiqueta <p>. Observa que la etiqueta de cierre del final incluye una barra inclinada.
<p>Párrafo</p>
3. Etiquetas vacías o de autocierre en HTML
Las etiquetas vacías o de autocierre en HTML son aquellas que no contienen contenido entre una etiqueta de apertura y una de cierre. Estas etiquetas se cierran automáticamente dentro de la etiqueta de apertura. Algunos ejemplos de etiquetas vacías o de autocierre son:
<br>: Salto de línea o línea de quiebre.<hr>: Línea horizontal.<img>: Imagen.<input>: Campo de entrada de datos.<meta>: Metadatos del documento.<link>: Enlace a un recurso externo.<wbr>: Salto de línea sugerido.
4. Elementos estructurales
La estructura básica de un documento HTML consta de varios elementos que definen la estructura y el contenido de una página web.
| Elemento | Descripción | Jerarquía |
|---|---|---|
<!DOCTYPE html> | Indica que el documento está bajo el estándar de HTML5. | Fuera de <html> |
<html> | Representa la raíz del documento HTML. Contiene los elementos <head> y <body>. Es importante añadir el atributo lang para especificar el idioma del contenido, lo que mejora la accesibilidad y optimiza el SEO. | Raíz del documento |
<head> | Contiene metadatos sobre el documento, como enlaces a hojas de estilo, scripts y otras configuraciones que no son visibles para el usuario, pero que son esenciales para el navegador. | Dentro de <html> |
<meta> | Define los metadatos del documento, como la codificación de caracteres (charset="UTF-8"), la descripción (name="description") o el autor. Esto influye en la forma en que los motores de búsqueda y navegadores interpretan la página. | Dentro de <head> |
<title> | Representa el título del documento. Se muestra en la barra superior del navegador. | Dentro de <head> |
<link> | Enlaza documentos externos como hojas de estilo CSS. | Dentro de <head> |
<style> | Define CSS interno. | Dentro de <head> |
<script> | Define código JavaScript, que puede estar embebido en el documento o enlazado a un archivo externo. Puede colocarse en <head> para scripts que se cargan antes del contenido, o al final de <body> para scripts que se ejecutan después de cargar la página. | Dentro de <head> o al final de <body> |
<body> | Contiene todo el contenido visible para el usuario. Sólo puede existir un elemento <body> en el documento. | Dentro de <html> |
5. Etiquetas y atributos en HTML
Como se ha explicado en puntos anteriores, una etiqueta es un elemento que define la estructura y el contenido de una página web. Las etiquetas se utilizan para marcar o envolver diferentes partes del contenido, como textos, imágenes, enlaces, listas, entre otros elementos. Por ejemplo, <p> define un párrafo y <img> define una imagen.
Por otro lado, un atributo proporciona información adicional sobre una etiqueta y suele especificarse dentro de la etiqueta de apertura. Los atributos modifican el comportamiento o la apariencia de las etiquetas y pueden ser obligatorios u opcionales dependiendo del contexto.
Ejemplos:
1. En la etiqueta <html>, el atributo lang especifica el idioma del documento HTML.
<html lang="es">
2. En la etiqueta <meta>, el atributo charset especifica la codificación de caracteres del documento HTML. Utilizamos charset="UTF-8", ya que es la codificación compatible con la mayoría de los caracteres de diferentes idiomas y nos permite una correcta visualización del contenido en distintos navegadores. Ver más información sobre sistemas de codificación.
<meta charset="UTF-8">
3. En la etiqueta <meta>, el atributo name especifica metadatos adicionales del documento HTML, como el título o la descripción, lo cual es importante para el SEO y la manera en que los motores de búsqueda indexan una página.
<meta name="title" content="Título de la web"> <meta name="description" content="Descripción de la web">
6. Comentarios
Los comentarios se escriben entre los caracteres que se muestran en el siguiente ejemplo:
<!-- Esto es un comentario dentro de un documento HTML --> <!-- /$$ /$$ /$$$$$$$$ /$$ /$$ /$$ | $$ | $$|__ $$__/| $$$ /$$$| $$ | $$ | $$ | $$ | $$$$ /$$$$| $$ | $$$$$$$$ | $$ | $$ $$/$$ $$| $$ | $$__ $$ | $$ | $$ $$$| $$| $$ | $$ | $$ | $$ | $$\ $ | $$| $$ | $$ | $$ | $$ | $$ \/ | $$| $$$$$$$$ |__/ |__/ |__/ |__/ |__/|________/ --> <!--¿Te están entrando ganas de hacer ASCII Art? Puedes hacerlo en: http://patorjk.com/software/taag/#p=display&f=Big%20Money-ne&t=ENIUN -->
7. Ejemplo práctico
A continuación se muestra un ejemplo práctico que contiene todas las etiquetas vistas hasta el momento. Si visualizas el siguiente documento html en un navegador obtendrás el texto ¡Hola Mundo!.
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título de la WEB</title>
<meta charset="UTF-8">
<meta name="title" content="Título de la WEB">
<meta name="description" content="Descripción de la WEB">
<link href="estilos.css" rel="stylesheet">
<style>
header{background-color:yellow;} /* Código CSS */
</style>
<script src="script.js"></script>
<script type="text/javascript">
/* Código JS */
</script>
</head>
<body>
¡Hola Mundo!
<!-- Añade tu código HTML aquí -->
</body>
</html>
Explicación del código:
<!DOCTYPE html>: Declara que el documento está escrito en HTML5.<html lang="es">: Indica el inicio del documento HTML y establece el idioma del contenido como español, lo que ayuda con la accesibilidad y el SEO.<head>: Contiene metadatos sobre el documento.<title>Título de la WEB</title>: Define el título de la página web, que aparece en la pestaña del navegador.<meta charset="UTF-8">: Especifica la codificación de caracteres. En nuestro caso usamos UTF-8 porque es una codificación de caracteres que permite representar prácticamente todos los caracteres de los distintos lenguajes del mundo de manera universal.<meta name="title" content="Título de la WEB">: Proporciona información sobre el título del documento.<meta name="description" content="Descripción de la WEB">: Proporciona una descripción del contenido de la página.<link href="estilos.css" rel="stylesheet">: Enlaza un archivo CSS externo para dar estilo a la página.<style> header {background-color: yellow;} </style>: Incluye un bloque de estilo CSS que establece el color de fondo del elementoheadercomo amarillo.<script src="script.js"></script>: Enlaza un archivo JavaScript externo.<script type="text/javascript"> /* Código JS */ </script>: Incluye un bloque de código JavaScript interno.<body>: Contiene el contenido visible de la página web.¡Hola Mundo!: Texto que se mostrará en la página web.<!-- Añade tu código HTML aquí -->: Un comentario HTML que no se mostrará en la página web.
8. Editores HTML
Crear un archivo HTML es el primer paso para desarrollar una página web básica. Para hacerlo, no es necesario un software especializado, aunque es altamente recomendable utilizar un editor de código para facilitar el proceso de escritura y evitar errores. Algunas de las ventajas de los editores de código son las siguientes:
- Resaltado de sintaxis: Facilita la identificación de etiquetas, atributos y texto.
- Completado automático: Ayuda a escribir código más rápido y con menos errores.
- Gestión de proyectos: Permite organizar archivos y carpetas relacionadas con el desarrollo web.
- Extensiones y plugins: Amplían la funcionalidad con herramientas útiles como previsualización en vivo, depuración de código y control de versiones.
Algunos de los editores de código HTML más destacados son los siguientes:
- Atom.
- Notepad++.
- SublimeText.
- Visual Studio Code.
En este curso usaremos Visual Studio Code (ver tutorial completo de Visual Studio Code). Es muy importante utilizar Emmet para multiplicar la velocidad en el formateo de documentos HTML.
9. Ejercicios propuestos
9.1. Estructura básica de un documento HTML
9.2. Instala Visual Studio Code y explora sus extensiones y funcionalidades (para hacer esto puedes seguir el tutorial de Visual Studio Code)
- Crea un nuevo archivo HTML en Visual Studio Code. Para ello escribe
html:5(abreviación, también puedes usar la abreviación!) y presiona la tecla Enter. Visual Studio Code automáticamente escribirá la estructura básica de un documento HTML.
- Usa la abreviación
loremy genera texto «lorem ipsum». Para ello simplemente escribeloremen el editor. - Practica otras abreviaciones de Emmet para conseguir escribir código lo más rápido posible.
- Instala la extensión Live Server. Live server en Visual Studio Code es una herramienta que nos permite lanzar un servidor de desarrollo local para previsualizar en el navegador lo que estamos escribiendo en nuestro editor de código.
¿Qué es Lorem ipsum? Es el texto usado en el borrador de diseño de un sitio web para comprobar el diseño visualmente antes de insertar el texto definitivo. En Visual Studio Code al teclear el texto «Lorem» en el editor aparece un tooltip que te permite agregar un párrafo de tipo Lorem ipsum de forma automática.
9.3. Explora y crea en CodePen
Explora CodePen, una plataforma online que te permite escribir, experimentar y compartir código HTML, CSS y JavaScript de forma interactiva. CodePen es ideal para desarrollar proyectos pequeños, prototipos rápidos y aprender nuevas técnicas de codificación.
- Crea tu cuenta: Regístrate en CodePen para empezar a crear y guardar tus proyectos.
- Experimenta con ejemplos: Explora los diferentes «pens» (proyectos) disponibles en CodePen. Encuentra inspiración y observa cómo otros desarrolladores implementan soluciones creativas utilizando diversas tecnologías web.
- Crea tu propio pen: Usa el editor de CodePen para escribir tu código HTML, CSS y JavaScript. Observa los resultados en tiempo real mientras escribes.
- Comparte y colabora: Comparte tus pens con otros desarrolladores y recibe retroalimentación. También puedes colaborar en proyectos compartidos o participar en desafíos y concursos.
Ver tutorial completo de CodePen
9.4. Test básico HTML
9.5. Optimiza tu flujo de trabajo con abreviaciones Emmet
Las abreviaciones Emmet son una herramienta para aumentar la productividad y eficiencia en el desarrollo web. Emmet, anteriormente conocido como Zen Coding, nos permite escribir menos y lograr más al expandir abreviaciones en código HTML y CSS completos. Después de familiarizarte con las abreviaciones Emmet, te invitamos a realizar nuestro test de habilidades Emmet para evaluar tu comprensión y capacidad para aplicar esta técnica en tus proyectos de desarrollo web.
Comprueba tu apendizaje
Selecciona la abreviación de Emmet:
En la siguiente sección estudiaremos la estructura básica de HTML5 y los elementos semánticos.