¿Como añadir más contenido estético y estructuralmente sin tener que hacer scroll indefinidamente?
HTM5 y CSS3 nos brinda la oportunidad de añadir contenido a nuestras páginas, a través de las tabs. Esto es importante sobre todo para un SEO, dado que el contenido debe de estar por encima de un 25% para estar optimizado.
¿Como funcionan las tabs para añadir contenido?
Las tabs se utilizan con labels. Éste llama a un input y cuando este input está chequeado, podemos llamar al contenido con una función que implementaremos en CSS y que se le puede dar todo tipo de transiciones y animaciones. Con este tipo de diseños, se pueden hacer mil cosas. Las tabs también se pueden implantar en javascript, pero suele ralentizar la página. Así que siempre que puedas, utiliza CSS a JS. En SEOWEB Almería tenéis claros ejemplos de ello, sobre todo con las pestañas del menu. Las tabs cambian el contenido cada vez que se pulsa un elemento en el nav. Pero también tenéis más efectos, todos diseñados en Pure CSS, es decir sin script.
Código para tabs
Código para añadir las tabs
<ul> <li> <label class="tabs" for="tab-1" id="label-1">Categoría 1</label> </li> <li> <label class="tabs" for="tab-2" id="label-2">Categoría 2</label> </li> </ul>
Código para añadir el contenido:
<section> <input type="radio" name="tabs" id="tab-2"> <div id="tab-content-2" class="tab-content"> <p>Tab 2</p> </div> </section>
CSS
input[name=tabs], input[name=nav-slide], .tab-content{display: none;}
[id^=tab-]:checked ~ div[id^=tab-content-]{display: block;}
¿Cuales son los recursos de las tabs?
No es un metodo fácil de aplicar, pero cuando tengas pillado el tranquillo de las tabs, podrás hacer cosas increibles. Con las tabs y animaciones en CSS3, encontrarás infinidad de posibilidades para tú web: tool-tips, slider, pop-ups, desplegables, pestañas, slide box … Son todos estos recursos los que podrán hacer que tu web, tenga más contenido y además sea más interactiva con los usuarios.
Dentro de poco nuestros artículos no solo contendrán la teoría sino que podrán descargar ejemplos de los efectos que desde SEOWEB Almería diseñamos ¡Estar atentos!