Teórico HTML5

Introducción

Realizaremos una breve guía teórica de las etiquetas más importantes de un documento web escrito en HTML.

HTML5 es la versión más reciente del Lenguaje de Marcado de Hipertexto. Es el código estándar que utilizan los navegadores para interpretar, estructurar y dar contenido a las páginas web.

En lugar de simplemente mostrar texto, HTML5 utiliza etiquetas como cajas para indicarle al navegador lo que contiene en su interior.

A continuación, se presenta un desglose de las etiquetas utilizadas, su función y sus valores por defecto (comportamiento visual inicial).

❖ Declaración

<!DOCTYPE html>

No es una etiqueta, sino una instrucción para el navegador.
Le indica al navegador que estás utilizando la versión moderna de HTML (HTML5) para que renderice la página correctamente.

❖ Etiquetas de Estructura

🏣 <html>…</html>

Envuelve todo el contenido de tu documento web.
Es el punto de partida y encierra a las secciones. Actúa como contenedor global.

🤖 <head>…</head>

La “cabeza” del documento.
Contiene información técnica y de configuración de la página (metadatos, enlaces a hojas de estilo, título de la pestaña).
Nada de lo que está aquí se ve directamente en la pantalla.

🏇 <body>…</body>

El “cuerpo” del documento.
Lo que escribimos en su interior, es lo que el usuario va a visualizar.
Contiene todo el contenido visual y funcional con el que el usuario interactuará (textos, imágenes, videos, botones, etc.).

Ejemplo de estructura básica

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

El atributo “lang” de la etiqueta html significa language en inglés, es decir el lenguaje en el que está escrito. La abreviación “en” hace referencia a english (inglés). Para español escribiremos “es”. Es importante para los traductores, los buscadores y los lectores de documentos web.

⚙️ Paso 1 - Dentro del <head>

Recordemos que lo que se escribe en esta etiqueta es información para el navegador. Y no es visible para el usuario. Forma parte de la configuración.

◆ <meta>

Metadatos del sitio.
Se usa dentro del head para definir configuraciones como la codificación de caracteres (ej. UTF-8 para tildes y símbolos), la adaptación a celulares (viewport), y la descripción para buscadores.
No tiene etiqueta de cierre.

◆ <title>…</title>

El título de la pestaña superior.
Define el nombre que aparece en la pestaña del navegador y que leen los motores de búsqueda como título principal.

◆ <link>

Define la relación entre el documento actual y un recurso externo. define la relación entre el documento actual y un recurso externo.
Su uso más común es conectar archivos CSS externos para dar diseño y estructura visual a la página web. También permite definir el icono pequeño que se muestra en la pestaña del navegador. Se utiliza para enlazar tipografías externas, como las de Google Fonts. Optimiza el rendimiento del sitio web al avisar al navegador que descargue ciertos archivos con anticipación (rel=“preconnect”).

◆ <script>…</script>

Se usa para insertar o vincular código ejecutable, principalmente JavaScript, en una página web.
Sirve para añadir interactividad al sitio, controlar elementos multimedia, validar formularios de forma inmediata, realizar animaciones y procesar datos sin recargar la página.

Hoy en día, puedes poner tus scripts en el head sin ralentizar la página usando dos atributos especiales que permiten descargar el código en segundo plano:

defer (Recomendado): Descarga el script en segundo plano mientras el HTML se sigue leyendo. El script se ejecuta solo cuando el HTML termina de cargar por completo. Mantiene el orden de los archivos.

async: Descarga el script en segundo plano y lo ejecuta en el instante en que se termina de descargar, sin importar si el HTML terminó de cargar o no. Puede romper el orden si un script depende de otro.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="imagenes/icono-logo.svg" type="image/x-icon">
    <title>Mi primer ejercicio</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Sniglet:wght@400&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
</head>

📦 Dentro del <body> - Los Contenedores semánticos

