¿Cómo diseñaría una estructura HTML utilizando matrices?

Seré sincero, parece que estás intentando hacer algo que se hace bastante:

¿Cuál es la forma más eficiente de convertir los datos en pantalla ? Aquí es donde cosas como Pug (anteriormente Jade), Haml, Markdown y Slim apuntan a simplificar el proceso de la estructura HTML, a veces bastante detallada y molesta.

Seré honesto, creo que una de las mejores cosas que hace la conversión D2D es probablemente el complemento del editor de texto Emmet. Toma cadenas CSS y puede expandirlas en una estructura HTML bastante compleja.

• Cómo ordenar una lista desordenada en HTML
• ¿Qué empresas en Londres tienen la mejor cultura de JavaScript / Node.js?
• ¿Por qué React se parece a PHP?
• Cómo crear una lista basada en las entradas de un usuario en Python 3.x
• Después de aprender HTML, CSS y JavaScript, ¿puedo aprender Angular o React? Si es así, ¿cuál y por qué?

Ejemplo: html>head>title{Page Title}^+body>.container-fluid

y con solo tocar un botón de pestaña se convierte en:

Lo cual es bastante sorprendente.

¿Ahora puede almacenar esas cadenas en una base de datos? Sí, con relativa facilidad. ¡Deje que Emmet se haga cargo de allí, boom, página HTML!

Pero hay algunos inconvenientes: dado que se basa en CSS, no hay mucha sintaxis agradable para agregar otras propiedades (por ejemplo, atributos data- *). Sí, hay una manera de hacerlo, pero es como romper el flujo.

Hace un tiempo, cuando estaba aprendiendo PHP, decidí que estaba tan loco por tener que lidiar con HTML. Así que efectivamente hice un analizador de plantillas que usaba matrices para construir HTML mientras solo tenía que alimentar los datos.

Lección aprendida aquí: eso fue un verdadero dolor en el culo.

mi estructura de matriz terminó luciendo así (tenga en cuenta que esto es como hace 10 años en la memoria, por lo que puede no ser exacto)

$ content = array (
‘tag’ => ‘div’,
‘id’ => ‘prueba’,
‘hola’, $ nombre, ‘, este será contenido que es directamente un hijo del #testing div’,
formación(
‘tag’ => ‘p’,
‘class’ => ‘primer-párrafo’,
‘en un mundo donde las voces en off dramáticas ya no son geniales …’
)
);

Luego, en el backend, tuve que verificar ciertos casos: las etiquetas necesitan un atributo href, y si no estaba proporcionando una, ¿qué alternativa debería usar (spoiler: elegí el símbolo hash), las imágenes necesitan un atributo fuente, pero … ¿cuál debería ser ese valor predeterminado? Oh no.