Introducción

HTML (HyperText Markup Language) es el lenguaje de marcado utilizado para crear y estructurar el contenido de las páginas web. Cada vez que visitas un sitio web, el navegador descarga uno o varios documentos HTML y los interpreta para construir la página que aparece en pantalla.

Aunque el resultado final sea una página con colores, imágenes, animaciones o botones interactivos, HTML únicamente describe qué elementos forman parte del documento y cuál es su significado. El diseño visual corresponde a CSS, mientras que la interactividad y el comportamiento dinámico se implementan mediante JavaScript.

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.

Aprender HTML constituye el primer paso para desarrollar aplicaciones web. Todos los demás lenguajes y tecnologías del desarrollo web se apoyan sobre él.

Conocimiento previo

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

Referencias

• MDN Web Docs - HTML
• WHATWG HTML Living Standard
• W3C - Markup Validation Service

Índice

1. ¿Qué es HTML?
   1.1. Origen de HTML
   1.2. Lenguaje de marcado
   1.3. HTML en el navegador
2. Los archivos HTML
   2.1. Crear un archivo HTML
3. Sintaxis básica
   3.1. Elementos
   3.2. Etiquetas
   3.3. Atributos
   3.4. Elementos vacíos
4. Estructura de un documento HTML
   4.1. La declaración DOCTYPE
   4.2. El elemento html
   4.3. El elemento head
   4.4. El elemento body
5. Comentarios
6. Encabezados y párrafos
7. Formato del texto
8. Enlaces
   8.1. Enlaces absolutos
   8.2. Enlaces relativos
   8.3. Abrir un enlace en una nueva pestaña
   8.4. Enlaces a una dirección de correo electrónico
   8.5. Enlaces telefónicos
   8.6. Enlaces a secciones
9. Imágenes
10. Listas
    10.1. Listas no ordenadas
    10.2. Listas ordenadas
    10.3. Listas de descripción
    10.4. Listas anidadas
11. Tablas
    11.1. Estructura
    11.2. Encabezado, cuerpo y pie
    11.3. Estructura
12. Formularios
    12.1. Etiquetas
    12.2. Controles
    12.3. Listas desplegables
    12.4. Áreas de texto
    12.5. Botones
    12.6. Agrupar controles
    12.7. Validación de datos
13. Contenedores
    13.1. Elemento div
    13.2. Elemento span
14. HTML semántico
    14.1. Elementos semánticos
15. Validación de documentos
16. Entornos de desarrollo para HTML
17. Ejercicios

1. Qué es HTML

HTML (HyperText Markup Language) es un lenguaje de marcado utilizado para definir la estructura y el significado del contenido de una página web.

Su función consiste en indicar qué representa cada parte de un documento. Por ejemplo, permite identificar un título, un párrafo, una imagen, una tabla o un formulario. Posteriormente, el navegador interpreta esa información y genera la representación visual que ve el usuario.

HTML constituye el núcleo de cualquier página web. Sin él, el navegador no dispondría de información suficiente para organizar correctamente el contenido.

A diferencia de un lenguaje de programación, HTML no ejecuta instrucciones ni implementa algoritmos. Tampoco permite realizar operaciones matemáticas, utilizar estructuras condicionales o repetir instrucciones mediante bucles. Su finalidad es exclusivamente describir la estructura del documento.

Los documentos HTML están formados por elementos, y cada elemento se representa mediante una o varias etiquetas.

Por ejemplo:

<h1>Introducción a HTML</h1>

<p>HTML permite estructurar el contenido de una página web.</p>

En este ejemplo:

• El elemento <h1> identifica un encabezado de primer nivel.
• El elemento <p> identifica un párrafo.

El texto contenido entre ambas etiquetas será interpretado por el navegador y mostrado en pantalla.

Aunque el navegador suele representar visualmente cada elemento con un formato determinado, HTML no define el diseño de la página, únicamente describe su estructura.

1.1. Origen de HTML

HTML fue desarrollado por Tim Berners-Lee en 1991 mientras trabajaba en el CERN (Organización Europea para la Investigación Nuclear).

Su objetivo era crear un sistema que permitiera compartir documentos científicos mediante enlaces entre ellos, dando origen a la World Wide Web (WWW).

La primera versión de HTML era muy sencilla y disponía de un número reducido de etiquetas destinadas principalmente a estructurar documentos de texto mediante títulos, párrafos, listas y enlaces. A medida que la Web fue creciendo, surgió la necesidad de incorporar nuevos elementos que permitieran crear páginas cada vez más completas e interactivas.

Como consecuencia, HTML ha evolucionado a lo largo de los años mediante distintas versiones, cada una de ellas ampliando las capacidades del lenguaje.

Aunque durante muchos años se habló de HTML5 como la versión más reciente del lenguaje, actualmente la especificación ya no evoluciona mediante versiones numeradas.

El desarrollo de HTML está definido por el estándar HTML Living Standard, mantenido por la organización WHATWG (Web Hypertext Application Technology Working Group). Se trata de un estándar vivo que incorpora mejoras y nuevas funcionalidades de forma continua, evitando la publicación de nuevas versiones como ocurría anteriormente.

Por este motivo, en la documentación actual todavía es frecuente encontrar referencias a HTML5, aunque técnicamente el lenguaje continúa evolucionando bajo el estándar HTML Living Standard.

1.2. Lenguaje de marcado

Un lenguaje de marcado utiliza etiquetas para describir el contenido de un documento.

Estas etiquetas no forman parte del contenido visible, sino que proporcionan información sobre el significado de cada elemento.

Por ejemplo, en el siguiente fragmento:

<p>HTML, CSS, and JavaScript are the core technologies of web development.</p>
<br>
<p>This is another example of HTML.</p>

Las etiquetas <p> y <br> indican al navegador que el primer texto corresponde a un párrafo y luego hay un salto.

El navegador no interpreta estas etiquetas como texto que deba mostrarse al usuario. En su lugar, las utiliza para construir la estructura de la página.

1.3. HTML en el navegador

Cuando un usuario accede a una página web, el navegador solicita al servidor el documento HTML correspondiente.

Una vez recibido, comienza un proceso de interpretación en el que analiza todas las etiquetas presentes en el documento para construir una representación interna conocida como DOM (Document Object Model).

A partir de esta estructura, el navegador podrá aplicar posteriormente los estilos definidos mediante CSS y ejecutar el código JavaScript asociado a la página.

2. Los archivos HTML

Los documentos HTML son archivos de texto cuyo contenido está formado por etiquetas HTML. Estos archivos pueden crearse con cualquier editor de texto, aunque lo habitual es utilizar un editor de código, ya que proporciona herramientas que facilitan la escritura, organización y validación del código.

A diferencia de otros lenguajes de programación, HTML no requiere un proceso de compilación ni la instalación de herramientas específicas para ejecutarse. Una vez creado el archivo, basta con abrirlo mediante un navegador web para que este interprete su contenido y muestre el resultado.

2.1. Crear un archivo HTML

Comienza creando una carpeta donde almacenar el proyecto. Por ejemplo:

primer-html/

Dentro de esa carpeta crea un archivo denominado index.html

La estructura inicial del proyecto será la siguiente:

primer-html/
└── index.html

La extensión .html identifica los documentos HTML. Cuando un navegador detecta un archivo con esta extensión, sabe que debe interpretarlo como una página web.