Etiqueta	Nombre/Propósito	Descripción y Uso
<header>	Cabecera	Contenedor introductorio o menú superior (logo, títulos, navegación).
<nav>	Navegación	Agrupa enlaces principales de navegación (menús, índices).
<main>	Contenido Principal	Contenido exclusivo y central de la página. Solo debe haber uno por página.
<section>	Sección Temática	Agrupa contenido bajo una misma temática (capítulos, bloques).
<article>	Artículo Independiente	Contenido autocontenido (entradas de blog, noticias, comentarios).
<aside>	Contenido Complementario	Información complementaria o barra lateral (sidebars, links relacionados).
<footer>	Pie de página	Cierre de sección o de página (derechos de autor, legales, contacto).
<div>	División Genérica	Contenedor multipropósito en bloque. Se utiliza cuando no hay etiqueta semántica adecuada.
<span>	Contenido en línea	Agrupa fragmentos de texto o imágenes para aplicar CSS/JS sin romper el flujo.

Display block vs display inline.

Observar que todos estos contenedores tienen display block, excepto la etiqueta span. Cuando es block ocupa como ancho toda la línea de la pantalla, en cambio cuando es inline, solo su contenido. Cuando escribimos etiquetas con display block, se rederizan una abajo de la otra, porque cada una ocupa todo el ancho de la pantalla. Cuando escribimos etiquetas con display inline, se renderizan una al lado de la otra, porque solo ocupa el ancho de su contenido.

<body>
    <header>
        ...
        <nav>
            ...
        </nav>
    </header>
    <main>
        <section>
            <article>
                ...
            </article>
            <article>
                ...
            </article>
        </section>
    </main>
    <footer>
        ...
    </footer>
</body>

📝 Texto y Tipografía

● <h1>…</h6> Encabezados o títulos. Indican los títulos y subtítulos del documento. h1 es el más importante (suele haber sólo uno por página) y los números siguientes son de menor jerarquía (hasta h6).

● <p>…</p> Párrafo. Define un bloque de texto estándar (por ejemplo, un párrafo de un artículo).

● <strong>…</strong>Texto de importancia. Aporta énfasis semántico a una palabra o frase para indicar que es de suma importancia o urgencia. Elemento en línea (display: inline) con texto en negrita

● <u>…</u>Texto subrayado. Define un texto subrayado con fines de estilización (por ejemplo, un nombre propio) o para destacar algo que no implica necesariamente importancia semántica. Elemento en línea (display: inline) con una línea por debajo del texto, subrayado.

● <small>…</small>Texto pequeño. Se usa para comentarios secundarios, advertencias legales (letras pequeñas), o contexto de menor importancia. Elemento en línea (display: inline) con un tamaño de fuente menor a la estándar.

● <blockquote>…</blockquote>Cita de autor. Se utiliza para indicar que un bloque de texto completo es una cita textual tomada de otra fuente. Elemento de bloque con margen izquierdo y derecho.

● <address>…</address>Dirección de contacto. Proporciona información de contacto para el autor o propietario del documento (dirección física, email, teléfono).Elemento de bloque con el texto en cursiva (italic).
Valor por defecto:

● <hr> Regla horizontal. Crea un salto temático o una división visual entre párrafos u otros bloques de contenido.

🔗 Enlace

<a>…</a>

Ancla o enlace.
Convierte un texto en un hipervínculo que redirige a otra página web, a otra sección del mismo documento, o permite descargar un archivo.
● Elemento en línea (display: inline) con texto subrayado y color azul o morado (dependiendo si ya fue visitado).
● Siempre tiene cursor pointer (dedo pulsor).
● Atributo importante : en su href=“…” . Al presionarlo, nos dirije a otro sector de la misma página o a un sitio web externo.
Por ejemplo:

    <a href="https://nike.com" target="_blank">Ir a Nike.com</a>
    <a href="#seccion1">Nombre de la sección</a>

📋 Listas

● <ul>…</ul> Lista con viñetas. Crea una lista de elementos donde el orden de los elementos no importa.
● <ol>…</ol> Lista numerada. Crea una lista de elementos donde el orden de los elementos si importa.
● <li>…</li> Elemento de una lista. Representa un ítem individual dentro de una lista (ul u ol).

Por ejemplo:

        <ul>
            <li><a href="#introduccion">Introducción</a></li>
            <li><a href="#accion">Acción Humana</a></li>
            <li><a href="#valor">Valor</a></li>
            <li><a href="#mercado">Mercado</a></li>
            <li><a href="#ejemplo">Ejemplo</a></li>
            <li><a href="#tabla">Resumen</a></li>
            <li><a href="#conclusion">Conclusión</a></li>
        </ul>

📊 La Tabla

<table>…</table>

Tabla .
Crea la estructura general de una tabla para organizar datos tabulares (filas y columnas).

