Curso de HTML / Qué es HTML y para qué sirve en una página web

HTML (HyperText Markup Language, lenguaje de marcado de hipertexto) describe la estructura y el significado del contenido de una página web. Permite identificar títulos, párrafos, listas, enlaces e imágenes. CSS se ocupa principalmente de la presentación, mientras que JavaScript permite programar comportamientos y modificar la página.

Qué significa marcar el contenido

Unas mismas palabras pueden ser el título de una página, una explicación o un enlace. HTML permite expresar esa diferencia mediante elementos: no se limita a indicar qué texto debe aparecer, sino que señala qué función cumple. Un navegador interpreta ese marcado para construir el documento; las tecnologías de apoyo también pueden aprovechar su estructura.

Por ejemplo, elegir un encabezado porque pertenece a una sección tiene sentido aunque después CSS cambie su tamaño. Elegirlo únicamente porque sus letras son grandes confunde significado y presentación. La introducción del estándar HTML de WHATWG define el marco general del lenguaje.

HTML no es principalmente una herramienta para realizar cálculos o expresar condiciones. Su función central es organizar contenido y conectar documentos mediante hipertexto. Eso no impide que ciertos elementos, como los controles de un formulario, tengan comportamientos nativos.

Cómo se reparten las tareas HTML, CSS y JavaScript

Esta separación sirve para empezar, pero no es una frontera absoluta. HTML incluye elementos interactivos, y CSS puede responder a estados o crear animaciones. No hace falta añadir JavaScript para todo lo que se abre, cambia de aspecto o responde al teclado. Primero identifica qué necesidad cubre el propio elemento.

Relacionar un fragmento con lo que muestra el navegador

En el siguiente fragmento, h1 identifica el encabezado principal, p crea un párrafo y ul reúne elementos li en una lista sin orden numérico. Las frases en inglés son contenido de muestra; los nombres de las etiquetas pertenecen al lenguaje HTML.

<h1>Today’s notes</h1>

<p>HTML structures content.</p>

<ul>

  <li>Heading</li>

  <li>Paragraph</li>

</ul>

El resultado presenta un encabezado, un párrafo y dos viñetas. Las tipografías y los márgenes dependen de los estilos del navegador o de la página. La función de cada elemento se mantiene aunque su aspecto cambie. Este bloque es un fragmento; para disponer de un archivo independiente necesitas la estructura del ejemplo completo.

Crear y abrir un archivo HTML completo

Prepara un editor de texto sin formato y un navegador. No necesitas instalar un servidor para esta primera práctica. Copia todo el bloque siguiente en un archivo nuevo y guárdalo como index.html con codificación UTF-8. Evita que el editor lo convierta en index.html.txt.

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Today’s notes</title>

  </head>

  <body>

    <h1>Today’s notes</h1>

    <p>HTML structures content.</p>

    <ul>

      <li>Heading</li>

      <li>Paragraph</li>

    </ul>

  </body>

</html>

Abre el archivo con el navegador. Comprueba que la pestaña y el encabezado muestran “Today’s notes”, y que debajo aparecen el párrafo y la lista. head contiene información del documento; body contiene su contenido principal. Encontrarás esa separación con más detalle en la estructura básica de un documento HTML.

Cambia únicamente el texto de title, guarda y recarga: debe cambiar la pestaña, no el encabezado. Después modifica solo h1 y compara el resultado. Devuelve los dos valores a su estado inicial. Si sustituyes el contenido de muestra por texto en español, cambia también lang="en" por lang="es".

Si no aparece la modificación, comprueba el guardado y la ruta del archivo abierto. Si ves las etiquetas como texto, revisa la extensión real y confirma que guardaste texto sin formato. Abrir un archivo local permite practicar, pero no lo publica en Internet: otras personas necesitan acceder a los archivos mediante un alojamiento web. La forma de escribir etiquetas y atributos se desarrolla en la sintaxis de HTML.