Aunque un documento HTML puede recibir cualquier nombre, es habitual utilizar index.html para la página principal de un sitio web. Muchos servidores web buscan automáticamente un archivo con este nombre cuando un usuario accede a un directorio sin indicar un documento concreto.

Abre el archivo index.html con un editor de texto y escribe el siguiente contenido:

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

No es necesario comprender todavía el significado de cada una de estas etiquetas, en los siguientes apartados se explicarán en detalle.

Una vez guardado el archivo, ya es posible su apertura haciendo doble clic sobre él. Si los archivos HTML están asociados a un navegador, este se abrirá automáticamente mostrando el contenido del documento.

También puedes hacer clic con el botón derecho sobre el archivo y seleccionar la opción Abrir con, eligiendo el navegador que prefieras.

Al cargarse el documento, el navegador interpretará el código HTML y mostrará una página similar a la siguiente.

Si realizas cualquier modificación en el archivo HTML, será necesario guardar los cambios y actualizar la página del navegador para visualizar el nuevo resultado.

Durante el desarrollo de aplicaciones web es habitual trabajar con el editor de texto y el navegador abiertos simultáneamente. De esta forma es posible modificar el documento, guardarlo y comprobar inmediatamente el efecto de los cambios realizados.

3. Sintaxis básica

Todo documento HTML está formado por elementos. Cada elemento representa una parte del contenido de la página, como un título, un párrafo, una imagen o un enlace.

Para definir estos elementos se utilizan etiquetas, que indican al navegador dónde comienza y dónde termina cada uno de ellos. Además, muchos elementos pueden incorporar atributos, que permiten proporcionar información adicional o modificar su comportamiento. Finalmente, aparece el contenido que tendrá el elemento.

Aunque los términos elemento, etiqueta y atributo suelen utilizarse como sinónimos, en realidad hacen referencia a conceptos diferentes.

3.1. Elementos

Un elemento HTML es la unidad básica que compone un documento HTML.

Cada elemento representa un tipo de contenido concreto dentro de la página.

Por ejemplo, el siguiente fragmento contiene dos elementos distintos:

<h1>Introducción a HTML</h1>

<p>HTML permite estructurar el contenido de una página web.</p>

• El primer elemento h1 representa un encabezado de nivel 1.
• El segundo elemento p representa un párrafo.

Un elemento HTML suele estar formado por tres partes:

• Una etiqueta de apertura.
• El contenido.
• Una etiqueta de cierre.

Por ejemplo:

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

En este elemento podemos distinguir sus tres partes:

El conjunto de estas tres partes constituye el elemento HTML.

Los elementos HTML pueden contener texto, otros elementos HTML o ambos al mismo tiempo.

Por ejemplo:

<p>
    Aprende <strong>HTML</strong> paso a paso.
</p>

En este caso, el elemento <p> contiene texto y otro elemento HTML (<strong>).

3.2. Etiquetas

Las etiquetas son las marcas que delimitan un elemento HTML.

La mayoría de elementos utilizan dos etiquetas:

• Una etiqueta de apertura.
• Una etiqueta de cierre.

La etiqueta de apertura <p>indica dónde comienza el elemento.

La etiqueta de cierre </p> indica dónde termina.

La diferencia entre ambas consiste en que la etiqueta de cierre incorpora una barra inclinada (/) inmediatamente después del carácter <.

<p>Contenido del párrafo.</p>

Entre ambas aparece el contenido del elemento.

Es importante respetar siempre el orden correcto de apertura y cierre de las etiquetas.

Aunque muchos navegadores son capaces de interpretar documentos con errores, una estructura incorrecta puede provocar resultados inesperados y dificultar el mantenimiento del código.

También es importante cerrar las etiquetas respetando el orden en que fueron abiertas.

El siguiente ejemplo es incorrecto:

<p>
    <strong>Texto importante</p>
</strong>

La forma correcta sería:

<p>
    <strong>Texto importante</strong>
</p>

Puede resultar útil imaginar las etiquetas HTML como si fueran paréntesis. Cada apertura debe tener su correspondiente cierre y ambos deben respetar el orden en el que aparecen.

3.3. Atributos

Los atributos proporcionan información adicional sobre un elemento HTML.

Se escriben siempre dentro de la etiqueta de apertura y permiten modificar el comportamiento del elemento o añadir información complementaria.

Su sintaxis general es la siguiente: <elemento atributo="valor">

Por ejemplo:

<meta charset="UTF-8">

En este caso:

• <meta> representa metainformación dentro del elemento head.
• charset es un atributo.
• "UTF-8" es el valor del atributo, en este caso, la codificación de caracteres.

Los atributos están formados por dos partes:

• El nombre del atributo.
• Su valor.

El valor suele escribirse entre comillas dobles.

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

En este ejemplo aparecen dos atributos:

Un mismo elemento puede contener varios atributos.

<input type="email" id="correo" name="correo">

Cada atributo proporciona una información diferente al navegador.

No todos los elementos admiten los mismos atributos. Algunos son comunes a la mayoría de elementos HTML, mientras que otros únicamente pueden utilizarse con etiquetas concretas.

3.4. Elementos vacíos

Aunque la mayoría de elementos HTML poseen una etiqueta de apertura y otra de cierre, existen algunos que no contienen contenido interno.

Estos elementos reciben el nombre de elementos vacíos.

Por ejemplo:

<img src="paisaje.jpg" alt="Paisaje de montaña">

El elemento <img> no contiene ningún contenido entre una etiqueta de apertura y otra de cierre, ya que toda la información necesaria se especifica mediante atributos.

Otros ejemplos de elementos vacíos son:

<br>
<hr>
<meta charset="UTF-8">
<link rel="stylesheet" href="estilos.css">
<input type="text">

Todos estos elementos representan información o realizan una función específica, pero no contienen texto ni otros elementos HTML en su interior.

En versiones antiguas de XHTML era habitual escribir estos elementos utilizando una barra final.

<br />
<img src="foto.jpg" alt="Fotografía" />

En HTML5 esta barra final es opcional y normalmente se omite.

Por tanto, la forma recomendada es:

<br>

<img src="foto.jpg" alt="Fotografía">

4. Estructura de un documento HTML

Aunque una página web puede contener cientos o incluso miles de líneas de código, todos los documentos HTML comparten una estructura básica. Esta estructura indica al navegador cómo está organizado el documento y qué información contiene.

Si observa el código realizado en el anterior apartado, podras ver que no todas las etiquetas tienen la misma importancia, cada una desempeña una función diferente. Algunas describen la configuración del documento, mientras que otras contienen el contenido que finalmente visualizará el usuario.

La estructura básica de debe tener un documento HTML:

4.1. La declaración DOCTYPE

La primera línea de un documento HTML suele ser la declaración <!DOCTYPE html>.

Aunque su sintaxis se asemeja a una etiqueta HTML, en realidad no es un elemento HTML, sino una declaración que informa al navegador del tipo de documento que va a interpretar.

En la actualidad, está declaración indica que el documento utiliza HTML5, la versión actual del lenguaje.

En versiones antiguas de HTML existían diferentes declaraciones DOCTYPE, mucho más largas y complejas, que hacían referencia a distintas variantes del lenguaje. Desde la llegada de HTML5 todas ellas fueron sustituidas por la declaración actual, mucho más sencilla.

Si se omite esta declaración, algunos navegadores pueden interpretar la página utilizando un modo de compatibilidad destinado a versiones antiguas del lenguaje. Este comportamiento puede provocar diferencias en la representación de la página.

