HTML es el primer paso para crear cualquier sitio web. En esencia, escribir HTML es simplemente escribir texto normal siguiendo unas reglas que el navegador interpreta y convierte en contenido visual. Es como escribir un documento, solo que, en lugar de verlo como texto plano, el navegador lo organiza y le da forma automáticamente.
Aunque hoy en día muchos usamos editores visuales como Gutenberg en WordPress, conocer la base de HTML sigue siendo muy útil. Entender cómo funciona te permite descifrar la lógica detrás de cualquier web, ver que no es más que caracteres escritos con una estructura definida.
Saber HTML ayuda a comprender cómo las páginas están formadas por bloques de código sencillo, que cuando se combinan con CSS dan vida a la web tal y como la ves. Aunque al principio puede parecer que hay muchas etiquetas por recordar, lo cierto es que en unas pocas horas puedes aprender lo esencial y empezar a construir páginas completas por tu cuenta.
En este artículo te explico desde cero cómo funciona HTML, su estructura básica y las etiquetas más importantes para cualquier proyecto web.
¿Qué es HTML?
HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es un lenguaje que sirve para estructurar y jerarquizar el contenido de una página web, organizando textos, imágenes, listas, tablas, formularios y cualquier otro elemento visible.
HTML no es un lenguaje de programación. Es un lenguaje de marcado, ya que utiliza etiquetas para «marcar» o definir cada sección de la web.
Estructura básica de una página HTML
Cualquier documento HTML debe tener una estructura mínima como esta:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Mi primera página HTML</title>
</head>
<body>
<h1>Bienvenidos</h1>
<p>Este es un ejemplo básico de HTML.</p>
</body>
</html>
Explicación rápida:
<!DOCTYPE html>: indica que es un documento HTML5.<html>: la etiqueta raíz que encierra todo el contenido.<head>: contiene información sobre la página (título, codificación, etc.).<title>: el título que aparecerá en la pestaña del navegador.<body>: donde se escribe el contenido visible en la web (textos, imágenes, listas, etc.).
Cómo funcionan las etiquetas HTML
Las etiquetas son la base de HTML. Todas las etiquetas tienen una etiqueta de apertura y una etiqueta de cierre (excepto algunas que son autocontenidas).
<p>Este es un párrafo</p>
<p>es la apertura.</p>es la etiqueta de cierre.- El contenido va dentro.
Algunas etiquetas son autocontenidas, es decir, no tienen etiqueta de cierre porque no envuelven contenido, por ejemplo <img> o <br>.
Lista completa de etiquetas HTML con ejemplos
Aquí tienes una tabla con las etiquetas estándar más usadas en HTML:
| Etiqueta | Función | Ejemplo |
|---|---|---|
<!DOCTYPE> | Declara el tipo de documento | <!DOCTYPE html> |
<html> | Raíz del documento HTML | <html lang="es"> ... </html> |
<head> | Contiene metadatos | <head> ... </head> |
<title> | Título de la página | <title>Mi Web</title> |
<meta> | Información como charset o descripción | <meta charset="UTF-8"> |
<link> | Vincula archivos externos (estilos, favicons) | <link rel="stylesheet" href="estilos.css"> |
<style> | Define estilos CSS dentro del HTML | <style> p { color: red; } </style> |
<body> | Contenido principal visible | <body> ... </body> |
<h1> a <h6> | Títulos (de mayor a menor jerarquía) | <h1>Encabezado</h1>, <h6>Subtítulo</h6> |
<p> | Párrafo | <p>Texto</p> |
<a> | Enlace | <a href="https://ejemplo.com">Ir</a> |
<img> | Imagen | <img src="imagen.jpg" alt="Descripción"> |
<ul> / <ol> | Lista no ordenada / Lista ordenada | <ul><li>Item</li></ul> / <ol><li>1</li></ol> |
<li> | Elemento de lista | <li>Elemento</li> |
<div> | Contenedor genérico en bloque | <div>Contenido</div> |
<span> | Contenedor en línea | <span>Texto en línea</span> |
<br> | Salto de línea | Texto<br>Más texto |
<hr> | Línea horizontal | <hr> |
<strong> | Texto en negrita con énfasis semántico | <strong>Importante</strong> |
<b> | Texto en negrita (visual, sin énfasis semántico) | <b>Texto en negrita</b> |
<em> | Texto en cursiva con énfasis semántico | <em>Cursiva</em> |
<i> | Texto en cursiva sin semántica | <i>Texto en cursiva</i> |
<table> | Tabla | <table> ... </table> |
<tr> | Fila de tabla | <tr><td>Celda</td></tr> |
<td> | Celda de tabla | <td>Dato</td> |
<th> | Celda de cabecera | <th>Título</th> |
<thead> / <tbody> | Agrupa cabecera / cuerpo de tabla | <thead> ... </thead>, <tbody> ... </tbody> |
<form> | Formulario | <form> ... </form> |
<input> | Campo de entrada | <input type="text"> |
<label> | Etiqueta para campos de formulario | <label for="email">Correo</label> |
<textarea> | Área de texto | <textarea></textarea> |
<button> | Botón | <button>Enviar</button> |
<select> | Menú desplegable | <select><option>Opción</option></select> |
<option> | Opción de menú | <option value="1">Opción 1</option> |
<iframe> | Incrustar páginas o videos externos | <iframe src="https://ejemplo.com"></iframe> |
<section> | Sección de contenido | <section> ... </section> |
<article> | Contenido independiente | <article> ... </article> |
<header> | Cabecera de una sección o página | <header> ... </header> |
<footer> | Pie de página o sección | <footer> ... </footer> |
<nav> | Menú de navegación | <nav> ... </nav> |
<aside> | Contenido complementario | <aside>Publicidad</aside> |
<main> | Contenido principal | <main> ... </main> |
<abbr> | Abreviación | <abbr title="HyperText Markup Language">HTML</abbr> |
<mark> | Texto resaltado | <mark>Texto resaltado</mark> |
<small> | Texto de menor tamaño | <small>Aviso legal</small> |
<code> | Fragmento de código | <code>console.log("Hola")</code> |
<pre> | Texto preformateado (respeta espacios y saltos) | <pre>Texto exacto</pre> |
<blockquote> | Cita en bloque | <blockquote>Cita</blockquote> |
<q> | Cita en línea | <q>Cita corta</q> |
<time> | Fecha u hora | <time datetime="2025-03-21">21 de marzo de 2025</time> |
<audio> | Reproductor de audio | <audio controls src="audio.mp3"></audio> |
<video> | Reproductor de video | <video controls src="video.mp4"></video> |
Atributos HTML: qué son y por qué se agregan en la etiqueta de apertura
Las etiquetas HTML no solo definen la estructura y el tipo de contenido, también permiten añadir atributos que ofrecen información adicional o modifican el comportamiento de ese elemento.
¿Qué es un atributo en HTML?
Un atributo es una información extra que se añade dentro de la etiqueta de apertura de un elemento HTML. Sirve para:
- Ajustar o especificar propiedades (como la dirección de un enlace o el tamaño de una imagen).
- Indicar comportamiento o configuración del elemento.
- Añadir identificadores o clases para estilos (CSS) o scripts.
¿Por qué van en la etiqueta de apertura?
Los atributos definen cómo debe comportarse el elemento desde el momento en que es interpretado por el navegador, por eso siempre van en la etiqueta de apertura, justo después del nombre de la etiqueta.
Estructura de un atributo
<etiqueta atributo="valor">Contenido</etiqueta>
- atributo: el nombre de la propiedad (por ejemplo,
hrefen un enlace). - valor: lo que se le asigna a ese atributo (como una URL o un tamaño).
Ejemplo práctico:
<a href="https://pluginsweb.es">Visítanos</a>
- La etiqueta es
<a>, que crea un enlace. - El atributo es
href="https://pluginsweb.es", que indica la dirección a la que apunta ese enlace.
Atributos comunes que puedes encontrar
| Atributo | Función | Ejemplo |
|---|---|---|
href | Dirección de un enlace | <a href="https://ejemplo.com">Texto</a> |
src | Fuente de una imagen o recurso multimedia | <img src="imagen.jpg"> |
alt | Descripción alternativa para imágenes | <img alt="Descripción"> |
id | Identificador único de un elemento | <h1 id="titulo-principal">Título</h1> |
class | Asigna una o varias clases para estilos | <p class="destacado">Texto</p> |
type | Tipo de entrada o botón en formularios | <input type="text"> |
value | Valor de un campo o botón | <input type="submit" value="Enviar"> |
name | Nombre del campo en formularios | <input name="email"> |
target | Define dónde abrir un enlace (_blank, _self, etc.) | <a target="_blank">Abrir nueva pestaña</a> |
title | Texto que aparece al pasar el ratón (tooltip) | <abbr title="Lenguaje de marcado">HTML</abbr> |
Nota importante:
- Puedes incluir varios atributos a la vez dentro de una misma etiqueta de apertura.
<img src="foto.jpg" alt="Foto de perfil" width="300">
- En este ejemplo, la imagen tiene tres atributos:
src,altywidth.
Atributos booleanos: activar o desactivar funciones con una sola palabra
Los atributos booleanos son un tipo especial de atributos en HTML que no requieren un valor específico. Su simple presencia dentro de la etiqueta de apertura ya activa su función. Sirven para habilitar o deshabilitar comportamientos en campos de formulario y otros elementos.
Ejemplos de atributos booleanos comunes:
<input type="checkbox" checked>
<input type="text" disabled>
<input type="email" required>
checked: marca una casilla o botón de opción por defecto.disabled: desactiva un campo o botón para que no se pueda interactuar.required: hace obligatorio completar ese campo antes de enviar el formulario.readonly: permite que un campo se muestre pero no se pueda modificar.autofocus: enfoca automáticamente un campo al cargar la página.
Estos atributos son muy útiles para controlar la experiencia del usuario de forma sencilla y directa, sin necesidad de aplicar ningún valor adicional. Simplemente con su presencia ya funcionan.
¿Qué tipo de elementos permiten atributos?
Prácticamente todas las etiquetas HTML permiten uno o varios atributos, ya que es la forma de controlar su comportamiento y presentación. Algunos atributos son universales (como id, class, o title) y otros son específicos de ciertas etiquetas (como href en <a> o src en <img>).
¿Qué se puede lograr con HTML?
- Crear la estructura completa de una web.
- Organizar el contenido en bloques o secciones.
- Insertar imágenes, enlaces y listas.
- Crear formularios de contacto, tablas y menús.
- Dar semántica al contenido para que sea más accesible y fácil de entender por navegadores y buscadores.
Conclusión
Con estos conceptos básicos ya estás preparado para entender cómo funciona HTML y cuál es su propósito real. Aunque probablemente no vayas a construir una web completa escribiendo todo el código desde cero, es imprescindible saber cómo se componen las páginas por dentro.
Hoy en día, con herramientas como el inspector del navegador puedes ver la estructura HTML de cualquier sitio web, copiar fragmentos y pegarlos directamente en un bloque de código HTML en editores como Gutenberg. Y aquí es donde marca la diferencia saber HTML: podrás editar y adaptar ese código a tus necesidades.
Serás capaz de eliminar atributos innecesarios, modificar la jerarquía de las etiquetas o reorganizar el contenido para que encaje perfectamente en tu proyecto.
Dominar HTML te da control total sobre cualquier página web, ya sea un proyecto personal o un trabajo profesional. Es la base para poder personalizar, depurar o mejorar cualquier contenido web sin depender al 100% de herramientas visuales.
¿Te ha resultado útil esta guía de html?