Un sitio web completo en un único archivo HTML

No puedo dejar de pensar en este sitio . Parece una tarifa bastante estándar; un sitio web con enlaces a diferentes páginas. No hay nada que destacar excepto que… todo el sitio web está contenido en un único archivo HTML .

¿Qué tal si hacemos clic en los enlaces de navegación? Cada enlace simplemente muestra y oculta ciertas partes del HTML.

section  !-- home content goes here --/sectionsection  !-- about page goes here --/section

Cada uno sectionestá oculto con CSS:

section { display: none; }

Cada enlace en la navegación principal apunta a un ancla en la página:

a href="#home"Home/aa href="#about"About/a

Y una vez que hace clic en un enlace, el enlace sectionde ese enlace en particular se muestra a través de:

section:target { display: block; }

¿Ves ese pseudo selector? ¡Esa es la magia! Claro, existe desde hace años, pero sin duda esta es una forma inteligente de usarlo. La mayoría de las veces, se utiliza para resaltar el ancla en la página una vez que se ha hecho clic en un enlace de ancla. Esta es una forma práctica de ayudar al usuario a saber a dónde acaba de saltar.:target

De todos modos, ¡usar :targetasí es algo súper inteligente! Termina pareciéndose a un sitio web normal cuando haces clic en: