Fase 2: Lenguaje HTML

Contenidos

  • Bases de HTML
  • Multimedia en HTML
  • Formularios en HTML
  • Semántica y mejora progresiva

¡No es programación!
¡Es estructura y contenido!
Te va a corregir...
El guardián del Hipertexto

Etiquetas HTML

  • ¿Qué es el lenguaje HTML? → «Esqueleto de una web»
  • 🧨 ¿Es un lenguaje de programación?
  • Sintaxis de las etiquetas Ver sintaxis
  • Recuerda: los atributos HTML siempre son strings
  • Los atributos más populares: id y class
  • ¿Qué etiquetas existen? No, no sólo <div>

Categorías

  • Estructura general: <html>, <head> y <body>
  • Etiquetas agrupación y texto: <div>, <p> ... / <span>, <a> ...
  • Etiquetas multimedia: <img>, <video>, <audio>, <iframe>...
  • Etiquetas de formularios: <form>, <input>, <textarea>, ...
  • Etiquetas de scripting + interactivas: <script>, <details>, <dialog> ...
  • Etiquetas semánticas: <article>, <section>, <header> ...
  • Etiquetas de metadatos: <title>, <link>, <meta> ...

Tabla periódica

Tabla periódica de los elementos HTML

Estructura general

<!DOCTYPE html>
<html>
  <!-- contenido -->
</html>
  • El <!DOCTYPE html> es importante. Sin él, el navegador entra en modo Quirk «modo peculiar/caprichoso»
  • La etiqueta <html> es la etiqueta que contiene TODA la página.
 
<!DOCTYPE html>
<html>
  <head>
    <!-- Metadatos -->
  </head>
  <body>
    <!-- Parte visual -->
  </body>
</html>
  • Dentro de <html> tenemos dos secciones principales:
  • La etiqueta <head>: La parte de metadatos
  • La etiqueta <body>: La parte visual
 
<!DOCTYPE html>
<html>
  <head>
    <title>Título de la página</title>
    <meta charset="utf8"> <!-- No tiene cierre -->
  </head>
  <body>
    <!-- Parte visual -->
  </body>
</html>
  • El título de la página se establece con <title>
  • La codificación con <meta charset="utf8"> evita «errores» de texto
 
<!DOCTYPE html>
<html>
  <head>
    <title>Título de la página</title>
    <meta charset="utf8">
  </head>
  <body>

    <h1>Título visual de la página</h1>
    <p>Párrafo de texto donde colocamos información.</p>

  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Título de la página</title>
    <meta charset="utf8">
  </head>
  <body>
    <div class="page">
      <h1>Título visual de la página</h1>
      <p>Párrafo de texto donde colocamos información.</p>
    </div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>Título de la página</title>
    <meta charset="utf8">
    <link rel="stylesheet" href="index.css"> <!-- Añade estilos, sin cierre -->
    <script src="index.js"></script>         <!-- Añade Javascript -->
  </head>
  <body>
    <div class="page">
      <h1>Título visual de la página</h1>
      <p>Párrafo de texto donde colocamos información.</p>
    </div>
  </body>
</html>

Agrupación y texto

  • Etiquetas de bloque: <div>, <p>, <ul>, <ol>... (agrupan) → Tabla
  • Etiquetas en línea: <span>, <strong>, <a>, <em>... (fragmentos de texto) ➡
<p>
  Esto es un párrafo de texto donde estamos
  <strong>agrupando</strong> el <em>contenido</em>.
</p>

<div class="content">
  <p>
    Esto es un párrafo de texto donde estamos
    <strong>agrupando</strong> el <em>contenido</em>.
  </p>
  <p>
    Si añadimos <span>nuevos párrafos</span> deben estar
    correctamente <mark>agrupados</mark>.
  </p>
</div>

Enlaces

  • Contenido de la etiqueta: Texto, imagen o contenido a enlazar.
  • Atributo href: Recurso o dirección URL a donde nos envía el enlace.
  • Atributo target: Donde se abre el enlace.
  • Atributo download: El recurso se descarga en lugar de abrirse.
<a href="https://manz.dev/">Página de Manz.dev</a>
<a href="https://manz.dev/" target="_blank">Página de Manz.dev</a>
<a href="document.pdf" download>Documento PDF</a>
<a href="a837b21.jpg" download="imagen.jpg">Descargar imagen</a>

Multimedia

Multimedia (imágenes)

<img src="imagen.webp"
     alt="Descripción breve de la imagen">

<img src="imagen.webp"
     alt="Descripción breve de la imagen"
     loading="lazy"
     fetchpriority="low"
     decoding="async">
  • El atributo loading sirve para <img>, <iframe>, <video> y <audio>
  • El atributo decoding a async: no bloquea renderizado, fuera hilo principal → imágenes no críticas
 
<img src="imagen.webp"
     alt="Descripción breve de la imagen"
     fetchpriority="high"
     decoding="sync">
  • El atributo decoding a sync: hilo principal, bloquea renderizado → imágenes críticas
 
<picture>
  <source srcset="imagen.avif">
  <source srcset="imagen.webp">
  <img src="imagen.jpg" alt="Descripción breve de la imagen">
</picture>

<figure>
  <picture>
    <source srcset="imagen.avif">
    <source srcset="imagen.webp">
    <img src="imagen.jpg" alt="Descripción breve de la imagen">
  </picture>
  <figcaption>Descripción detallada a pie de imagen.</figcaption>
</figure>

Multimedia (video)

  • Etiqueta <iframe> para Youtube (u otros servicios) → Formatos de video → Más
  • Etiqueta <video> para archivos de video directos ➡
  • Características de <video> ➡
  • Etiqueta <source> y <track> ➡➡
<!-- Observa el enlace -->
<a href="https://youtu.be/3PWfyx-2QtY">Video de youtube</a>

<!-- En iframe usamos una URL modificada -->
<iframe src="https://www.youtube.com/embed/3PWfyx-2QtY"
        width="640" height="360">
</iframe>

<video src="video.mp4"
       width="640" height="360"
       preload="metadata"
       poster="imagen.webp"
       controls loop muted playsinline>
</video>

<video width="640" height="360" controls loop muted playsinline
       preload="metadata" poster="imagen.webp">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <img src="fallback.webp" alt="Descripción de imagen de fallback">
  Fallback de texto.
</video>

<video width="640" height="360" controls loop muted playsinline
       preload="metadata" poster="imagen.webp">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <track src="subs-es.vtt" srclang="es">
  <track src="subs-en.vtt" srclang="en">
  <img src="fallback.webp" alt="Descripción de imagen de fallback">
  Fallback de texto.
</video>

Multimedia (audio)

  • Etiqueta <audio> para insertar música o sonido → Formatos de audio → Más
  • Características similares a la etiqueta <video>
  • Cuidado con el autoplay
<audio controls loop muted preload="metadata">
  <source src="audio.opus">
  <source src="audio.ogg">
  <source src="audio.mp3">
</audio>

Formularios

Formularios HTML

  • Se engloban dentro de <form>
  • HTML sólo la parte visual / interacción
  • Atributo method establece el método GET o POST (¡dialog también, lo veremos más adelante!)
  • Atributo action establece la URL del backend donde se envían los datos
  • Si gestionas por Javascript, no hace falta <form> (¡intenta usar <form> siempre que puedas!)
  • Etiqueta <input> para entrada de datos
<form method="get" action="https://google.com/search" target="_blank">
  <input name="q" value="lenguajehtml">
  <button>Enviar</button>
</form>

Bases de formularios (I)



(No se ve nada) 












<input value="texto">
<input type="text" placeholder="Placeholder">
<input type="hidden">
<input type="password">
<input type="search"> <!-- También tel, url, email -->

<input type="number"> <input type="range">
<input type="color" value="#458855">
<input type="file">
<input type="date"> <!-- También time, week, month -->
<input type="checkbox" checked>
<input type="radio" checked name="group">

<input type="submit">
<input type="image" src="manzdev.png" width="32">
<input type="reset">
<input type="button"> <!-- Equivalente a <button> -->

Ejemplo con <input type="range">

  • Etiqueta <input> y etiqueta <output>
  • Usamos min, max (rango posible) y value para establecer un valor
  • Con onInput usamos Javascript para definir comportamiento
<input type="range"
       value="25"
       min="10" max="50"
  onInput="this.nextElementSibling.value = this.value">