Por este motivo, todo documento HTML moderno debe comenzar con la declaración.

4.2. El elemento html

El elemento <html> es el elemento raíz de cualquier documento HTML.

Todos los demás elementos del documento deben encontrarse en su interior.

Podemos imaginar el elemento <html> como el contenedor principal de toda la página.

Dentro de él se organizan dos grandes bloques:

• El elemento <head>, que contiene información sobre el documento.
• El elemento <body>, que contiene el contenido visible de la página.

<html lang="es">

    <head>
        ...
    </head>

    <body>
        ...
    </body>

</html>

Si se observa en la etiqueta principal, aparece un concepto nuevo, los atributos. La etiqueta html contiene un atributo lang.

Este atributo indica el idioma principal del documento y en este caso, su valor es representa español.

Su utilización facilita el trabajo de los navegadores, los motores de búsqueda y las tecnologías de asistencia, como los lectores de pantalla.

Algunos ejemplos de idiomas que se pueden utilizar,

Siempre que sea posible, es recomendable indicar correctamente el idioma principal del documento.

4.3. El elemento head

El elemento <head> contiene información sobre el documento que no forma parte del contenido visible de la página.

Su función consiste en proporcionar información que utilizarán el navegador, los motores de búsqueda y otros programas que procesan el documento.

Dentro del elemento <head> suelen encontrarse elementos como:

• El título de la página.
• La codificación de caracteres.
• Enlaces a hojas de estilo CSS.
• Archivos JavaScript.
• Iconos del sitio web (favicon).
• Metadatos utilizados por buscadores y redes sociales.

Aunque estos elementos no aparecen directamente en la página, son imprescindibles para el correcto funcionamiento del documento.

Por ejemplo, el elemento <title> define el texto que aparece en la pestaña del navegador.

<title>Mi primera página web</title>

Si modificamos este contenido y volvemos a cargar la página, observaremos que cambia el título mostrado en la pestaña del navegador.

4.4. El elemento body

El elemento <body> contiene todo el contenido que el navegador mostrará al usuario.

En su interior se sitúan la mayoría de elementos HTML que aprenderás a utilizar más adelante.

Dentro del elemento <body> pueden aparecer numerosos tipos de contenido, entre ellos:

• Encabezados.
• Párrafos.
• Imágenes.
• Enlaces.
• Listas.
• Tablas.
• Formularios.
• Contenido multimedia (Vídeos, sonidos, etc.).

Todo aquello que el usuario ve e interactúa en una página web se encuentra, directa o indirectamente, dentro del elemento <body>.

Es importante no confundir el elemento <body> con el elemento <head>.

Mientras que <head> contiene información sobre el documento, <body> contiene el contenido de la página.

5. Comentarios

Los comentarios permiten incluir anotaciones dentro del código HTML sin que sean interpretadas por el navegador ni mostradas al usuario.

Su principal finalidad es documentar el código, facilitar su comprensión y dejar información útil para otros desarrolladores o para uno mismo cuando se vuelva a revisar el documento tiempo después.

La sintaxis de un comentario HTML es la siguiente:<!-- Este es un comentario -->

Todo el contenido situado entre <!-- y --> será ignorado por el navegador.

Por ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Ejemplo</title>
</head>
<body>

    <!-- Título principal de la página -->
    <h1>Bienvenido</h1>

    <!-- Primer párrafo -->
    <p>Este es un documento HTML.</p>

</body>
</html>

Los comentarios pueden ocupar una única línea o varias líneas.

Comentario de una línea:

<!-- Comentario de una línea -->

Comentario de varias líneas:

<!--
Este comentario ocupa
varias líneas.
Puede utilizarse para explicar
una parte compleja del documento.
-->

Los comentarios resultan especialmente útiles para:

• Describir la finalidad de una sección del documento.
• Indicar tareas pendientes.
• Explicar decisiones de diseño.
• Desactivar temporalmente parte del código durante las pruebas.

También es posible comentar temporalmente un bloque de código para evitar que el navegador lo procese.

<!--
<h2>Noticias</h2>

<p>Contenido temporalmente deshabilitado.</p>
-->

Esta técnica puede resultar útil durante el desarrollo, aunque no debe utilizarse para ocultar información sensible, ya que los comentarios continúan formando parte del código fuente de la página y cualquier usuario puede visualizarlos.

6. Encabezados y párrafos

La mayor parte del contenido de una página web está formado por texto. HTML proporciona distintos elementos para organizarlo de manera lógica y facilitar su comprensión tanto a los usuarios como a los navegadores y motores de búsqueda.

Los dos elementos fundamentales para estructurar texto son los encabezados y los párrafos.

Los encabezados representan los títulos y subtítulos del documento.

HTML dispone de seis niveles de encabezado, desde <h1> hasta <h6>.

<h1>Encabezado de nivel 1</h1>
<h2>Encabezado de nivel 2</h2>
<h3>Encabezado de nivel 3</h3>
<h4>Encabezado de nivel 4</h4>
<h5>Encabezado de nivel 5</h5>
<h6>Encabezado de nivel 6</h6>

Cada nivel representa una posición dentro de la jerarquía del documento.

El elemento <h1> corresponde al título principal de la página.

Los elementos <h2> representan los apartados principales.

Los elementos <h3> desarrollan un apartado de nivel superior, y así sucesivamente.

Por ejemplo:

<h1>Introducción a HTML</h1>

<h2>Origen de HTML</h2>

<p>...</p>

<h2>Estructura de un documento</h2>

<h3>El elemento head</h3>

<p>...</p>

<h3>El elemento body</h3>

<p>...</p>

Los encabezados deben utilizarse para definir la estructura lógica del contenido y no únicamente por su apariencia visual.

Un error frecuente consiste en utilizar un <h3> porque “se ve más pequeño” o un <h1> porque “se ve más grande”. El tamaño y el aspecto del texto deben modificarse mediante CSS.

El elemento <p> representa un párrafo de texto.

<p>HTML es un lenguaje de marcado utilizado para estructurar documentos web.</p>

Cada vez que se crea un nuevo párrafo debe utilizarse un nuevo elemento <p>.

<p>Primer párrafo.</p>

<p>Segundo párrafo.</p>

<p>Tercer párrafo.</p>

Aunque en el código fuente existan varias líneas en blanco o múltiples espacios consecutivos, el navegador los interpreta como un único espacio.

Por ejemplo, el siguiente código:

<p>
    HTML          permite

    estructurar            páginas web.
</p>

se visualizará de la misma forma que:

<p>HTML permite estructurar páginas web.</p>

Este comportamiento se debe a que HTML no utiliza los espacios ni los saltos de línea para organizar visualmente el contenido.

7. Formato del texto

Además de organizar el contenido mediante encabezados y párrafos, HTML proporciona diferentes elementos para indicar el significado de determinadas partes del texto.

Es importante comprender que estos elementos describen el contenido desde un punto de vista semántico. Aunque la mayoría de navegadores los representen utilizando negritas o cursivas, su finalidad principal no es modificar el aspecto visual del texto.

El diseño definitivo de una página corresponde a CSS.

El elemento <strong> indica que un fragmento del texto tiene una importancia especial.

<p>
Es imprescindible guardar el documento antes de actualizar el navegador.
</p>

<p>
Es <strong>imprescindible</strong> guardar el documento antes de actualizar el navegador.
</p>

Habitualmente los navegadores representan este elemento en negrita.

El elemento <em> representa un texto que debe enfatizarse dentro de una frase.