Partes de una tabla

● <caption>…</caption> Título de la tabla.
● <thead>…</thead> Encabezado de la tabla.
● <tbody>…</tbody> Cuerpo de la tabla.
● <tfoot>…</tfoot> Pie de página de la tabla.

Dentro del <thead>…</thead>.

● <tr>…</tr> Fila horizontal.
● <th>…</th> Cada celda con un título.

Dentro del <tbody>…</tbody> y el <tfoot>…</tfoot>.

● <tr>…</tr> Fila horizontal.
● <td>…</td> Cada celda con un dato.

Ejemplo de Tabla en HTML

<table border="1">
    <caption>Conceptos básicos de economía</caption>
        <thead>
            <tr>
                <th>Concepto</th>
                <th>Descripción</th>
                <th>Ejemplo</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Escasez</td>
                <td>Los recursos son limitados.</td>
                <td>Tiempo disponible.</td>
            </tr>
            <tr>
                <td>Elección</td>
                <td>Seleccionar una alternativa.</td>
                <td>Estudiar o descansar.</td>
            </tr>
        </tbody>
</table>

🖼️ Elementos Multimedia (Imágenes, Video y Audio)

Las etiquetas <img>, <video> y <audio> son elementos de HTML5 diseñados para incrustar y gestionar contenido multimedia de forma nativa en un sitio web, sin depender de reproductores externos o complementos (plugins).

📷 <img>

Etiqueta autónoma (sin cierre) que sirve para incrustar imágenes (JPG, PNG, WebP, SVG, etc.) en la página web.

Atributos más importantes:
◆ src: Indica la ruta (URL) donde se encuentra la imagen.
◆ alt: Proporciona un texto alternativo si la imagen no carga o para lectores de pantalla (vital para la accesibilidad y el SEO).
◆ width / height: Permiten definir el tamaño (ancho y alto) de la imagen en la pantalla.

 <img src="economia.jpg" alt="" width="400" height="300">

🎥 <video>…</video>

Contenedor reproducir archivos de video (como MP4, WebM u Ogg) directamente en el navegador.

Atributos más importantes :
◆ src : La ruta del archivo de video.
◆ controls : Agrega los botones nativos de reproducir, pausar, volumen y pantalla completa.autoplay: Hace que el video comience a reproducirse automáticamente (suele requerir que el video esté silenciado por políticas de los navegadores).
◆ loop : Permite que el video se repita en bucle infinito.poster: Define una imagen estática que se muestra como carátula antes de que el usuario le dé al botón de reproducir.

    <video width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">
        Tu navegador no soporta el elemento de video.
    </video>

🎵 <audio>…</audio>

Contenedor para pistas de sonido (.mp3, .wav, .ogg).directamente en el navegador.

Atributos: ◆ controls, autoplay, loop.

    <audio controls>
        <source src="audio.mp3" type="audio/mpeg">
        Tu navegador no soporta el elemento de audio.
    </audio>

💬 Diálogos Modales (<dialog>…</dialog> )

Elemento nativo de HTML5 para crear cuadros de diálogo, modales y ventanas emergentes sin librerías pesadas. Incluye accesibilidad nativa (soporta tecla Esc y capa de fondo u overlay).

    <!--Botón para abrirlo  -->
    <button commandfor="miModal" command="show-modal">¿Qué representa esta imagen?</button>
    <!-- Está cerrado no se ve hasta que se presiona el botón. -->
    <dialog id="miModal">
        <h2>Intercambio</h2>
        <p>Esta imagen representa el <strong>MERCADO</strong> como <strong>INTERCAMBIO</strong> a través de un bien indirecto que es el <i>dinero</i>. </p>

        <!-- 3. Formulario especial nativo para cerrar el modal -->
        <form method="dialog">
            <button>Cerrar</button>
        </form>
    </dialog>

📋 Formulario (<form>…</form> )

Recopila datos introducidos por el usuario y los envía a un servidor web o script para procesarlos.

⚙️Atributos Clave

Estos atributos definen el comportamiento del formulario, hacia dónde viajan los datos y cómo se procesan:

