Curso gratuito de HTML

HTML Demos

// 09 de 09

09 · Texto & Markup Inline

Elementos que mucha gente desconoce: mark, abbr, kbd, del/ins, sup/sub, dfn, dl, progress, meter. Todos con semántica propia.

<mark><abbr><kbd> <del><ins><dfn> <dl><progress><meter>

Demo en vivo

<mark> Buscar resultados: el término HTML semántico apareció 42 veces.
<abbr> HTML y CSS son la base de la web. (pasa el ratón)
<kbd> Abre DevTools con Ctrl + Shift + I
<del> <ins> Precio: 99€ 49€ — oferta por tiempo limitado
<sup> <sub> H2O · E = mc2 · 103 = 1000
<dfn> Un DOM es la representación del documento como árbol de objetos en memoria.
<dl>
HTML
Estructura y contenido
CSS
Presentación y estilo
JS
Comportamiento e interactividad
<progress>
<meter>
<s> vs <del> Precio antiguo 200€ (s: ya no es relevante) · precio borrado (del: edición explícita)

mark vs strong — mark es relevancia en un contexto (resultado de búsqueda). strong es importancia semántica.

progress vs meter — progress es una tarea con avance (0-100%). meter es una medida en un rango (batería, temperatura). El navegador puede cambiar de color según low/high/optimum.

del datetime — puedes añadir cuándo se eliminó: <del datetime="2024-01-15">

Código importante

<!-- mark: resaltado semántico -->
<p>Resultado: <mark>HTML</mark> encontrado.</p>

<!-- abbr: tooltip nativo con title -->
<abbr title="HyperText Markup Language">
  HTML
</abbr>

<!-- kbd: teclas del teclado -->
<kbd>Ctrl</kbd> + <kbd>S</kbd>

<!-- del + ins con datetime -->
<del datetime="2024-01-01">viejo</del>
<ins>nuevo</ins>

<!-- dfn: primera definición de un término -->
<dfn title="Document Object Model">
  DOM
</dfn>

<!-- dl: lista de definiciones clave-valor -->
<dl>
  <dt>HTML</dt>
  <dd>Estructura del documento</dd>
  <dt>CSS</dt>
  <dd>Presentación visual</dd>
</dl>

<!-- progress: tarea con progreso (0 a max) -->
<progress value="65" max="100">
  65%
</progress>

<!-- meter: medida en un rango conocido -->
<!-- low/high/optimum: el browser cambia color -->
<meter value="0.7"
        min="0" max="1"
        low="0.2"
        high="0.5"
        optimum="1">
  70%
</meter>