HTML

Contenido

Introducción
Conocimiento previo
Referencias
Índice
1. Qué es HTML
2. Crear un primer documento HTML
3. Estructura básica de una página
4. Elementos, etiquetas y atributos
5. Texto y encabezados
6. Enlaces e imágenes
7. Listas
8. Tablas
9. Formularios básicos
10. HTML semántico
11. Errores frecuentes
12. Ejercicios

Tutorial introductorio de HTML para crear documentos web bien estructurados: elementos, atributos, texto, enlaces, imágenes, listas, tablas, formularios y HTML semántico.

Por José Luís Ferrer Rodríguez | Actualizado: 28/06/2026

Introducción

HTML significa HyperText Markup Language. Es el lenguaje de marcado que se utiliza para definir la estructura de una página web: títulos, párrafos, enlaces, imágenes, listas, tablas, formularios y secciones del documento.

HTML no es un lenguaje de programación. No sirve para crear algoritmos ni para ejecutar lógica compleja. Su función es describir el contenido y darle significado para que el navegador, los buscadores y las tecnologías de apoyo puedan interpretarlo correctamente.

Conocimiento previo

Uso básico de archivos y carpetas.
Uso elemental de un navegador web.

Referencias

Índice

Introducción
Conocimiento previo
Referencias
Índice
1. Qué es HTML
2. Crear un primer documento HTML
3. Estructura básica de una página
4. Elementos, etiquetas y atributos
5. Texto y encabezados
6. Enlaces e imágenes
7. Listas
8. Tablas
9. Formularios básicos
10. HTML semántico
11. Errores frecuentes
12. Ejercicios

1. Qué es HTML

HTML organiza la información mediante elementos. Cada elemento indica qué tipo de contenido representa una parte de la página.

Por ejemplo:

<h1>Mi primera página</h1>
<p>Este es un párrafo de texto.</p>

El navegador interpreta esos elementos y los muestra visualmente. Además, otros sistemas pueden entender la estructura: lectores de pantalla, motores de búsqueda, herramientas de validación o generadores de documentación.

2. Crear un primer documento HTML

Crea una carpeta llamada primer-html y dentro un archivo index.html.

Contenido inicial:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
  </head>
  <body>
    <h1>Hola, HTML</h1>
    <p>Esta es mi primera página web.</p>
  </body>
</html>

Abre el archivo con el navegador. Verás el título principal y el párrafo.

3. Estructura básica de una página

Un documento HTML suele tener estas partes:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la página</title>
  </head>
  <body>
    Contenido visible de la página
  </body>
</html>

Partes principales:

Parte	Función
`<!doctype html>`	Indica que el documento usa HTML moderno.
`<html>`	Elemento raíz del documento.
`<head>`	Metadatos, título, enlaces a estilos y configuración.
`<body>`	Contenido visible para el usuario.
`<meta charset="UTF-8">`	Permite usar caracteres como tildes y eñes.
`<title>`	Título que aparece en la pestaña del navegador.

4. Elementos, etiquetas y atributos

Un elemento HTML normalmente tiene etiqueta de apertura, contenido y etiqueta de cierre.

<p>Este es un párrafo.</p>

Algunos elementos pueden incluir atributos. Los atributos añaden información adicional.

<a href="https://www.fpcode.es">Visitar FPCode</a>

En este ejemplo:

<a> crea un enlace.
href indica la dirección del enlace.
Visitar FPCode es el texto visible.

Algunos elementos no necesitan contenido interno, como meta o img.

<img src="logo.png" alt="Logotipo del sitio">

5. Texto y encabezados

HTML ofrece elementos para estructurar texto.

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<p>Este es un párrafo con información.</p>

Los encabezados van de h1 a h6. No deben usarse por su tamaño visual, sino por su nivel jerárquico.

También existen elementos para dar significado a fragmentos concretos:

<p>Este texto tiene <strong>importancia</strong> y este tiene <em>énfasis</em>.</p>

strong indica importancia. em indica énfasis. Aunque el navegador suele mostrarlos como negrita y cursiva, su función principal es semántica.

6. Enlaces e imágenes

Los enlaces permiten navegar a otra página o recurso.