◆ action: Dirección URL del servidor que procesará los datos.
◆ method: Método de envío HTTP:
→ GET: Envía los datos visibles en la barra de direcciones (URL). Ideal para búsquedas.
→ POST: Envía los datos ocultos dentro del cuerpo de la petición. Ideal para contraseñas o datos sensibles.enctype: Define cómo se empaquetan los datos antes de enviarse (solo se usa con el método POST).
◆ enctype: Define la codificación (multipart/form-data es obligatorio para subir archivos).
◆ target: Indica dónde mostrar la respuesta del servidor tras enviar el formulario (por ejemplo, _blank abre la respuesta en una pestaña nueva).
◆ autocomplete: Activa o desactiva (on / off) la sugerencia automática de datos previamente guardados en el navegador del usuario.
◆ novalidate: Desactiva la validación automática nativa del navegador..

🛠️ Controles de Formulario (Elementos Hijos)

Un formulario no funciona solo; requiere de etiquetas internas llamadas “controles de formulario”:

● <input> El elemento más versátil. Cambia su comportamiento según su atributo type (ej. type=“text”, type=“password”, type=“checkbox”, type=“submit”).
● <label>…</label> Define el texto explicativo para un control. Mejora la accesibilidad y amplía la zona de clic si se vincula usando el atributo for.
● <textarea>…</textarea> Crea un cuadro de texto multilínea para comentarios o mensajes largos.
● <select>y < y <option> Crean menús desplegables de opciones seleccionables.
● <button>…</button> Define botones para enviar (type=“submit”) o reiniciar (type=“reset”) el formulario.
● <fielset> y <legend> Agrupan visual y semánticamente campos relacionados (por ejemplo, los datos de dirección de envío).

Atributos clave de los elementos internos

Para que un formulario procese la información correctamente, sus elementos internos deben llevar name. Asigna un nombre al dato. Sin el atributo name, el navegador no enviará el valor de ese campo al servidor.

● value: Define el valor inicial o el dato por defecto del campo.
● required: Obliga al usuario a rellenar el campo antes de poder enviar el formulario.
● placeholder: Muestra un texto de sugerencia gris claro dentro del campo antes de que el usuario escriba algo.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Formulario básico</title>
</head>
<body>
    <!-- El formulario envía los datos por POST a un servidor ficticio (procesar.php) -->
    <form id="miFormulario" action="procesar.php" method="POST">
        <!-- Campo de Texto Obligatorio -->
        <div class="campo">
            <label for="nombreUsuario">Nombre completo:</label>
            <input type="text" id="nombreUsuario" name="nombre" placeholder="Juan Pérez" required>
        </div>
        <!-- Campo de Correo Electrónico -->
        <div class="campo">
            <label for="correoUsuario">Correo electrónico:</label>
            <input type="email" id="correoUsuario" name="correo" placeholder="juan@ejemplo.com" required>
        </div>
        <!-- Menú Desplegable -->
        <div class="campo">
            <label for="paisUsuario">País de residencia:</label>
            <select id="paisUsuario" name="pais">
                <option value="AR">Argentina</option>
                <option value="MX">México</option>
                <option value="ES">España</option>
            </select>
        </div>
        <!-- Botón de Envío -->
        <button type="submit">Enviar Datos</button>
    </form>
    <!-- Contenedor para simular la respuesta del servidor -->
    <div id="resultado"></div>
    <!-- A modo de presentación. Se estudiará en javascript-->
    <script>
        // Interceptamos el envío para ver los datos en la misma pantalla sin recargar la página
        document.getElementById('miFormulario').addEventListener('submit', function(event) {
            // Evita que la página se recargue (frena el envío real al servidor)
            event.preventDefault(); 
            // FormData recolecta automáticamente los valores usando el atributo "name" de cada etiqueta
            const datosFormulario = new FormData(this);
            // Creamos un objeto legible para mostrar la información
            const datosLegibles = {};
            datosFormulario.forEach((value, key) => {
                datosLegibles[key] = value;
            });
            // Mostramos cómo viajan empaquetados los datos en formato JSON
            const contenedorResultado = document.getElementById('resultado');
            contenedorResultado.style.display = 'block';
            contenedorResultado.innerHTML = '<strong>Datos empaquetados listos para el servidor:</strong><br><pre>' + JSON.stringify(datosLegibles, null, 2) + '</pre>';
        });
    </script>
</body>
</html>

🛠️ Puntos clave que debés observar en este código

