Guía Completa de Elementos HTML

Uso semántico correcto de todas las etiquetas

Introducción

Este documento demuestra el uso correcto de elementos HTML en su contexto semántico apropiado. exploraremos cada etiqueta.

¿Qué es HTML Semántico?

Escrito por: Claude Assistant

HTML semántico significa usar elementos por su significado, no por su apariencia. Es fundamental para la accesibilidad y SEO.

Los elementos en HTML tienen significado semántico, es decir, el elemento describe el tipo de contenido que contiene.

Especificación HTML5.2 del W3C

Elementos de Contenido

Texto y Formato Semántico

HTML incluye muchos elementos para marcar diferentes tipos de contenido:

  • <abbr> para abbr.
  • Ctrl+C usa <kbd> para entrada de teclado
  • Error 404 usa <samp> para salida de programa
  • x usa <var> para variables
  1. Primer elemento
  2. Segundo elemento
  3. Tercer elemento
HTML
HyperText Markup Language
CSS
Cascading Style Sheets
JS
JavaScript

Elementos de formato semántico incluyen: texto marcado con <mark>, texto pequeño con <small>, subíndice y superíndice.

Para mostrar cambios en el documento: texto eliminado texto insertado

Texto en comillas cortas usa <q>.


Este texto mantiene
    su formato original
        con espacios y saltos de línea.
                

Elementos de Formulario

Información Personal

Preferencias

Género


7 de 10
75% Resultado aparecerá aquí

Elementos Multimedia

Imagen de ejemplo
Figura 1: Imagen de ejemplo para demostrar el uso de elementos multimedia

Imagen adaptable

Área 1 Área 2
Información técnica sobre multimedia

Los elementos multimedia en HTML5 soportan múltiples formatos para garantizar compatibilidad entre navegadores. Es importante incluir formatos alternativos y texto alternativo para accesibilidad.

Elementos de Tabla

Ejemplo de tabla semánticamente correcta
Nombre Edad Ciudad
Juan 25 Madrid
María 30 Barcelona
Total 2 personas

Anotaciones Ruby

Para textos en idiomas asiáticos, HTML incluye soporte para anotaciones ruby: 漢字 かんじ ()

Otros Elementos Semánticos

HTML incluye elementos para marcar direcciones bidireccionales: مرحبا aísla texto que puede tener diferente dirección. Este texto va de derecha a izquierda

El elemento sugiere oportunidadesdesaltodelíneaenpalabrasmuylargas.


Producto ABC tiene un valor de datos específico.