enActualidad.com

Tipografía y bloques disponibles en un post

Espécimen de demostración: todas las etiquetas HTML y todos los bloques que un usuario puede usar dentro de un artículo, rotulados por tipo. Este texto no es un artículo real.

vicmx

Por vicmx

14 OCT 2026 · 12 min de lectura · 3.1K lecturas

Tipografía y bloques disponibles en un post
Imagen de demostración (Unsplash) · clic para ampliar.

Esta página no es un artículo: es el espécimen de contenido del tema. Aquí se ejemplifica, rotulado por tipo, todo lo que un usuario puede escribir dentro de un post — cada etiqueta HTML de texto, cada lista, cada medio y cada bloque editorial. El primer párrafo, como en cualquier artículo, lleva capitular de forma automática; sirve para comprobar también ese matiz.

Encabezados · h2 · h3 · h4 · h5 · h6

El h1 está reservado al título del artículo: dentro del cuerpo solo se usan de h2 hacia abajo.

H2 · Título de sección

H3 · Título de subsección

H4 · Apartado dentro de la subsección

H5 · Encabezado menor, para bloques
H6 · Rótulo mínimo en versalitas
Texto en línea · strong · em · b · i · u · mark · small · abbr · sub · sup · del · ins · s

Matices de énfasis: strong pesa porque importa, em inclina porque enfatiza, b solo engorda la letra y i solo la inclina. Se pueden anidar capas: importante y enfático a la vez. Para subrayar sin semántica está u y para resaltar como con rotulador, mark.

Escalas y precisiones: small para letra pequeña y avisos legales, HTML para siglas con su desarrollo al pasar el cursor, H2O para fórmulas y E=mc2 para exponentes.

Para exhibir cambios: versión anterior versión corregida. Y para tachar sin más ceremonia: s. También existen la cita en línea, la marca de y, por supuesto, el enlace interno de demostración.

Código · code · kbd · samp · pre

En línea: photonics-on-silicon para rutas, identificadores o fragmentos cortos; Ctrl + S para teclas del teclado; y error 404 para salidas del sistema. Para fragmentos de varias líneas se usa el bloque pre:

const cache = new Map();
function coste(operacion) {
  return cache.get(operacion) || calcular(operacion);
}
Listas · ul · ol · dl (con anidación)

Lista sin orden, con un nivel anidado:

  • Primer punto de primer nivel.
  • Segundo punto, este con sublista:
    • Punto anidado.
    • Otro punto anidado.
  • Tercer punto de primer nivel.

Lista ordenada, con arranque personalizado:

  1. El paso que empieza en tres.
  2. El paso cuatro.
  3. El paso cinco.

Lista descriptiva, término y definición:

Plano detalle
Encima del sujeto, para mostrar materia y textura.
Plano general
Todo el escenario, con aire alrededor del sujeto.
Citas · blockquote · cite · q

La cita con glifo y atribución es el bloque estrella del artículo:

«Un buen rótulo no explica el bloque: lo presenta y se aparta.»

Manual de estilo (ficción de demostración)

Y la cita simple, sin glifo, resuelta con borde lateral y fondo suave:

«El texto de una cita también puede ser sobrio: solo borde, fondo suave y buenas medidas.»

En línea quedan las comillas del navegador, con su atribución cuando haga falta.

Separadores · hr

Antes del separador.


Después del separador. Un hr basta para cambiar de tercio.

Imágenes · figure · figcaption · lightbox · galería
Ordenador portátil con código en la pantalla
Imagen con pie y ampliación al clic (lightbox). El pie explica el contenido, no lo repite. (Imagen de demostración, Unsplash.)

Una galería agrupa varias piezas en rejilla; cada una se amplía con un clic:

Vídeo · embed

El bloque de vídeo inserta un reproductor externo y conserva la proporción 16:9 en cualquier pantalla:

Tablas · caption · thead · tbody · tfoot · th · td
Consumo por operación (datos ficticios de demostración)
Escenario Consumo Variación
Silicio convencional 100 u. a. —
Prototipo óptico 60 u. a. −40 %
Fuente: dataset de demostración, sin valor real.
Bloques editoriales · nota · dato · lo esencial

Nota del editor

El bloque de nota advierte, matiza o amplía sin romper el hilo del artículo. Es el aviso por defecto.

Dato

Fondo neutro para información secundaria: contexto, metodología o una cifra suelta que no debe competir con el texto.

Lo esencial

Versión oscura para el resumen que no debería perderse: tres o cuatro líneas como máximo.

Datos · stat grid · ficha técnica
40%menos consumo
10años de hoja de ruta
3frentes abiertos
Proyecto
Fotónica sobre silicio (demo)
Equipo
Laboratorio ficticio de demostración
Publicación
10 de enero de 2026
Estado
Prototipo de laboratorio
Desplegable · details · summary
¿Qué es un bloque desplegable?

Un details oculta información secundaria hasta que el lector la pide: esquemas, transcripciones, preguntas frecuentes.

  • Es HTML nativo: no necesita JavaScript.
  • Funciona con teclado y lectores de pantalla.
Acciones · botones · chips · enlaces destacados

Los bloques de acción dentro del cuerpo se reservan para llamadas concretas:

Fin de la guía: todo lo anterior queda listo para el port a WordPress (FASE 4).

Comparte este artículo

vicmx

Escrito por

vicmx

Periodista de demostración: este perfil y sus textos son ficción, creados para validar el diseño. (Perfil ficticio.)

Te puede interesar

Comentarios 2

JV

Julián Vega

Muy buena explicación. Me quedó la duda de cómo se aplicaría esto en el día a día. (Comentario ficticio.)

AR

Ana Ríos

Ojalá haya segunda parte. Este tipo de notas se agradecen. (Comentario ficticio.)

Deja un comentario

Demostración: el envío es simulado, no se guarda nada.