◆ Vinculación de for con id : Cada etiqueta <label> tiene un atributo for que coincide exactamente con el id del <input>. Esto mejora la accesibilidad.
◆ El motor es el atributo name : Fijate que en el resultado de JavaScript aparecen las claves “nombre”, “correo” y “pais”. Esto es gracias a que se definieron con el atributo name en el HTML.
◆ Validación nativa : Si intentás presionar el botón “Enviar Datos” con los campos vacíos, o si ponés un formato de correo incorrecto, el navegador detendrá el envío automáticamente debido a los atributos required y type=“email”.

Requisito obligatorio

Para procesar un formulario de html, puede no usarse javascript pero si es imprescindible un lenguaje del lado del servidor.
Aunque el formulario HTML no requiera JavaScript, los datos tienen que llegar a algún lugar que los procese o los guarde.

HTML por sí solo no puede guardar datos en una base de datos ni escribir archivos en el disco duro. Necesitás un programa ejecutándose en una computadora de la red (servidor web) que reciba la petición. Es por ello, que este tema solo se presenta, lo estudiaremos más adelante.

Los lenguajes más comunes para esto son:

❖ PHP (el más clásico y sencillo de configurar junto a HTML).
❖ Python (usando frameworks como Flask o Django).
❖ Node.js (JavaScript, pero ejecutado en el servidor, no en el navegador).
❖ C# / Java (muy usados en redes corporativas e intranets).

Como ejemplo solo para ver. Más adelante se explicará en detalle.

<!-- Al presionar enviar, el navegador viaja a la IP del servidor y le entrega los datos -->
<form action="guardar.php" method="POST">
   
   <label for="txtNombre">Nombre del empleado:</label>
   <input type="text" id="txtNombre" name="nombre_empleado" required>

   <label for="txtSector">Sector:</label>
   <input type="text" id="txtSector" name="sector_trabajo" required>

   <button type="submit">Registrar en la Red</button>
</form>

El código del servidor (guardar.php).

Este archivo vive únicamente en la computadora servidor. Se encarga de atrapar los datos y procesarlos.

   <?php
   // PHP recibe las variables empaquetadas nativamente por el navegador bajo el método POST
   $nombre = $_POST['nombre_empleado'];
   $sector = $_POST['sector_trabajo'];

   // Ejemplo: Guardar los datos en un archivo de texto en el servidor
   $linea = "Empleado: " . $nombre . " - Sector: " . $sector . PHP_EOL;
   file_put_contents("registro_red.txt", $linea, FILE_APPEND);

   // Responderle al usuario mostrando el éxito en pantalla
   echo "<h1>Datos recibidos correctamente en la red local. Gracias, " . $nombre . "!</h1>";
   ?>

Información al margen. Nosotros no los usaremos.

Existen servicios web gratuitos excelentes diseñados específicamente para resolver esto. Se conocen como Form Backends o “Backends sin servidor”.
Funcionan como un puente: te dan una dirección URL especial que colocás en el atributo action de tu formulario. Cuando el usuario presiona “Enviar”, el propio navegador redirige la información a esa plataforma externa, y ésta se encarga de enviarte los datos por correo electrónico, Slack, Telegram o guardarlos en una hoja de Google Sheets.

Plataformas destacadas (Planes gratuitos).

❖ Formspree: Es el clásico estándar de la industria. Su plan gratuito te permite recibir hasta 50 envíos al mes. Te notifica directamente a tu correo electrónico de forma instantánea.
❖ Web3Forms: Muy popular porque su plan gratuito es sumamente generoso: te permite recibir hasta 250 envíos mensuales sin necesidad de registrar claves complejas.
❖ FormBold: Una alternativa excelente que te permite recibir 100 envíos mensuales gratis. Además de enviarte un mail, te permite conectar los datos de forma nativa con aplicaciones como Notion o Discord.
❖ Getform: Te ofrece un panel visual muy cómodo para ver y exportar todas las respuestas que van llegando a una base de datos interna.

Para implementarlo, solo necesitás crear una cuenta gratuita en cualquiera de estas plataformas. Al registrar tu formulario, la página te dará una URL de endpoint única.

Nosotros veremos cómo captar un formulario, recién cuando estudiemos javascript y nodejs. Por ahora es sólo una visión general de esta etiqueta.

Descargar Diapositivas teórico HTML
Descargar PDF teórico HTML

←HTML-CSS SubOpciones

Teórico CSS→