<output>25</output>

   25

¿Qué es la semántica en HTML?

  • Usar la etiqueta más adecuada y mínima posible.
  • Preferir estructura más lógica, clara y entendible.
  • Más accesible y fácil de mantener (No sólo para humanos, también para máquinas)
<!-- ✅ Opción 1: HTML -->
<a href="/indice.html">Acceder al índice</a>

<!-- ❌ Opción 2: Javascript -->
<button>Acceder al índice</button>
<script> button.onclick = () => (location.href = "/indice.html") </script> <!-- Simplificación -->

<!-- ❌ Opción 3: HTML + Javascript -->
<button onClick="location.href='/indice.html'">Acceder al índice</button>

Bases de formularios (II)

Campos radio:

Desplegable cerrado (¡y mejorados!):


Desplegable abierto:

Entrada amplia abierta:

 
<input type="radio" name="a">

<select>
  <option value="1">HTML</option>
  <option value="2">CSS</option>
  <option value="3">Javascript</option>
</select>

<datalist id="data">
  <option value="HTML">Lenguaje HTML</option>
  <option value="CSS">Estilos CSS</option>
  <option value="JS">Programación Javascript</option>
</datalist>
<input list="data">

<textarea cols="30" style="field-sizing: content"></textarea>

Bases de formularios (III)

Medidores:


Indicadores de progreso:


Formularios con <label>:

Texto sin label: 

<meter max="100"
       optimum="100" high="75"
       value="25"></meter>
<meter max="100"
       optimum="100" high="75"
       value="90"></meter>

<progress max="100" value="50"></progress>
<progress></progress>

<div>
  Texto sin label:
  <input type="checkbox">
</div>
<label>
  Texto usando label:
  <input type="checkbox">
</label>

Semántica

Etiquetas semánticas en HTML

<div>
  <h2>Título</h2>
  Esta es una descripción para la card.
  Aquí puedes agregar datos relevantes.
</div>








<div class="card">
  <h2>Título</h2>
  <p>
    Esta es una descripción para la card.
    Aquí puedes agregar datos relevantes.
  </p>
  <button>Más</button>
</div>





<div class="card-content">
  <h2 class="card-title">Título</h2>
  <p class="card-description">
    Esta es una descripción para la card.
    Aquí puedes agregar datos relevantes.
  </p>
  <button class="card-button">Más</button>
</div>





<article class="card-content">
  <header>
    <h2 class="card-title">Título</h2>
  </header>
  <p class="card-description">
    Esta es una descripción para la card.
    Aquí puedes agregar datos relevantes.
  </p>
  <footer>
    <button class="card-button">Más</button>
  </footer>
</article>
    1. Básico, etiquetas HTML simples ➡
    1. Añadir etiquetas clave y clases importantes ➡
    1. Identifica zonas usando namespaces ➡
    1. Añade etiquetas semánticas donde tenga sentido ➡

  • Mitos: No usar más de un <h1> por página
  • Mitos: No usar más de un <header> o <footer>
  • Etiquetas dentro de otras: CanIInclude
  • Información de compatibilidad: Baseline

Atributos interesantes

<section>
  <!-- ... -->
</section>
<section hidden>
  <!-- Sección oculta -->
</section>
<section inert>
  <!-- Sección inerte -->
</section>
<section hidden="until-found">
  <!-- Sección oculta hasta... -->
</section>
  • El atributo hidden (invisible, no relevante)
  • El atributo inert (visible pero no interactuable)
  • El atributo hidden="until-found" (invisible hasta interacción)

El until-found nos permite ocultar la sección hasta que el usuario quiera interactuar con ella (haciendo click en un enlace o buscando algún contenido...)

Custom Elements

  • En el futuro, vamos a crear nuestras propias etiquetas HTML
  • Deben tener al menos un guión en su nombre.
<!-- Ejemplo básico -->
<mi-etiqueta>Información</mi-etiqueta>

<!-- Ejemplo de API HTML de un slider -->
<image-slider value="50%">
  <img src="image-1" alt="Imagen de antes">
  <img src="image-2" alt="Imagen de después">
