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.
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.
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
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.
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);
}
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:
- El paso que empieza en tres.
- El paso cuatro.
- 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.
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.
Antes del separador.
Después del separador. Un hr basta para cambiar de tercio.
Una galería agrupa varias piezas en rejilla; cada una se amplía con un clic:
El bloque de vídeo inserta un reproductor externo y conserva la proporción 16:9 en cualquier pantalla:
| Escenario | Consumo | Variación |
|---|---|---|
| Silicio convencional | 100 u. a. | — |
| Prototipo óptico | 60 u. a. | −40 % |
| Fuente: dataset de demostración, sin valor real. | ||
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.
- Proyecto
- Fotónica sobre silicio (demo)
- Equipo
- Laboratorio ficticio de demostración
- Publicación
- 10 de enero de 2026
- Estado
- Prototipo de laboratorio
¿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.
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).
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
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.)
Ana Ríos
Ojalá haya segunda parte. Este tipo de notas se agradecen. (Comentario ficticio.)