<a href="https://developer.mozilla.org/">MDN Web Docs</a>

También puedes enlazar a páginas locales:

<a href="contacto.html">Contacto</a>

Las imágenes se insertan con img:

<img src="imagenes/perfil.jpg" alt="Foto de perfil de una alumna">

El atributo alt es importante porque describe la imagen para personas que usan lectores de pantalla o para casos en los que la imagen no carga.

7. Listas

HTML permite crear listas no ordenadas y ordenadas.

Lista no ordenada:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Lista ordenada:

<ol>
  <li>Crear el archivo HTML</li>
  <li>Escribir la estructura básica</li>
  <li>Abrirlo en el navegador</li>
</ol>

Cada elemento de la lista se escribe con li.

8. Tablas

Las tablas sirven para representar datos tabulares, no para maquetar páginas.

<table>
  <thead>
    <tr>
      <th>Lenguaje</th>
      <th>Uso</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>HTML</td>
      <td>Estructura</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>Presentación</td>
    </tr>
  </tbody>
</table>

Elementos principales:

table: tabla completa.
thead: cabecera.
tbody: cuerpo de la tabla.
tr: fila.
th: celda de encabezado.
td: celda de datos.

9. Formularios básicos

Los formularios permiten recoger datos del usuario.

<form action="/contacto" method="post">
  <label for="nombre">Nombre</label>
  <input id="nombre" name="nombre" type="text">

  <label for="email">Correo electrónico</label>
  <input id="email" name="email" type="email">

  <button type="submit">Enviar</button>
</form>

Buenas prácticas:

Usa label asociado a cada campo mediante for e id.
Usa el tipo de input adecuado: text, email, password, number, etc.
Usa button type="submit" para enviar el formulario.
No dependas solo del texto visual del placeholder.

10. HTML semántico

HTML semántico significa usar elementos que describen el significado del contenido.

<header>
  <h1>FPCode</h1>
</header>

<nav>
  <a href="/tutoriales">Tutoriales</a>
  <a href="/about">Acerca de</a>
</nav>

<main>
  <article>
    <h2>Introducción a HTML</h2>
    <p>HTML permite estructurar documentos web.</p>
  </article>
</main>

<footer>
  <p>Proyecto educativo de informática.</p>
</footer>

Elementos útiles:

Elemento	Uso
`header`	Cabecera de una página o sección.
`nav`	Zona de navegación.
`main`	Contenido principal de la página.
`article`	Contenido independiente.
`section`	Sección temática.
`footer`	Pie de página o sección.

Usar semántica mejora la accesibilidad, el SEO y la mantenibilidad.

11. Errores frecuentes

Error	Ejemplo	Corrección
Olvidar el `doctype`	empezar directamente con `<html>`	añadir `<!doctype html>`
No indicar idioma	`<html>`	`<html lang="es">`
Usar varios `h1` sin criterio	títulos desordenados	mantener jerarquía lógica
Usar tablas para maquetar	tabla para colocar columnas visuales	usar CSS para maquetación
Omitir `alt` en imágenes	`<img src="foto.jpg">`	añadir `alt` descriptivo
No asociar etiquetas en formularios	`label` sin `for`	conectar `for` con el `id` del campo

12. Ejercicios

Ejercicio 1: Estructura básica de una página HTML

Crea un archivo index.html con la estructura básica de una página HTML.

Ejercicio 2: Encabezados y secciones

Añade un h1, dos secciones con h2 y varios párrafos.

Ejercicio 3: Listas y enlaces

Crea una lista ordenada con tus tres sitios web favoritos y añade enlaces a cadascuno.

Ejercicio 4: Imágenes

Añade una imagen con un texto alternativo correcto.

Ejercicio 5: Tabla de lenguajes web

Crea una tabla con tres lenguajes web y su función principal.

Ejercicio 6: Formulario de contacto

Diseña un formulario de contacto con nombre, correo y mensaje.

Ejercicio 7: HTML semántico

Reestructura la página usando header, nav, main, article y footer.

Con estos fundamentos ya puedes crear documentos HTML sencillos, bien estructurados y preparados para trabajar después con CSS, JavaScript, accesibilidad y validación web.