</image-slider>
  • Con HTML incluimos HTML más complejo en ellas. Simplificamos su uso.
  • Con CSS le damos estilo, sólo al componente.
  • Con Javascript le damos funcionalidad.

Markdown

  • Lenguaje simple que se puede exportar a HTML, PDF, etc...
  • ¡Estas slides están hechas con Markdown! → pandoc -f markdown file.md -t html
# Titular de nivel 1
## Titular de nivel 2
Texto **importante** y *cursiva*.
[Texto del enlace](https://manz.dev/)
![Texto alternativo](imagen.jpg)
> Texto citado.
---

<h1>Titular de nivel 1</h1>
<h2>Titular de nivel 2</h2>
<p>Texto <strong>importante</strong> y <em>cursiva</em>.
<a href="https://manz.dev/">Texto del enlace</a>
<img src="imagen.jpg" alt="Texto alternativo">
<blockquote><p>Texto citado</p></blockquote>
<hr>

HTML-first + Mejora progresiva

  • Se basa en asegurar lo mínimo en HTML (y ampliarlo/mejorarlo con Javascript)
  • Ejemplo: Formulario HTML envía a backend + Se mejora con Javascript
<form action="/search" method="get">
  <!-- ... --->
  <input type="search" name="q">
  <button>Buscar</button>
</form>

<div id="results">
  <!-- Aquí resultados -->
</div>

<style>
  /* Código CSS para hacerlo bonito */
</style>

<script>
  /* Código Javascript que MEJORA el HTML */
</script>

Acordeones con <details>

  • También llamados expansores, divisores, colapsables, desplegables... → Acordeones
<details>
  <summary>Día 1: HTML</summary>
  <ul>
    <li>Bases de HTML</li>
    <li>Multimedia en HTML</li>
    <li>Formularios en HTML</li>
    <li>Semántica y HTML progresivo</li>
  </ul>
</details>
  • La etiqueta <details> y el atributo open
  • La etiqueta <summary>
  • El atributo name (acordeón exclusivo)
  • El pseudoelemento CSS ::details-content
  • Personalizar flecha summary::marker

Ventanas de diálogo con <dialog>

  • Ventanas para mostrar información avanzada → Diálogos
<dialog open>
  <h3>Título del diálogo</h3>
  <img src="https://manz.dev/manzdev.png"
       alt="Logo de ManzDev">
  <p>Mensaje de descripción del diálogo...</p>
  <footer>
    <button>Ok</button>
    <button>Cancelar</button>
  </footer>
</dialog>
  • Etiqueta <dialog> y el atributo open
  • Cerrar diálogo con <form method="dialog">...</form>
  • Cerrar con ESC o fuera con <dialog closedby="any">
  • Diálogos vs Diálogos modales
  • Abrir/cerrar modales con command="show-modal" → Invokers
  • El pseudoelemento CSS ::backdrop en modales
  • Animar ventanas modales sin Javascript → Animación

Popovers emergentes

<div id="message" popover>
  <p>
    <strong>¡Alerta!</strong>:
    Esto es un <strong>mensaje emergente</strong>
  </p>
</div>

<button popovertarget="message"
        popovertargetaction="toggle">
  Mostrar
</button>

[popover] {
  background: #222;
  border: 0;
  border-bottom: 5px solid steelblue;
  color: white;
  font-family: Jost;
  font-size: 1.2rem;
  padding: 0.05rem 1.25rem;
}
  • El atributo popover
  • El atributo popovertarget para definir el popover
  • El atributo popovertargetaction define la acción
  • Acciones disponibles: toggle, hide o show
  • El pseudoelemento CSS ::backdrop
  • Light Dismiss (descartar auto) se desactiva con el atributo popover a "manual"

Etiquetas como <search> o <hgroup>

<!-- Búsqueda o filtrado -->
<search>
  <!-- ... -->
</search>

<!-- Encabezado agrupado -->
<hgroup>
  <h1>Títular o título</h1>
  <p>Texto de acompañamiento.</p>
</hgroup>
  • La etiqueta <search> se usa como wrapper
  • La etiqueta <hgroup> se usa para agrupar información de encabezado
  • Casos como encabezados <h1> con subtítulo <h2> no representan lo mismo

Tabla periódica

Tabla periódica de los elementos HTML

¿Practicar?

Preguntas