<p>
HTML <em>no es</em> un lenguaje de programación.
</p>

Normalmente se muestra en cursiva, aunque su significado va más allá de la apariencia visual.

El elemento <mark> permite resaltar una parte del texto.

<p>
El examen incluirá preguntas sobre <mark>formularios HTML</mark>.
</p>

Generalmente el navegador representa este elemento con un fondo amarillo.

El elemento <small> se utiliza para representar información secundaria, aclaraciones o notas legales.

<p>
Precio: 120 € <small>IVA incluido.</small>
</p>

El elemento <del> representa contenido que ha sido eliminado del documento.

<p>
Precio anterior: <del>80 €</del>
</p>

El elemento <ins> indica contenido añadido posteriormente.

<p>
Precio actual: <ins>65 €</ins>
</p>

HTML dispone de elementos específicos para escribir fórmulas matemáticas, expresiones químicas o referencias.

Superíndice:

<p>x<sup>2</sup></p>

Resultado:

x²

Subíndice:

<p>H<sub>2</sub>O</p>

Resultado:

H₂O

El elemento <br> inserta un salto de línea dentro de un mismo párrafo.

<p>
Primera línea.<br>
Segunda línea.<br>
Tercera línea.
</p>

Debe utilizarse únicamente cuando el propio contenido requiera un salto de línea, por ejemplo en direcciones postales, poemas o letras de canciones.

No debe emplearse para separar párrafos.

El elemento <hr> representa una separación temática entre dos bloques de contenido.

<h2>Capítulo 1</h2>

<p>Contenido del primer capítulo.</p>

<hr>

<h2>Capítulo 2</h2>

<p>Contenido del segundo capítulo.</p>

Habitualmente el navegador representa este elemento mediante una línea horizontal.

8. Enlaces

Uno de los elementos más importantes de HTML es el enlace o hipervínculo. Gracias a ellos es posible navegar entre diferentes páginas web, acceder a documentos, descargar archivos o desplazarse a una sección concreta de una misma página.

Los enlaces son el origen de la World Wide Web (WWW). De hecho, el término HyperText que forma parte del nombre de HTML hace referencia precisamente a la posibilidad de conectar documentos mediante enlaces.

En HTML los enlaces se crean mediante el elemento <a>, también conocido como ancla (anchor).

La sintaxis básica de un enlace es la siguiente:

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

El navegador mostrará el texto FPCode como un enlace sobre el que el usuario podrá hacer clic.

En este ejemplo podemos identificar los siguientes elementos:

El atributo href (Hypertext Reference) es obligatorio, ya que indica el recurso al que se accederá cuando el usuario pulse sobre el enlace.

8.1. Enlaces absolutos

Un enlace absoluto especifica la dirección completa del recurso.

<a href="https://developer.mozilla.org/es/docs/Web/HTML">
    Documentación de HTML
</a>

