Introducción a HTML
HTML es un lenguaje de marcado para crear sitios web. Consiste en una serie de elementos que estructuran textos, imágenes y otro contenido en el navegador.
HTML son las siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es el lenguaje de marcado estándar utilizado para crear páginas web y aplicaciones que se pueden mostrar en un navegador. Desarrollado a principios de los años 90, combina Hipertexto (que define los enlaces entre páginas web) y Marcado (que describe la estructura del contenido mediante etiquetas).
HTML no es un lenguaje de programación: no tiene lógica ni cálculos. En cambio, describe la estructura: qué partes de una página son encabezados, párrafos, listas, enlaces o imágenes. En una página web típica, tres tecnologías trabajan juntas:
- HTML proporciona la estructura y el contenido (este capítulo).
- CSS controla la presentación: colores, diseño, tipografías.
- JavaScript añade comportamiento e interactividad.
Las etiquetas HTML se usan para definir elementos HTML. Un elemento HTML generalmente consiste en una etiqueta de apertura y una etiqueta de cierre, con el contenido insertado entre ambas. Los navegadores leen las etiquetas para crear documentos HTML y mostrar su contenido en pantalla. Algunas de las etiquetas HTML básicas son <html>, <head>, <title>, <body>, <h1> a <h6>, <p>, <br>, <hr>, <ul>, <ol>, <li>, <a>, <img>, y muchas más.
Tu Primer Documento HTML
Aquí tienes una página HTML completa y mínima. Escríbela en cualquier editor HTML de texto plano, guárdala como un archivo con extensión .html y ábrela en cualquier navegador; verás un encabezado y un párrafo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>Cuando abres este archivo, el navegador analiza el marcado (lee las etiquetas y construye un árbol de elementos) y luego lo renderiza (pinta el resultado en pantalla). El <h1> se convierte en un encabezado grande y el <p> en un párrafo normal; nunca ves los corchetes angulares en sí, solo su efecto. Añade CSS y JavaScript más adelante para dar estilo y animar el mismo contenido.
Versiones de HTML
HTML fue desarrollado por primera vez por el físico británico Tim Berners-Lee en 1990. Desde entonces, han existido muchas versiones de HTML.
| Versión | Año |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2014 |
Algunas notas que facilitan la lectura de la tabla. HTML 4.01 (1999) fue la versión dominante durante aproximadamente una década, por lo que la mayor parte de la web se construyó sobre ella durante años. XHTML 1.0 (2000) reformuló HTML usando reglas XML más estrictas —por ejemplo, todas las etiquetas debían cerrarse y escribirse en minúsculas— pero su rigidez nunca terminó de imponerse en la autoría cotidiana. HTML5 se publicó como Recomendación W3C estable en 2014 (un hito anterior de 2012 era solo un borrador) y es la versión que se usa hoy.
Desde 2014, HTML ya no se publica en versiones numeradas discretas. En su lugar, se mantiene como el Estándar Vivo de HTML de WHATWG, una especificación única que se actualiza continuamente a medida que se adoptan nuevas características. En la práctica, esto es lo que significa "HTML" hoy: no hay un "HTML6" en camino, solo un estándar en evolución. Cuando la gente dice "HTML5" ahora, generalmente se refiere a esta versión moderna y viva del lenguaje.
Conceptos Básicos: Elementos, Etiquetas y Atributos
Los tres bloques de construcción de HTML son los elementos, las etiquetas y los atributos. Un elemento es la unidad estructural principal de una página web. Las etiquetas marcan dónde comienza y termina un elemento, y los atributos proporcionan información adicional sobre un elemento. Las dos secciones siguientes examinan las etiquetas y los atributos en detalle.
Etiquetas HTML
Las etiquetas HTML se usan para estructurar el contenido de un sitio web (texto, hipervínculos, imágenes, medios, etc.). Las etiquetas no se muestran en los navegadores; solo "instruyen" a los navegadores sobre cómo mostrar el contenido de la página web.
Existen más de 100 etiquetas en HTML, y puedes encontrarlas en nuestro tutorial de HTML.
Las etiquetas HTML se escriben entre corchetes angulares (p. ej., <html>).
La mayoría de las etiquetas HTML vienen en pares, como las etiquetas <p> </p>. La primera etiqueta del par se llama etiqueta de inicio (apertura), y la segunda es la etiqueta de fin (cierre). La información se escribe entre las etiquetas de apertura y cierre.
Sin embargo, existen etiquetas no emparejadas o vacías, que solo tienen una etiqueta de apertura (por ejemplo, <img>).
Veamos un ejemplo.
Si necesitas definir un párrafo (que es un elemento), debes usar la etiqueta <p>. El contenido del párrafo se escribe entre las etiquetas de apertura (<p>) y cierre (</p>).
Ejemplo
El marcado a continuación coloca un único párrafo dentro de una página mínima:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Paragraph example</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>El navegador oculta las etiquetas <p> y </p> en sí mismas y renderiza solo el texto entre ellas —"This is a paragraph."— como un bloque de texto del cuerpo.
Atributos HTML
Los atributos HTML se añaden a un elemento para proporcionar información adicional sobre él. Los atributos se escriben dentro de la etiqueta de apertura y siguen la sintaxis nombre="valor": el nombre indica qué se está configurando, y el valor (entre comillas) indica a qué se configura.
Por ejemplo, la etiqueta <img> usa el atributo src para apuntar a un archivo de imagen, width y height para dimensionarlo, y alt para proporcionar texto alternativo para lectores de pantalla y para los casos en que la imagen no se carga:
<img src="logo.png" width="200" height="100" alt="Company logo">Aquí se establecen cuatro atributos en un elemento. Un solo elemento puede llevar tantos atributos como necesite, separados por espacios. Puedes obtener más información en el capítulo de Atributos HTML.
Estructura de un Documento HTML
La declaración <!DOCTYPE html> especifica la versión de HTML utilizada en el documento. Cada documento HTML debe comenzar con esta declaración para que los navegadores puedan renderizar la página conforme a los estándares HTML.
Existen varios tipos de <!DOCTYPE> definidos para cada versión de HTML.
Todo el contenido de la página web se escribe entre las etiquetas <html> </html>. El elemento <html> se usa para informar a los navegadores que se trata de un documento HTML.
El elemento <head> contiene metadatos (datos sobre el documento HTML), conjunto de caracteres, título del documento, estilos, etc. Estos datos no se muestran a los visitantes.
Dentro de <head>, la etiqueta más copiada es la metaetiqueta viewport. Añadir <meta name="viewport" content="width=device-width, initial-scale=1"> indica a los navegadores móviles que adapten el ancho de la página al ancho del dispositivo en lugar de reducir un diseño de escritorio; sin ella, tu página se ve muy pequeña en teléfonos.
El elemento <title> muestra el título del sitio web en la pestaña del navegador cuando se carga la página. El título se escribe entre las etiquetas <title> </title>.
El elemento <body> contiene el contenido de la página web (texto, imágenes, vídeos, etc.). El contenido se escribe entre las etiquetas <body> y </body>.
Los elementos de encabezado contienen distintos tipos de títulos. Hay seis niveles de encabezado: <h1>-<h6>, donde <h1> es la etiqueta más importante y <h6> la menos importante.
El elemento <p> contiene párrafos de texto. El contenido se escribe entre las etiquetas <p> y </p>.
Ejemplo
Introducción a HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title of the document</title>
</head>
<body>
<h1>The most important heading.</h1>
<p>The first paragraph.</p>
<h2>Subheading</h2>
</body>
</html>Resultado
Para empezar a escribir código HTML para tu sitio web necesitarás un editor. Hablemos sobre los editores HTML en el próximo capítulo.