Documento de Demostración de Etiquetas HTML

Este documento muestra el uso práctico de las principales etiquetas HTML organizadas por categorías

1. Formato de Texto Básico

Estilos de texto y énfasis

Este es un párrafo normal que contiene varios tipos de formato de texto.

Podemos escribir texto en negrita y también en negrita con énfasis semántico.

El texto puede aparecer en cursiva o con énfasis cursiva.

Aquí vemos texto resaltado y también texto más pequeño.

Para código usamos console.log("Hola Mundo") dentro del texto.

Las teclas se muestran así: presiona Ctrl + C para copiar.

Variables matemáticas: x = y + 5

Texto con subíndice y superíndice como H2O o E=mc2

Texto tachado porque está obsoleto y texto insertado como actualización.

También existe texto que ya no es correcto y texto subrayado.

Este es un bloque de cita que representa texto citado de otra fuente.

— Autor de la cita

Título de una obra: Don Quijote de la Mancha

Texto preformateado:

    Este texto
        mantiene los espacios
            y saltos de línea
                exactamente como están escritos
                

Salida de programa: Error 404: Página no encontrada

Una abreviatura: HTML

Una definición: HTML es el lenguaje de marcado estándar para crear páginas web.

Una cita corta: Ser o no ser es una frase famosa.

Fecha y hora: El evento es el .

Datos con valor de máquina: Producto Premium


Haz clic para ver más detalles

Este contenido estaba oculto y ahora es visible. La etiqueta details permite crear secciones expandibles.

2. Tablas

Ejemplo de tabla con todos los elementos

Ventas Trimestrales por Región
Región Q1 Q2 Q3
Norte €15,000 €18,500 €22,300
Sur €12,400 €14,200 €16,800
Este €19,200 €21,100 €23,500
Total €46,600 €53,800 €62,600

3. Formularios

Formulario de registro completo

Información Personal








7 de 10

Preferencias




Pendiente de cálculo

4. Estructura y Secciones de la Página

Artículo principal

Esta es una sección article que representa contenido independiente y autónomo.

Subsección dentro del artículo

Las secciones permiten agrupar contenido temático dentro de un documento.

Título agrupado

Subtítulo o contenido relacionado al encabezado

Este es un div, un contenedor genérico para agrupar contenido.

Y este es un span, un contenedor en línea.

Sección de búsqueda

HTML
Lenguaje de marcado para estructurar páginas web
CSS
Lenguaje de estilos para diseñar páginas web
JavaScript
Lenguaje de programación para añadir interactividad
  • Opción de menú 1
  • Opción de menú 2
  • Opción de menú 3
    1. Primer elemento de lista ordenada
    2. Segundo elemento de lista ordenada
    3. Tercer elemento de lista ordenada

    5. Multimedia

    Imágenes y figuras

    Descripción de la imagen de ejemplo
    Figura 1: Este es el pie de foto explicando la imagen
    Imagen responsive

    Audio

    Video

    Contenido incrustado



    Gráficos SVG

    SVG