+ +
+

Texto, semántica y elementos en línea

+ +
+
+

Encabezado del artículo

+

+ + + +

+
+ +

+ Párrafo con + énfasis + , + negrita fuerte + , + cursiva + , + negrita + , + subrayado + , + tachado + , + texto pequeño + , + resaltado + , + HTML + , + definición + , + cita en línea + , y una + citación + . +

+ +

+ Subíndices H + 2 + O, superíndices x + 2 + , y un span en línea: + texto en inglés + . Aquí hay + texto aislado + y + texto invertido + . +

+ +

+ Cosas relacionadas con código: + const x = 1; + , teclado: + Ctrl + + + C + , salida de muestra: + OK + , y variable + n + . +

+ +
// Bloque de código preformateado
+function hello(name){
+  return `Hello, ${name}`;
+}
+ +
+

+ Cita en bloque con + una cita corta + anidada y atribución. +

+
+ — + Alguien +
+
+ +
+ +

+ Enlaces con atributos: + + enlace externo + + , + enlace de descarga + , + + mailto + + , + tel + . +

+ +
    +
  • Elemento de lista no ordenada
  • +
  • + Otro elemento con + ancla +
  • +
+ +
    +
  1. Elemento ordenado con valor personalizado
  2. +
  3. Siguiente elemento ordenado
  4. +
+ + +
  • +
  • +
    + +
    +
    Término A
    +
    Definición del término A.
    +
    Término B
    +
    Definición del término B.
    +
    + +
    + Imagen de marcador de posición +
    Figura + pie de figura.
    +
    + +
    + Detalles expandibles con resumen +

    + Contenido de detalles. Admite + más enlaces + . +

    +
    + +

    + Ejemplo de anotación Ruby: + + Texto + anotación + +

    + +
    +

    + Pie de artículo con + palabras clave, etiquetas, etc. +

    +
    +
    +
    + + +
    +

    Elementos de diseño y estructura

    + +
    +
    +

    Sección dentro de la cuadrícula

    +

    + Usando + section + para agrupación temática. +

    +
    + +
    +

    Artículo dentro de la cuadrícula

    +

    + Usando + article + para contenido independiente. +

    +
    + +
    +

    Div genérico + región ARIA

    +

    A veces un div está bien con los roles apropiados.

    +
    +
    + +

    + Contenedor en línea: + span + • contenedor de bloque: + +

    + + +
    + + +
    +

    Elementos multimedia

    + +

    Audio

    + + +

    Vídeo

    + + +

    Picture / imágenes adaptables

    + + + Alternativa adaptable + + +

    Iframe / Embed / Object

    + + + + + + Texto alternativo para objeto. + + +

    Canvas

    + + Texto alternativo de canvas. + + +
    + + +
    +

    SVG en línea

    +
    + + Guía de inicio + Mensaje de bienvenida + + + + + + + + + + + + ¡Bienvenido! + + + ¿Listo para explorar la plataforma? + + + + + Paso 1 de 3: crea tu perfil + + + + + 33% completado + + +
    + + +
    + + +
    +

    MathML (si es compatible)

    + + + + a + 2 + + + + + b + 2 + + = + + c + 2 + + + +
    + + +
    +

    Formularios (muchos campos de entrada)

    + +
    +
    + Básicos + + + + + + + + + + + + + + + + + + + Texto de ayuda de búsqueda. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + Grupo de botones de opción +
    + + +
    + + + + + 5 + + + + +
    + +
    + Widgets avanzados + + + + 65% + + + + 45% + + + + + + + + + + + + + +
    +
    +
    + + +
    +

    Tablas

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    Tabla compleja con colgroup, thead, tbody, tfoot
    NombreRolEstadoNotas
    AdaIngenieraActiva
    LinusMantenedorAusente + Nota antigua + Nota nueva +
    Fila de pie de página
    +
    + + +
    +

    + Elementos interactivos, incrustados y varios +

    + +

    Diálogo

    + + +

    Diálogo de demostración

    +

    + Elemento de diálogo nativo con + showModal() + . +

    +
    + +
    +
    + +

    Popover

    + +
    + Soy un popover. + +
    + +

    Divulgación / Resumen

    +
    + Abrir detalles +

    + Texto de detalles. Incluye + Esc + para cerrar el diálogo, etc. +

    +
    + +

    Oportunidades de salto de palabra

    +

    + + Oportunidades + + de + + salto + + de + + palabra. +

    + +

    Slots (preparado para Web Components)

    +
    + Contenido de slot alternativo +
    + +

    Lista de autocompletado (ul[role=listbox])

    +
      +
    • Sugerencia 1
    • +
    • Sugerencia 2
    • +
    + +

    Objetivo de navegación por teclado

    +
    + Botón div enfocable +
    + +

    Dirección / Contacto

    +
    + Calle Demo 123 +
    + Ciudad Ejemplo, EX 00000 +
    + contact@example.com +
    + +

    Anotación / Ediciones

    +

    + Esto está + eliminado + y + insertado + . +

    + +

    Ejemplo de aislamiento de texto

    +

    + Mezcla de texto: + segmento aislado + + inglés normal. +

    + +

    Noscript

    + +
    +