La dirección incluye el protocolo (https://), el nombre del dominio y la ruta completa del recurso.

Los enlaces absolutos suelen utilizarse para acceder a páginas pertenecientes a otros sitios web.

Otros ejemplos son:

<a href="https://www.google.es">Google</a>

<a href="https://www.wikipedia.org">Wikipedia</a>

8.2. Enlaces relativos

Cuando el recurso pertenece al mismo sitio web, normalmente se utilizan rutas relativas.

Una ruta relativa indica la ubicación del recurso tomando como referencia el documento actual.

Supongamos la siguiente estructura de carpetas:

mi-web/
│
├── index.html
├── contacto.html
├── acerca.html
├── productos/
│   ├── portatiles.html
│   └── impresoras.html
└── imagenes/
    └── logo.png

Desde index.html podríamos acceder a contacto.html mediante:

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

Y acceder a la página de portátiles mediante:

<a href="productos/portatiles.html">
    Portátiles
</a>

Las rutas relativas permiten desplazarse entre diferentes carpetas del proyecto.

Como hemos visto, desde index.html podemos acceder a productos/portatiles.html. Sin embargo, si estamos situados dentro del archivo productos/portatiles.html y queremos volver a la página principal, debemos subir un nivel mediante ..

<a href="../index.html">
    Inicio
</a>

Las rutas relativas presentan varias ventajas:

• Facilitan trasladar el sitio web a otro servidor.
• No dependen del nombre del dominio.
• Simplifican el mantenimiento del proyecto.

Por este motivo son las más utilizadas para enlazar páginas internas.

8.3. Abrir un enlace en una nueva pestaña

Por defecto, al hacer clic sobre un enlace el navegador sustituye la página actual por la nueva.

Si se desea abrir el enlace en una pestaña nueva debe utilizarse el atributo target.

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

El valor _blank indica al navegador que el recurso debe abrirse en una nueva pestaña o ventana, dependiendo de la configuración del navegador.

Cuando se utiliza target="_blank" es recomendable añadir también el atributo rel.

<a
    href="https://www.fpcode.es"
    target="_blank"
    rel="noopener noreferrer">
    FPCode
</a>

Este atributo mejora la seguridad y evita que la nueva página pueda acceder a determinados datos de la página de origen.

8.4. Enlaces a una dirección de correo electrónico

El protocolo mailto: permite abrir automáticamente el cliente de correo predeterminado del usuario.

<a href="mailto:fpcode.edu@gmail.com">
    Contactar
</a>

Al pulsar sobre el enlace se abrirá la aplicación de correo electrónico preparada para redactar un nuevo mensaje dirigido a la dirección indicada.

También es posible especificar el asunto del mensaje.

<a href="mailto:fpcode.edu@gmail.com?subject=Consulta">
    Enviar consulta
</a>

8.5. Enlaces telefónicos

En dispositivos móviles es habitual utilizar enlaces que permitan realizar una llamada telefónica.

Para ello se emplea el protocolo tel:.

<a href="tel:+34900111222">
    Llamar al 900 111 222
</a>

En un teléfono móvil, al pulsar sobre el enlace se abrirá la aplicación de llamadas con el número preparado para marcar.

8.6. Enlaces a secciones

Cuando un documento es muy extenso puede resultar útil crear enlaces que permitan desplazarse directamente a una sección concreta.

Para ello se utiliza el atributo id.

<h2 id="formularios">
    Formularios
</h2>

Posteriormente puede crearse un enlace hacia ese elemento.

<a href="#formularios">
    Ir al apartado de formularios
</a>

El carácter # indica que el destino se encuentra dentro del mismo documento.

Este tipo de enlaces resulta especialmente útil para crear índices, tablas de contenido o botones que permitan volver al principio de la página.

9. Imágenes

Las imágenes son uno de los recursos más utilizados en el desarrollo web. Permiten complementar el contenido textual, ilustrar conceptos, mostrar fotografías, diagramas, logotipos o cualquier otro recurso gráfico que facilite la comprensión de la información.

En HTML las imágenes se insertan mediante el elemento <img>. A diferencia de otros elementos, las imágenes no forman parte del documento como texto, sino que el navegador las carga desde un archivo externo y las muestra en la posición indicada dentro de la página.

Su sintaxis básica es la siguiente:

<img src="imagenes/logo.png" alt="Logotipo de FPCode">

Este elemento no contiene contenido entre una etiqueta de apertura y otra de cierre, por lo que pertenece al grupo de los elementos vacíos.

Para que el navegador pueda mostrar la imagen es necesario indicar, al menos, dos atributos:

• El atributo src (source) indica la ubicación del archivo de imagen que debe cargar el navegador. El valor del atributo puede ser una ruta relativa o una ruta absoluta.
• El atributo alt (alternative text) proporciona una descripción textual de la imagen.

Este último atributo es muy importante, aun que es opcional, siempre debería de incluirse incluirse. Sun funciones son las siguientes:

• Describe la imagen cuando no puede cargarse.
• Es utilizado por los lectores de pantalla para personas con discapacidad visual.
• Facilita la comprensión del contenido por parte de los motores de búsqueda.

Es posible indicar el tamaño con el que se mostrará una imagen mediante los atributos width y height.

<img
    src="imagenes/logo.png"
    alt="Logotipo de FPCode"
    width="250"
    height="120">

Los valores se expresan en píxeles.

Cuando únicamente se especifica uno de ellos, el navegador calcula automáticamente el otro para mantener las proporciones originales de la imagen.

Aunque HTML permite definir el tamaño de una imagen, actualmente esta tarea suele realizarse mediante CSS, ya que ofrece un mayor control sobre la presentación del contenido.

Los navegadores son capaces de visualizar diferentes formatos de imagen. Cada uno presenta características distintas y resulta más adecuado para determinados usos.

Actualmente WebP y AVIF ofrecen una mejor relación entre calidad y tamaño de archivo, aunque JPEG y PNG continúan utilizándose ampliamente.

10. Listas

Las listas permiten agrupar información relacionada de forma ordenada y estructurada. Son uno de los elementos más utilizados en HTML y aparecen con frecuencia en menús de navegación, índices, enumeraciones, pasos de un procedimiento o relaciones de elementos.

HTML proporciona diferentes tipos de listas para adaptarse a las distintas necesidades. Elegir el tipo adecuado ayuda a representar correctamente el significado de la información y facilita su comprensión tanto por parte de los usuarios como de los navegadores y tecnologías de asistencia.

Los tres tipos de listas que ofrece HTML son:

• Listas no ordenadas, cuando el orden de los elementos no es importante.
• Listas ordenadas, cuando existe una secuencia o un orden determinado.
• Listas de descripción, utilizadas para representar términos y sus definiciones.

10.1. Listas no ordenadas

Las listas no ordenadas se crean mediante el elemento <ul> (Unordered List).

Cada elemento de la lista se representa mediante un elemento <li> (List Item).

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

El navegador mostrará una lista en la que cada elemento aparece precedido por un marcador o viñeta.

En este ejemplo:

• <ul> representa la lista completa.
• <li> representa cada uno de los elementos de la lista.

Las listas no ordenadas se utilizan cuando el orden de los elementos no altera el significado de la información.

10.2. Listas ordenadas

Las listas ordenadas se crean mediante el elemento <ol> (Ordered List).

Al igual que las listas no ordenadas, cada elemento se representa mediante un elemento <li>.

<ol>
    <li>Crear el archivo HTML.</li>
    <li>Escribir el contenido.</li>
    <li>Guardar el documento.</li>
    <li>Abrir la página en el navegador.</li>
</ol>

El navegador numera automáticamente cada elemento de la lista.

Las listas ordenadas son apropiadas cuando el orden de los elementos resulta importante.

Por defecto, las listas ordenadas utilizan números.

Sin embargo, mediante el atributo type es posible emplear otros sistemas de numeración.

<ol type="A">
    <li>Primero</li>
    <li>Segundo</li>
    <li>Tercero</li>
</ol>

Los valores más habituales son los siguientes:

También es posible indicar el número inicial de la lista mediante el atributo start.

<ol start="5">
    <li>Quinto elemento</li>
    <li>Sexto elemento</li>
    <li>Séptimo elemento</li>
</ol>

El navegador comenzará la numeración a partir del valor indicado.

10.3. Listas de descripción

Las listas de descripción permiten representar una relación entre un término y su descripción.

Se construyen mediante tres elementos:

• <dl> (Description List), que representa la lista.
• <dt> (Description Term), que representa el término.
• <dd> (Description Details), que representa la descripción del término.

Por ejemplo:

<dl>
    <dt>HTML</dt>
    <dd>Lenguaje de marcado utilizado para estructurar páginas web.</dd>

    <dt>CSS</dt>
    <dd>Lenguaje utilizado para definir la presentación visual de una página web.</dd>

    <dt>JavaScript</dt>
    <dd>Lenguaje de programación que permite añadir interactividad a las páginas web.</dd>
</dl>

Este tipo de lista resulta especialmente útil para crear glosarios, diccionarios de términos, preguntas frecuentes o documentación técnica.

10.4. Listas anidadas

Un elemento de una lista puede contener otra lista en su interior.

Este tipo de estructura recibe el nombre de lista anidada.

Por ejemplo:

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

    <li>
        Bases de Datos
        <ul>
            <li>MySQL</li>
            <li>PostgreSQL</li>
            <li>MongoDB</li>
        </ul>
    </li>
</ul>

Las listas anidadas permiten representar relaciones jerárquicas entre distintos elementos.

11. Tablas

Las tablas permiten organizar información en forma de filas y columnas, facilitando la representación de datos relacionados entre sí.

Son útiles para mostrar información en formato tabular, como estadísticas, inventarios, etc..

11.1. Estructura

Una tabla HTML se construye utilizando diferentes elementos, cada uno con una función específica.

<table>
    <tr>
        <th>Lenguaje</th>
        <th>Función</th>
    </tr>
    <tr>
        <td>HTML</td>
        <td>Estructurar páginas web.</td>
    </tr>
    <tr>
        <td>CSS</td>
        <td>Definir la presentación visual.</td>
    </tr>
    <tr>
        <td>JavaScript</td>
        <td>Añadir interactividad.</td>
    </tr>
</table>

El navegador mostrará una tabla formada por tres columnas y varias filas.

Los elementos utilizados son:

La estructura de una tabla puede entenderse como una sucesión de filas, donde cada fila contiene una o varias celdas.

11.2. Encabezado, cuerpo y pie

Cuando una tabla contiene una gran cantidad de información, resulta recomendable dividirla en diferentes secciones.

HTML proporciona tres elementos para ello:

• <thead>, que representa el encabezado.
• <tbody>, que contiene los datos principales.
• <tfoot>, que representa el pie de la tabla.

Por ejemplo:

<table>

    <thead>
        <tr>
            <th>Producto</th>
            <th>Precio</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Monitor</td>
            <td>189 €</td>
        </tr>

        <tr>
            <td>Teclado</td>
            <td>45 €</td>
        </tr>
    </tbody>

    <tfoot>
        <tr>
            <td>Total</td>
            <td>234 €</td>
        </tr>
    </tfoot>

</table>

Aunque una tabla puede funcionar correctamente sin estos elementos, su utilización mejora la organización del documento y facilita el trabajo de los navegadores, tecnologías de asistencia y hojas de estilo.

11.3. Otras opciones

El elemento <caption> permite añadir un título descriptivo a una tabla.

Debe situarse inmediatamente después de la etiqueta <table>.

<table>

    <caption>
        Calificaciones del alumnado
    </caption>

    <tr>
        <th>Alumno</th>
        <th>Nota</th>
    </tr>

    <tr>
        <td>Ana</td>
        <td>9</td>
    </tr>

</table>

El título ayuda a comprender el contenido de la tabla antes de leer sus datos.

Su utilización resulta útil cuando una página contiene varias tablas.

En ocasiones una celda debe ocupar varias columnas. Para ello se utiliza el atributo colspan. Si de lo contrario, se quiere que una celda ocupe varias filas se usará el atributo rowspan.

Por ejemplo:

<table>

    <tr>
        <th colspan="3">
            Horario de clase
        </th>
    </tr>

    <tr>
        <th>Hora</th>
        <th>Lunes</th>
        <th>Martes</th>
        <th>Miércoles</th>
    </tr>

    <tr>
        <td>08:00</td>
        <td>Programación</td>
        <td rowspan="2">Bases de Datos</td>
        <td>Entornos de desarrollo</td>
    </tr>

</table>

En este ejemplo, la primera celda ocupa el espacio correspondiente a tres columnas. Y en la asignatura Base de datos ocupará dos filas para representar que su horario es a las 08 y a las 09.

El valor del atributo indica el número de columnas o filas que abarcará la celda.

Las tablas deben estructurarse de forma que tanto los usuarios como las tecnologías de asistencia puedan interpretar correctamente la información.

Para ello se utilizan los elementos <th> para identificar los encabezados y el atributo scope, que indica si un encabezado hace referencia a una columna o a una fila.

Encabezado de columna:

<th scope="col">Nombre</th>

Encabezado de fila:

<th scope="row">HTML</th>

El atributo scope mejora la navegación mediante lectores de pantalla, permitiendo asociar correctamente cada dato con su encabezado correspondiente. A efectos de visualización, el contenido se mostrará en negrita.

<table>

    <caption>
        Horario semanal
    </caption>

    <thead>
        <tr>
            <th scope="col">Hora</th>
            <th scope="col">Lunes</th>
            <th scope="col">Martes</th>
            <th scope="col">Miércoles</th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <th scope="row">08:00</th>
            <td>Programación</td>
            <td>Bases de Datos</td>
            <td>Sistemas</td>
        </tr>

        <tr>
            <th scope="row">10:00</th>
            <td>Lenguajes de Marcas</td>
            <td>Programación</td>
            <td>Itinerario Personal</td>
        </tr>

    </tbody>

</table>

12. Formularios

Los formularios permiten recopilar información introducida por el usuario para enviarla posteriormente a una aplicación web. Son uno de los elementos más utilizados en Internet y aparecen en páginas de inicio de sesión, formularios de contacto, buscadores, procesos de compra o registros de usuarios.

Un formulario está formado por diferentes controles, como cajas de texto, listas desplegables, botones o casillas de verificación, que permiten al usuario introducir o seleccionar información.

Todo formulario se define mediante el elemento <form>.

<form>
    ...
</form>

Este elemento actúa como contenedor de todos los controles que forman parte del formulario.

Habitualmente incorpora dos atributos:

• action, que indica la dirección a la que se enviarán los datos.
• method, que especifica el método de envío.

<form action="/registro" method="post">

</form>

En este tutorial no se estudiará el funcionamiento del envío de datos del formulario al servidor.

12.1. Etiquetas

Cada control de un formulario debería disponer de una etiqueta descriptiva creada mediante el elemento <label>.

<label for="nombre">
    Nombre
</label>

<input id="nombre" type="text">

El atributo for del elemento <label> debe contener el mismo valor que el atributo id del control al que hace referencia.

Esta asociación permite que el usuario pueda seleccionar el campo haciendo clic sobre el propio texto de la etiqueta y mejora la accesibilidad del formulario.

12.2. Controles

El elemento <input> representa uno de los controles más versátiles de HTML. Su comportamiento depende del valor del atributo type.

Su sintaxis es: <input id="" name="" type="">

Los atributos que aparecen tienen la siguiente función,

• id Identifica de forma única el control dentro del documento HTML. Se utiliza, entre otras cosas, para asociarlo con un elemento <label> mediante el atributo for.
• name Es el nombre con el que el control se identifica dentro del formulario. Cuando el formulario se envía al servidor, los datos se transmiten utilizando este nombre.
• type Indica el tipo de control que debe crear el navegador, como un campo de texto, una contraseña, una casilla de verificación o un botón de opción. |

Como se indico al principio, este control puede adobtar diferentes comportamientos segun el valor de type.

<form>
    <label for="nombre">Nombre</label>
    <input id="nombre" name="nombre" type="text">
    <br><br>

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

    <label for="password">Contraseña</label>
    <input id="password" name="password" type="password">
    <br><br>

    <label for="edad">Edad</label>
    <input id="edad" name="edad" type="number">
    <br><br>

    <label for="fechaNacimiento">Fecha de nacimiento</label>
    <input id="fechaNacimiento" name="fechaNacimiento" type="date">
    <br><br>

    <p>Lenguajes que conoces:</p>
    <input id="html" name="html" type="checkbox">
    <label for="html">HTML</label>
    <br>
    <input id="css" name="css" type="checkbox">
    <label for="css">CSS</label>
    <br>
    <input id="javascript" name="javascript" type="checkbox">
    <label for="javascript">JavaScript</label>
    <br><br>

    <p>Turno preferido:</p>
    <input id="manana" name="turno" type="radio">
    <label for="manana">Mañana</label>
    <br>
    <input id="tarde" name="turno" type="radio">
    <label for="tarde">Tarde</label>
    <br>
    <input id="noche" name="turno" type="radio">
    <label for="noche">Noche</label>

</form>

El último control que se muestra, son los botones de opción permiten seleccionar una única alternativa entre varias. En el ejemplo se puede apreciar que los botones pertenecen al mismo grupo "turno" de está forma solo se podrá seleccionar una única opción.

12.3. Listas desplegables

Las listas desplegables permiten seleccionar un valor entre un conjunto de opciones. Se crean mediante los elementos <select> y <option>.

<select>

    <option>HTML</option>
    <option>CSS</option>
    <option>JavaScript</option>

</select>

Cada elemento <option> representa una opción disponible dentro de la lista.

También es posible agrupar varias opciones relacionadas mediante el elemento <optgroup>.

<select>

    <optgroup label="Desarrollo Web">
        <option>HTML</option>
        <option>CSS</option>
    </optgroup>

    <optgroup label="Bases de Datos">
        <option>MySQL</option>
        <option>PostgreSQL</option>
    </optgroup>

</select>

12.4. Áreas de texto

Cuando el usuario debe escribir un texto de varias líneas se utiliza el elemento <textarea>.

<label for="mensaje">
    Mensaje
</label>

<textarea id="mensaje"></textarea>

Este elemento suele emplearse en formularios de contacto, comentarios o descripciones.

12.5. Botones

Los botones permiten realizar acciones dentro del formulario. El elemento utilizado es <button>.

<button>
    Enviar
</button>

También es posible indicar el tipo de botón mediante el atributo type.

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

<button type="reset">
    Restablecer
</button>

• submit envía el formulario.
• reset restaura los valores iniciales del formulario.

12.6. Agrupar controles

Cuando un formulario contiene varios grupos de información relacionados resulta recomendable organizarlos mediante los elementos <fieldset> y <legend>. Su utilización mejora la organización del formulario y facilita su comprensión por parte de los usuarios.

<fieldset>

    <legend>Datos personales</legend>

    <label for="nombre">
        Nombre
    </label>

    <input id="nombre" type="text">

    <label for="correo">
        Correo electrónico
    </label>

    <input id="correo" type="email">

</fieldset>

El elemento <fieldset> agrupa varios controles relacionados, mientras que <legend> proporciona un título descriptivo para ese grupo.

12.7. Validación de datos

HTML incorpora mecanismos de validación que permiten comprobar si la información introducida por el usuario cumple determinados requisitos antes de enviar el formulario.

Esta validación la realiza automáticamente el navegador.

Además de estos atributos, algunos tipos de controles realizan automáticamente una validación básica del formato introducido. Como por ejemplo,

• un campo de tipo email comprueba que el texto tenga el formato de una dirección de correo electrónico.
• un campo de tipo number únicamente admite valores numéricos.

13. Contenedores

Como hemos visto hasta ahora, el cuerpo de un documento HTML puede contener numerosos elementos, como encabezados, párrafos, listas, tablas o imágenes.

En ocasiones resulta necesario agrupar varios de estos elementos sin que exista un elemento semántico que describa adecuadamente esa parte del documento. Para estas situaciones HTML proporciona los elementos <div> y <span>.

13.1. Elemento div

El elemento <div> es un contenedor genérico de bloque que permite agrupar otros elementos HTML para tratarlos como una única unidad.

Por ejemplo, puede utilizarse para reunir el contenido de una noticia, una ficha de un producto o un bloque de información y así disponer de diferentes secciones dentro de una misma página.

<div>
    <h1>Listado de cursos</h1>
    <div>
        <h2>Curso de HTML</h2>
        <p>Aprende a crear la estructura de una página web utilizando HTML. </p>
    </div>
    <div>
        <h2>Curso de JavaScript</h2>
        <p>Aprende conceptos básicos de JavaScript y HTML.</p>
    </div>
</div>

En este ejemplo existe un elemento <div> principal que agrupa el título de la página y dos contenedores adicionales, cada uno de ellos con la información de un curso.

Por sí mismo, el elemento <div> no aporta ningún significado al contenido ni produce una apariencia visual específica. Su función consiste únicamente en organizar y agrupar otros elementos del documento.

13.2. Elemento span

El elemento <span> es un contenedor genérico en línea. Se utiliza para agrupar una pequeña parte del contenido de un documento sin modificar su significado.

A diferencia de <div>, que suele agrupar bloques completos de contenido, <span> se emplea normalmente dentro de párrafos u otros elementos para agrupar palabras o fragmentos de texto.

<p>
    El lenguaje <span>HTML</span> es la base de las páginas web.
</p>

Siempre que exista un elemento semántico adecuado (como los que se verán en el punto HTML semántico) hay que utilizarlos.

Sin embargo, no todas las agrupaciones de elementos representan una parte concreta de la página. En muchas ocasiones simplemente se desea agrupar varios elementos relacionados para formar una unidad de información o una sección personalizada. En estos casos resulta apropiado utilizar un elemento <div>.

Siempre que sea posible, debe utilizarse un elemento semántico que se verá en el siguiente punto.

Sin embargo, no todas las agrupaciones de elementos representan una parte concreta de la página, sino, una unidad de información, apartado o sección personalizada.

Los contenedores suelen utilizarse junto con los atributos id y class, que permiten identificar uno o varios contenedores dentro del documento.

Los atributos id y class se estudiarán con mayor profundidad en los tutoriales dedicados a CSS y JavaScript, donde se utilizan para aplicar estilos o seleccionar elementos del documento.

14. HTML semántico

Durante los primeros años de la Web era habitual construir las páginas utilizando casi exclusivamente elementos como <div> y <span>. Aunque esta forma de trabajar permitía organizar el contenido, el código resultaba poco descriptivo, ya que todos esos elementos tenían el mismo significado para el navegador.

HTML incorpora un conjunto de elementos semánticos cuya finalidad es describir el papel que desempeña cada parte del documento.

Se dice que un documento utiliza HTML semántico cuando emplea los elementos más adecuados para representar cada parte de su contenido.

Por ejemplo, si una zona contiene el menú principal de navegación, resulta más apropiado utilizar el elemento <nav> que un simple <div>.

Del mismo modo, si una parte del documento representa el contenido principal de la página, debe utilizarse <main>.

Observa la diferencia entre ambos ejemplos.

Sin semántica:

<div>
    <div>Cabecera</div>
    <div>Menú</div>
    <div>Contenido</div>
    <div>Pie de página</div>
</div>

Con HTML semántico:

<header> </header>
<nav> </nav>
<main> </main>
<footer> </footer>

Aunque ambos documentos pueden mostrar exactamente el mismo resultado visual, el segundo proporciona mucha más información sobre la estructura de la página.

14.1. Elementos semánticos

HTML dispone de numerosos elementos semánticos. Los más utilizados son los siguientes:

En la siguiente imagen puedes ver como se estructuran estos elementos.

Este elemento representa la cabecera de una página o de una sección.

Normalmente contiene elementos como:

• El logotipo del sitio web.
• El título principal.
• Una breve descripción.
• El menú de navegación.

Por ejemplo:

<header>
    <h1>FPCode</h1>
    <p>Portal educativo de informática.</p>
</header>

No debe confundirse con el encabezado <h1>. Mientras que <header> representa una zona del documento, <h1> representa un título.

El elemento <nav> contiene los enlaces principales de navegación de la página. Viene a ser el menú navegable de la página.

<nav>
    <a href="index.html">Inicio</a>
    <a href="tutoriales.html">Tutoriales</a>
    <a href="contacto.html">Contacto</a>
</nav>

No todos los grupos de enlaces deben situarse dentro de un <nav>. Este elemento está pensado para los menús principales o para conjuntos de enlaces que permitan navegar por el sitio web.

El elemento <main> representa el contenido principal de la página. Dentro de él debe encontrarse la información que identifica el propósito del documento.

<main>
    <h1>Introducción a HTML</h1>
    <p>HTML es el lenguaje utilizado para estructurar páginas web.</p>
</main>

Cada documento HTML debería contener un único elemento <main>.

El elemento <section> representa una sección temática dentro del documento. Habitualmente agrupa contenidos relacionados bajo un mismo encabezado.

<section>
    <h2>¿Qué es HTML?</h2>
    <p> HTML permite estructurar el contenido de una página web. </p>
</section>

Una página suele contener varias secciones, cada una dedicada a un tema diferente.

El elemento <article> representa un contenido independiente que puede entenderse por sí mismo.

Algunos ejemplos son:

• Una noticia.
• Una entrada de un blog.
• Un comentario.
• Una publicación de un foro.

<article>
    <h2>Nuevo tutorial disponible</h2>
    <p> Ya está disponible el curso de HTML para estudiantes de FP. </p>
</article>

Si este contenido se copiara a otra página mantendría su significado de forma independiente.

El elemento <aside> contiene información complementaria relacionada con el contenido principal.

Por ejemplo:

• Enlaces relacionados.
• Información adicional.
• Curiosidades.
• Publicidad.
• Recursos de apoyo.

<aside>
    <h3>También puede interesarte</h3>
    <ul>
        <li>Introducción a CSS</li>
        <li>Primeros pasos con JavaScript</li>
    </ul>
</aside>

El contenido del <aside> no forma parte de la información principal del documento, aunque está relacionado con ella.

El elemento <footer> representa el pie de una página o de una sección.

Suele incluir información como:

• Datos de contacto.
• Información sobre derechos de autor.
• Enlaces legales.
• Fecha de publicación.

<footer>
    <p>  © 2026 FPCode </p>
</footer>

Al igual que ocurre con <header>, un documento puede contener varios elementos <footer>, por ejemplo, uno para toda la página y otros dentro de distintos artículos.

El siguiente ejemplo muestra una estructura sencilla utilizando los principales elementos semánticos de HTML.

<body>
    <header>
        <h1>Technology Daily</h1>
        <p>News about computer science and software development.</p>
    </header>

    <nav>
        <a href="home.html">Home</a>
        <a href="news.html">News</a>
        <a href="contact.html">Contact</a>
    </nav>

    <main>
        <article>
            <h2>HTML is over 30 years old</h2>
            <p> Since its creation in 1991, HTML has evolved into the standard language used to structure the content of web pages. </p>
        </article>

        <section>
            <h2>Related Articles</h2>
            <ul>
                <li>History of the Internet</li>
                <li>What is CSS?</li>
                <li>Getting Started with JavaScript</li>
            </ul>
        </section>

        <aside>
            <h3>Featured News</h3>
            <ul>
                <li>New version of a web browser.</li>
                <li>Trends in web development.</li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>© 2026 Technology Daily</p>
    </footer>
</body>

15. Validación de documentos

A medida que una página web crece, es habitual cometer pequeños errores al escribir el código HTML. Algunos de estos errores pueden impedir que una página funcione correctamente, mientras que otros pueden pasar desapercibidos, aunque hagan que el documento no cumpla con los estándares del lenguaje.

Para detectar este tipo de problemas existen los validadores HTML, herramientas que analizan el código y comprueban si se ajusta a las especificaciones del estándar HTML.

Validar un documento no garantiza que una página web sea correcta desde el punto de vista del diseño o la funcionalidad, pero sí ayuda a detectar errores de sintaxis, etiquetas mal utilizadas o atributos incorrectos.

La herramienta de validación más utilizada es W3C Markup Validation Service, un servicio gratuito que permite comprobar si un documento HTML cumple las recomendaciones del estándar. Se puede acceder mediante el siguiente enlace: 👉 https://validator.w3.org/

Este servicio incluye diferentes formas para validar:

• A partir de una dirección web.
• Cargando un fichero HTML.
• Escribiendo el código directamente.

Muchos editores de código, como Visual Studio Code, también incorporan extensiones que detectan algunos errores HTML mientras se escribe el documento. No obstante, estas herramientas no sustituyen a un validador oficial, ya que únicamente realizan comprobaciones básicas.

16. Entornos de desarrollo para HTML

Para crear documentos HTML basta con utilizar un editor de texto. Sin embargo, existen editores de código especializados que incorporan herramientas para facilitar el desarrollo y que ofrecen compatibilidad con HTML y otros muchos lenguajes de programación.

Algunos de los más utilizados son Visual Studio Code, Sublime Text, Notepad++, Brackets o los entornos profesionales de JetBrains, como WebStorm.

1. Visual Studio Code 👉 https://code.visualstudio.com/download 👈

Es uno de los editores de código más utilizados en la actualidad. Fue desarrollado por Microsoft y destaca por ser gratuito, multiplataforma y compatible con un gran número de lenguajes de programación.

Entre sus principales características destacan:

• Resaltado de sintaxis.
• Autocompletado de código.
• Detección de errores.
• Compatibilidad con múltiples lenguajes de programación.
• Gran cantidad de extensiones.
• Terminal integrada.
• Navegador web integrado mediante extensiones como Live Preview o Live Server.

2. WebStorm 👉 https://www.jetbrains.com/webstorm/download 👈

Es un entorno de desarrollo profesional desarrollado por JetBrains y especializado en tecnologías web. Incorpora numerosas herramientas para trabajar con HTML, CSS, JavaScript y otros frameworks modernos.

A diferencia de Visual Studio Code, WebStorm es un producto comercial, aunque dispone de versiones de evaluación y licencias gratuitas para estudiantes y centros educativos.

3. Notepad++ 👉 https://notepad-plus-plus.org/downloads/ 👈

Es un editor de texto ligero y rápido para Windows. Aunque dispone de menos funcionalidades que Visual Studio Code o WebStorm, continúa siendo una opción muy utilizada para editar archivos HTML y otros lenguajes de programación.

Además de los editores de código, los navegadores web incorporan una herramienta muy útil para el desarrollo denominada DevTools (Herramientas para desarrolladores).

DevTools permite analizar y depurar una página web directamente desde el navegador sin necesidad de modificar los archivos originales.

Entre sus principales funcionalidades se encuentran:

• Inspeccionar la estructura HTML de una página.
• Visualizar los estilos CSS aplicados a cada elemento.
• Probar cambios en el código de forma temporal.
• Analizar las peticiones realizadas por la página.
• Detectar errores de JavaScript.
• Simular distintos tamaños de pantalla y dispositivos.

Puedes conocer esta herramienta con mayor detalle en el tutorial: 👉 DevTools

17. Ejercicios

Ejercicio 6: Biblioteca Municipal

A continuación se muestra el aspecto de una página web. Tu objetivo es reproducirla utilizando HTML.

El documento debe utilizar los elementos más adecuados para representar la estructura del contenido. Presta especial atención al uso de encabezados, listas, tablas y elementos semánticos.

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Centro cultural</title>
</head>

<body>

    <header>
        <h1>Centro cultural</h1>
        <p>Actividades y cursos para toda la ciudadanía.</p>
    </header>

    <nav>
        <a href="index.html">Inicio</a>
        <a href="cursos.html">Cursos</a>
        <a href="contacto.html">Contacto</a>
    </nav>

    <main>

        <section>
            <h2>Próximas actividades</h2>

            <article>
                <h3>Taller de programación</h3>
                <p>Aprende los fundamentos de HTML y CSS.</p>
            </article>

            <article>
                <h3>Curso de fotografía</h3>
                <p>Introducción a la fotografía digital.</p>
            </article>
        </section>

        <section>
            <h2>Horario de atención</h2>

            <table>
                <thead>
                    <tr>
                        <th>Día</th>
                        <th>Horario</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>Lunes a viernes</td>
                        <td>09:00 - 20:00</td>
                    </tr>

                    <tr>
                        <td>Sábado</td>
                        <td>10:00 - 14:00</td>
                    </tr>
                </tbody>
            </table>
        </section>

        <section>
            <h2>Formulario de inscripción</h2>

            <form action="#" method="post">

                <p>
                    <label for="nombre">Nombre</label>
                    <input id="nombre" name="nombre" type="text" required>
                </p>

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

                <p>
                    <label for="edad">Edad</label>
                    <input id="edad" name="edad" type="number" min="16" max="99">
                </p>

                <fieldset>
                    <legend>Turno</legend>

                    <input id="manana" name="turno" type="radio" value="manana">
                    <label for="manana">Mañana</label>

                    <input id="tarde" name="turno" type="radio" value="tarde">
                    <label for="tarde">Tarde</label>
                </fieldset>

                <p>
                    <input id="condiciones" name="condiciones" type="checkbox" required>
                    <label for="condiciones">Acepto las condiciones de uso.</label>
                </p>

                <button type="submit">Enviar</button>
                <button type="reset">Restablecer</button>

            </form>
        </section>

        <aside>
            <h2>Enlaces de interés</h2>

            <ul>
                <li><a href="normas.html">Normas del centro</a></li>
                <li><a href="eventos.html">Calendario de eventos</a></li>
                <li><a href="biblioteca.html">Biblioteca digital</a></li>
            </ul>
        </aside>

    </main>

    <footer>
        <p>&copy; 2026 Centro cultural</p>
        <p>Plaza Mayor, 12 · Tel. 900 123 456</p>
    </footer>

</body>

</html>