¿Qué es HTML?
HTML es un lenguaje de marcado que estructura y visualiza páginas web. Su evolución ha sido esencial para adaptarse a las demandas digitales actuales.
Historia y evolución del HTML
HTML, siglas de HyperText Markup Language, fue creado por Tim Berners-Lee en 1991. Inicialmente, buscaba una manera de compartir documentos entre científicos a través de la red. A lo largo de los años, HTML ha evolucionado significativamente. Desde su primera versión, HTML 1.0, se han introducido numerosas versiones y mejoras.
En 1995, HTML adoptó estándares más formales con HTML 2.0, seguido por HTML 3.2 en 1997, que permitió mayor control sobre la presentación visual. Fue en 1999 cuando HTML4.01 consolidó muchas de las directrices de la web. Luego, en 2014, HTML5 se convirtió en la norma actual, soportando multimedia y gráficos avanzados, y mejorando la semántica y accesibilidad.
Principios fundamentales del HTML
HTML se basa en el uso de «etiquetas» y «elementos» para estructurar y presentar contenido. Cada etiqueta tiene una función específica y puede contener atributos adicionales que otorgan mayor funcionalidad y control. El enfoque principal de HTML se centra en la separación de contenido y presentación, fundamental introducción a lo largo de su desarrollo.
Las etiquetas se escriben entre corchetes angulares y generalmente vienen en pares (una etiqueta de apertura y una de cierre), aunque existen etiquetas que no requieren de un cierre.
Comparativa con otros lenguajes de marcado
- HTML vs XML: XML (eXtensible Markup Language) es más estricto en su sintaxis y se usa principalmente para el intercambio y almacenamiento de datos. HTML está enfocado en la presentación de contenido web.
- HTML vs XHTML: XHTML es una versión de HTML más rigurosa y basada en XML. Ofrece mayor consistencia y es más estricto en cuanto a la estructura y forma en que se escriben las etiquetas.
- HTML vs Markdown: Markdown es un lenguaje de marcado ligero y sencillo diseñado para la escritura de textos que puede convertirse fácilmente en HTML. Sin embargo, no tiene la robustez y versatilidad del HTML.
Estructura básica del código HTML
La estructura básica de un documento HTML es esencial para que los navegadores identifiquen y representen correctamente el contenido. A continuación, se describen los elementos fundamentales que forman parte de esa estructura.
<!DOCTYPE>
El elemento <!DOCTYPE> es una declaración que se coloca al inicio de un documento HTML. Indica la versión del HTML que se está utilizando y ayuda a los navegadores a interpretar correctamente el contenido.
El tipo más común es <!DOCTYPE html>, que especifica el uso de HTML5.
<html> y <head>
El elemento <html> envuelve todo el contenido de la página web. Dentro de él, se encuentran dos secciones principales: <head> y <body>.
<html>
El elemento <html> indica el inicio y fin del documento HTML.
Por ejemplo:
<html>
...
</html><head>
El elemento <head> contiene metadatos sobre el documento. Incluye etiquetas como <title>, enlaces a hojas de estilo y scripts, entre otros.
Dentro de <head>, puedes encontrar etiquetas como <meta>, <link> y <script>.
<title>
El elemento <title> establece el título de la página web, que aparece en la pestaña del navegador. Es crucial para el SEO y para identificar la página en marcadores.
Ejemplo de uso:
<title>Mi página web</title><body>
El elemento <body> contiene todo el contenido visible de la página web. Todo lo que los usuarios ven en sus navegadores está dentro de <body>.
Ejemplo básico:
<body>
<h1>Encabezado Principal</h1>
<p>Este es un párrafo.</p>
</body>Etiquetas de apertura y cierre
Las etiquetas HTML suelen tener una estructura de apertura y cierre, delimitando el inicio y el final del contenido al que aplican.
Por ejemplo:
<p>Este es un párrafo.</p>Algunas etiquetas como <img> y <br> son auto-cerradas y no requieren una etiqueta de cierre.
Etiquetas esenciales en HTML
Las etiquetas HTML son fundamentales para la estructura y funcionamiento de una página web. A continuación, se detallan algunas de las etiquetas más esenciales en HTML.
Encabezados <h1> a <h6>
Los encabezados se utilizan para definir los títulos y subtítulos en una página web. HTML ofrece seis niveles de encabezados, de <h1> a <h6>, donde <h1> es el nivel más alto y <h6> el más bajo.
Estas etiquetas ayudan a dividir y jerarquizar el contenido, mejorando la claridad y usabilidad del sitio.
Párrafos y textos <p>
La etiqueta <p> se usa para definir párrafos en HTML. Encierra bloques de texto, separándolos de otros contenidos.
Es esencial para la organización del texto, proporcionando una estructura clara y lógica en el documento.
Enlaces <a>
Los enlaces en HTML se crean con la etiqueta <a>. Este elemento es fundamental para la navegación entre diferentes páginas o recursos en la web.
El atributo href dentro de la etiqueta determina la URL del destino del enlace.
Imágenes <img>
Las imágenes se insertan en HTML utilizando la etiqueta <img>. Esta etiqueta no requiere una etiqueta de cierre.
Para que una imagen se muestre correctamente, es crucial especificar varios atributos dentro de la etiqueta.
Atributo src
El atributo src define la fuente de la imagen. Es obligatorio y debe proporcionar la URL o ruta del archivo de imagen.
Por ejemplo: <img src="ruta/de/la/imagen.jpg" />.
Texto alternativo (alt)
El atributo alt proporciona un texto alternativo que se muestra si la imagen no puede cargarse. Es importante para la accesibilidad, ya que describe el contenido de la imagen para usuarios con discapacidades visuales.
Por ejemplo: <img src="ruta/de/la/imagen.jpg" alt="Descripción de la imagen" />.
Tamaño y estilo
Las imágenes pueden redimensionarse utilizando los atributos width y height. Estos atributos especifican el ancho y alto de la imagen en píxeles.
Además, se les puede aplicar estilos adicionales utilizando CSS a través del atributo style.
<img src="ruta/de/la/imagen.jpg" width="300" height="200" /><img src="ruta/de/la/imagen.jpg" style="border: 1px solid #000;" />
Listas en HTML
Las listas en HTML permiten organizar el contenido en elementos ordenados o sin orden. Se utilizan etiquetas específicas para crear listas estructuradas y claras.
Listas ordenadas <ol>
Las listas ordenadas se crean utilizando la etiqueta <ol> (ordered list). Los elementos de la lista se numeran automáticamente, lo cual es útil para presentar pasos secuenciales o cualquier lista que requiera un orden específico.
Dentro de una lista ordenada, cada elemento se define con la etiqueta <li> (list item).
- Primer elemento
- Segundo elemento
- Tercer elemento
Listas no ordenadas <ul>
Las listas no ordenadas se crean utilizando la etiqueta <ul> (unordered list). Los elementos de la lista aparecen con viñetas, lo que es útil para listados donde el orden no es relevante.
Al igual que en las listas ordenadas, cada elemento se define con la etiqueta <li>.
- Elemento uno
- Elemento dos
- Elemento tres
Listas anidadas
Las listas anidadas permiten incluir listas dentro de otras listas. Estas pueden ser tanto ordenadas como no ordenadas, ofreciendo mayor flexibilidad para estructurar datos complejos.
Aquí un ejemplo de lista anidada:
- Elemento principal uno
- Subelemento uno
- Subelemento dos
- Elemento principal dos
Elementos de lista <li>
Cada elemento de una lista, ya sea ordenada o no ordenada, se define utilizando la etiqueta <li>. Esta etiqueta permite crear elementos individuales dentro de una lista, asegurando que cada ítem se presenta de manera uniforme.
El uso de las etiquetas <li> facilita la interpretación del contenido tanto para los navegadores como para los usuarios y motores de búsqueda. Esto mejora la accesibilidad y la optimización de los motores de búsqueda (SEO).
Código HTML y colores
El código HTML permite personalizar el aspecto visual de una página web, incluyendo el uso de colores. Se pueden aplicar estilos mediante atributos y hojas de estilo CSS, utilizando diversas notaciones para definir los colores.
Atributo style
El atributo style en HTML se utiliza para aplicar estilos CSS inline a elementos específicos. Esto permite personalizar rápidamente la presentación de elementos individuales en una página web.
Ejemplo de uso del atributo style:
<p style="color:blue;">Este es un texto en azul.</p>
Uso de CSS en HTML
CSS (Cascading Style Sheets) es la herramienta principal para definir estilos en HTML. Se puede incorporar CSS mediante etiquetas <style> en el <head> del documento o enlazando a un archivo CSS externo.
Ejemplo de uso de CSS en HTML:
<style>
p {color: red;}
</style>
Con este código, todos los párrafos de la página mostrarán texto en rojo.
Colores en formato hexadecimal
Los colores en formato hexadecimal se representan con un símbolo de almohadilla (#) seguido de seis caracteres que definen los valores de rojo, verde y azul (RGB) en hexadecimal.
Ejemplos de colores en hexadecimal:
#FF0000representa el rojo.#00FF00representa el verde.#0000FFrepresenta el azul.
Colores en formato RGB
El formato RGB usa la función CSS rgb() para definir colores mediante valores decimales para los componentes rojo, verde y azul. Cada componente tiene un valor entre 0 y 255.
Ejemplos de colores en formato RGB:
rgb(255, 0, 0)para rojo.rgb(0, 255, 0)para verde.rgb(0, 0, 255)para azul.
Atributos globales en HTML
Los atributos globales en HTML son funcionalidades que se pueden aplicar a la mayoría de elementos HTML, mejorando su control y presentación.
class y id
Los atributos class e id son esenciales para la identificación y el estilo de los elementos HTML.
class
El atributo class permite asignar una o más clases a un elemento, lo que facilita la aplicación de estilos CSS y la manipulación con JavaScript. Se utiliza cuando se quiere aplicar el mismo estilo o comportamiento a múltiples elementos.
id
El atributo id proporciona un identificador único a un elemento. Es crucial para aplicar estilos específicos y seleccionar elementos únicos mediante JavaScript. Cada id debe ser único dentro de un documento HTML.
style
El atributo style se usa para aplicar estilos CSS directamente a un elemento HTML. Permite definir propiedades como el color, el tamaño de la fuente, el margen y más, todo ello en línea (dentro del propio elemento HTML).
Por ejemplo, <p style="color:red;">Este es un párrafo rojo.</p> cambiará el color del texto del párrafo a rojo.
title y aria-*
title
El atributo title proporciona información adicional sobre un elemento. Esta información suele mostrarse como un tooltip cuando el usuario pasa el ratón sobre el elemento. Es útil para mejorar la comprensión de los elementos de la página.
aria-*
Los atributos ARIA (Accessible Rich Internet Applications), como aria-label, aria-hidden y otros, desempeñan un papel crucial en la accesibilidad web. Ayudan a describir el comportamiento o la intención de un elemento para las tecnologías de asistencia, lo que facilita el acceso a usuarios con discapacidades.
Otros atributos comunes
data-*: Permite almacenar datos personalizados en elementos HTML. Es útil para programar en JavaScript y para manejar datos sin afectar la estructura de la página.hidden: Oculta un elemento HTML. Este atributo no está diseñado para cambiar la visibilidad del elemento a través del CSS sino para indicar si el elemento es relevante en la página actual.draggable: Indica si un elemento es arrastrable. Se usa en interfaces que permiten arrastrar y soltar elementos.contenteditable: Hace que un elemento sea editable, permitiendo al usuario modificar el contenido directamente.lang: Especifica el idioma del contenido del elemento. Es útil para aplicaciones multilingües y para motores de búsqueda.
Ejemplo práctico de un documento HTML
Elaborar un documento HTML completo es esencial para entender cómo se estructura y se desarrolla una página web funcional.
Creando el esqueleto de la página
El punto de partida en la creación de un documento HTML es establecer su esqueleto, que incluye las etiquetas básicas necesarias para cualquier página web.
- DOCTYPE: Esta es la primera línea de un documento HTML y define el tipo de documento.
<!DOCTYPE html> - html y head: Estas etiquetas envuelven el contenido de la página y contienen metadatos cruciales.
<html> <head> </head> </html> - title: Define el título de la página que aparece en la pestaña del navegador.
<title>Título de la Página</title> - body: Contiene todo el contenido visible de la página.
<body> </body>
Añadiendo contenido y formato
Una vez definido el esqueleto, se puede empezar a agregar contenido y darle formato mediante diferentes etiquetas y elementos HTML.
- Encabezados: Utiliza h1 a h6 para definir títulos y subtítulos.
<h1>Título Principal</h1> <h2>Subtítulo</h2> - Párrafos: La etiqueta p se usa para bloques de texto.
<p>Este es un párrafo de ejemplo.</p> - Listas: Crea listas ordenadas y no ordenadas con ul, ol y li.
<ul> <li>Elemento de lista</li> <li>Otro elemento</li> </ul> <ol> <li>Primer elemento ordenado</li> <li>Segundo elemento</li> </ol>
Integrando imágenes y enlaces
El siguiente paso es añadir medios visuales e hipervínculos para enriquecer el contenido y mejorar la navegación.
- Imágenes: La etiqueta img se utiliza para mostrar gráficos.
<img src="ruta/a/la/imagen.jpg" alt="Descripción de la imagen"> - Enlaces: Utiliza la etiqueta a para crear hipervínculos.
<a href="https://www.ejemplo.com">Visita Ejemplo</a>
Probando código HTML localmente
Es fundamental verificar y probar el código HTML en un entorno local para asegurarse de que todo funciona correctamente antes de subirlo a un servidor.
- Guardar el archivo: Guarda tu documento con extensión .html.
- Abrir en un navegador: Haz doble clic en el archivo guardado para abrirlo en tu navegador web por defecto.
- Inspección y depuración: Usa herramientas de desarrollo del navegador para inspeccionar elementos y corregir posibles errores.
Mejorando la accesibilidad con HTML
Mejorar la accesibilidad con HTML es fundamental para que el contenido web sea accesible para todos los usuarios, incluidos aquellos con discapacidades.
Uso de etiquetas semánticas
Las etiquetas semánticas proporcionan información sobre el significado del contenido de una página. Esto facilita a los navegadores y tecnologías de asistencia entender la estructura del documento, mejorando así la accesibilidad.
Algunas etiquetas semánticas importantes incluyen:
<header>: define la cabecera de una sección o página.<nav>: indica una sección de navegación.<article>: representa contenido independiente y autocontenido.<aside>: contiene contenido relacionado de manera tangencial con el principal.<footer>: define el pie de página de una sección o página.
Atributos alt y aria-*
Atributo alt
El atributo alt en las etiquetas <img> proporciona texto alternativo para las imágenes. Esto es crucial para usuarios que utilizan lectores de pantalla, ya que les permite comprender el contenido de la imagen. Algunos puntos clave para su uso son:
- Describir la imagen de manera concisa pero descriptiva.
- Evitar incluir términos como «imagen de» o «foto de».
- Si la imagen es decorativa, se puede dejar el atributo
altvacío.
Atributos aria-*
Los atributos ARIA (Accessible Rich Internet Applications) mejoran la accesibilidad de los contenidos dinámicos. Algunos atributos ARIA comunes incluyen:
aria-label: proporciona una etiqueta accesible para un elemento.aria-labelledby: referencia otro elemento que sirve como etiqueta.aria-describedby: referencia otro elemento que describe el actual.aria-hidden: indica que un elemento no es accesible.
Buenas prácticas de accesibilidad
Aplicar buenas prácticas de accesibilidad en HTML es esencial para asegurar que todos los usuarios, incluidos aquellos con discapacidades, puedan interactuar eficazmente con el contenido web. Algunas recomendaciones incluyen:
- Utilizar siempre etiquetas de encabezado (
<h1>a<h6>) en orden y sin saltarse niveles. - Asegurar un contraste suficiente entre el texto y el fondo para facilitar la lectura.
- Proporcionar textos alternativos para todos los elementos multimedia (imágenes, videos, audios).
- Evitar el uso excesivo de contenido en movimiento o parpadeante que pueda causar problemas a personas con epilepsia.
- Incluir etiquetas de formulario (
<label>) correctamente para todos los campos de entrada.
Otras etiquetas útiles en HTML
En HTML existen diversas etiquetas útiles que mejoran la funcionalidad y presentación de una página web. A continuación, se describen algunas de las más importantes.
Tablas <table>
Las tablas en HTML permiten organizar datos en filas y columnas, facilitando la presentación estructurada de la información.
Filas <tr>
La etiqueta <tr> se utiliza para definir una fila dentro de una tabla. Cada fila puede contener una combinación de celdas de datos (<td>) y celdas de encabezado (<th>).
Celdas <td> y <th>
Las celdas de datos se definen con la etiqueta <td>. Las celdas de encabezado, que suelen aparecer en la primera fila, se definen con la etiqueta <th>. Estas últimas se muestran en negrita y centradas por defecto.
Formularios <form>
Los formularios permiten a los usuarios enviar datos a un servidor para ser procesados. Incluyen varios tipos de entradas para capturar información.
Etiqueta de entrada <input>
La etiqueta <input> se emplea para diferentes tipos de campos de entrada, como cajas de texto, casillas de verificación y botones de radio. Los atributos comunes incluyen «type», «name» y «value».
Botones y cajas de selección
- Los botones se crean utilizando la etiqueta <button> o <input type=»button»>. Se utilizan para enviar formularios o realizar acciones específicas.
- Las cajas de selección se definen con la etiqueta <select>, que contiene una lista de opciones (<option>) que el usuario puede elegir.
Multimedia y gráficos
HTML permite la integración de diversos tipos de contenido multimedia y gráficos, mejorando la interactividad y dinamismo de una página web.
Video <video>
La etiqueta <video> se emplea para insertar vídeos. Soporta múltiples formatos y permite el control de reproducción mediante atributos como «controls», «autoplay» y «loop».
Audio <audio>
La etiqueta <audio> se utiliza para incrustar archivos de audio. Los atributos comunes incluyen «controls», «autoplay» y «loop» para gestionar la reproducción del audio.
Gráficos vectoriales <svg>
La etiqueta <svg> permite definir gráficos vectoriales escalables. Es ideal para crear imágenes y formas que mantienen su calidad sin importar el tamaño al que se ajusten. Permite la creación de gráficos interactivos y animados.
Prueba y validación del código HTML
La prueba y validación del código HTML son esenciales para asegurar que las páginas web funcionen correctamente y cumplan con los estándares web actuales. Aquí se examinan las herramientas y métodos para llevar a cabo estas tareas.
Herramientas de validación
Las herramientas de validación son fundamentales para comprobar que el código HTML esté libre de errores y siga las buenas prácticas. Aquí hay algunas de las herramientas más utilizadas:
- W3C Markup Validation Service: Permite validar documentos HTML y XHTML según las normas establecidas por el W3C.
- HTML Tidy: Una herramienta que no solo valida sino que también puede corregir ciertas inconsistencias en el código.
- Validator.nu: Otra opción popular que permite validar HTML5 y XHTML5.
Depuración con el navegador
La depuración del código HTML en el navegador es crucial para identificar y corregir errores en la estructura y presentación de la página web:
- Google Chrome DevTools: Este conjunto de herramientas para desarrolladores es muy completo e incluye funcionalidades para inspeccionar el DOM, depurar JavaScript y revisar estilos CSS, entre otros.
- Firefox Developer Tools: De manera similar a Chrome DevTools, ofrece capacidades avanzadas para inspeccionar y depurar el código y el rendimiento.
- Edge Developer Tools: Las herramientas de desarrollo de Microsoft Edge ofrecen también una gran variedad de opciones para inspección y depuración.
Recursos y comunidades para desarrolladores
Un componente vital del desarrollo web es el acceso a recursos y el apoyo de la comunidad de desarrolladores:
- MDN Web Docs: La documentación de Mozilla Developer Network proporciona información detallada sobre HTML, CSS, JavaScript y otras tecnologías web.
- Stack Overflow: Una plataforma donde los desarrolladores pueden hacer preguntas y obtener respuestas de la comunidad global de programadores.
- W3Schools: Ofrece una gran cantidad de tutoriales y ejemplos prácticos sobre HTML, CSS y otras tecnologías web.
