Armado básico de un sitio en Html5

9 Jul

Aprender a desarrollar en html es una tarea fácil, sin embargo hay algo que no es tan fácil y que a muchos nos lleva a cometer muchos errores: utilizar correctamente los elementos de html. Cada etiqueta en html tiene un propósito, por ejemplo un h1 se utiliza para definir el título principal de una página. Esto que en teoría parece sencillo en la práctica se torna una tarea compleja que muchas veces nos lleva a utilizar las etiquetas de forma errónea.

Por ejemplo, supongamos que tuviésemos que mostrar una lista con items:

  • Item 1
  • Item 2
  • Item 3

Esto podríamos hacerlo de la siguiente manera:

<p> Item 1 </p>
<p> Item 2 </p>
<p> Item 3 </p>

Aunque esto nos devolverá visualmente una lista estamos cometiendo un error, y es que la etiqueta p se ha creado para párrafos y nosotros no estamos escribiendo tres párrafos, sino tres ítem de una lista, por tanto para ello debemos usar la etiqueta correspondiente, la etiqueta ul para definir que será una lista, y cada ítem con una etiqueta li:

<ul>
   <li> Item 1 </li>
   <li> Item 2 </li>
   <li> Item 3 </li>
</ul>

 

Un poco de historia: Tablas y Divs

El armado de un sitio web es algo que mantiene una lógica, pero que muchas veces no se respeta. En los primeros años los sitios web eran básicamente aplicaciones estáticas, con esto me refiero a que el contenido de una página no se alimentaba de una base de datos, sino que el cliente pedía algo, el desarrollador abría el archivo .html, editaba, lo guardaba y lo subía de nuevo al servidor. Además en los primeros años con la ausencia de css, todo lo relacionado con diseño, ya sea colores, tipos de letras, tamaños, etc; debía definirse desde el mismo html.

Tablas, la etiqueta table, aunque haya tenido un doble uso alguna vez, éstas tiene un propósito: crear tablas. ¿A qué me refiero con esto? Muy simple, a tablas, por ejemplo un fixture de un campeonato de fútbol para mostrar los puntos, goles, partidos ganados, empatados, perdidos, etc. También un banco podría mostrar un resumen de cuenta de un cliente mediante una tabla. Pero a mediados de los 90, y principios del 2000 las tablas tenían un uso que iba más allá. Con la ausencia de hojas de estilos, los desarrolladores debían mantener una estructura, y la etiqueta más cercana a lograr eso era la etiqueta table. Los sitios se armaban con tablas, una para definir el esqueleto de la web, tablas para definir barras laterales, tablas dentro de tablas, una ensalada de tablas, lo que terminaba haciendo el código muy poco legible.

Con la llegada de css, la cosa empezó a cambiar, comenzó el desprecio por la etiqueta table. Su lugar fue reemplazado por otra: div. Esta última también tiene un propósito: definir una área en nuestro sitio. Además con la hoja de estilos esta etiqueta adquiere mucho protagonismo, ahora todo el diseño se define desde el css y no desde el html. Si pusiéramos un edificio en comparación con un sitio web, podríamos decir que html son las vigas, las paredes, el piso, el techo, las ventanas, las puertas, etc. Mientras que css es la pintura, el color de las ventanas, el tipo de madera que usa el piso, etc.

Sitio web básico

Lo azul sería la cabecera de nuestro sitio, donde está el título, también podría tener un subtitulo y el logo de la empresa.

Lo naranja sería la barra de navegación, donde están los enlaces que permiten navegar a las páginas principales de nuestro sitio.

El contenedor de color verde sería la parte central de nuestra página, osea lo importante de la página. Por ejemplo al entrar al index de este blog la lista de posteos que voy realizando, y en el caso de este posteo el posteo en forma individual.

La barra amarilla de la derecha nos muestra información secundaria de nuestro sitio, osea no es lo más importante, es una información adicional.

Y finalmente de rojo nuestro pie de página. Donde se encuentra información visible para el visitante sobre la autoría del sitio.

El código resumido (dentro del body) sería algo como esto:

<div id="contenedor">
   <div id="header">
      <h1> Título de nuestra página </h1> 
   </div>
   <div id="nav">
      <ul>
         <li> Boton 1 </li>
         <li> Boton 2 </li>
         <li> Boton 3 </li>
         <li> Boton 4 </li>
         <li> Boton 5 </li>
      </ul> 
   </div>
   <div class="section">
      <div class="article">
         <h2> Artículo 1 </h2>
         <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos... <a href=""> Leer más </a> </p>
      </div>
      <div class="article">
         <h2> Artículo 2 </h2>
         <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos... <a href=""> Leer más </a> </p>
      </div>
      <div class="article">
         <h2> Artículo 3 </h2>
         <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos... <a href=""> Leer más </a> </p>
      </div>
      <div class="article">
         <h2> Artículo 4 </h2>
         <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos... <a href=""> Leer más </a> </p>
      </div>
   </div>
   <div class="aside">
      <div class="article">
         <h2> Últimas noticias </h2>
         <ul>
            <li> Artículo 1 </li>
            <li> Artículo 2 </li>
            <li> Artículo 3 </li>
            <li> Artículo 4 </li>
            <li> Artículo 5 </li>
            <li> Artículo 6 </li>
         </ul>
      </div>
      <div class="article">
         <h2> Categorías </h2>
         <ul>
            <li> Categoría 1 </li>
            <li> Categoría 2 </li>
            <li> Categoría 3 </li>
            <li> Categoría 4 </li>
            <li> Categoría 5 </li>
            <li> Categoría 6 </li>
            <li> Categoría 7 </li>
            <li> Categoría 8 </li>
            <li> Categoría 9 </li>
         </ul>
      </div>
   </div>
   <div id="footer">
      <p> Desarrollado por autor </p>
   </div>
</div>

Hasta acá nada nuevo, sin embargo hay un tema. En primer lugar hemos definido cada parte de nuestro sitio con divs, la cabecera, el pie de página, la barra de navegación, etc. Esto no está mal, porque hasta ahora nosotros tenemos una sola forma de definir un contenedor: con una etiqueta div. ¿Pero cómo saben los navegadores como Google de qué forma está armado nuestro sitio, la estructura del mismo?

Además nosotros a lo largo de la historia hemos pasado desde el mal uso de las tablas al abuso de los divs. Todo es un div, todo está definido por divs. Escribimos esta etiqueta tantas veces que luego es difícil distinguir fácilmente cada porción de nuestro html, independientemente de si tiene un id, una class o comentarios.

Html5 trae consigo nuevas etiquetas para definir las distintas partes de nuestra página:

  • header Será el contenedor de la cabecera de nuestro sitio. Dentro debería haber un h1 con el título de nuestra página y todo tipo de información relacionada con la información de presentación de nuestra página.
  • nav La mayoría de los sitios web presentan una barra de navegación principal con los enlaces a las páginas principales, esta etiqueta contendrá esa barra.
  • section La etiqueta section definirá las partes principales de nuestro sitio. Podríamos tener un section para mostrar la lista de posteos de un blog, para mostrar un posteo individualmente, los comentarios de un blog, un catálogo de productos, etc.
  • aside A diferencia de section estas etiquetas contendrán aquella información que esté en segundo plano en nuestra página. Por ejemplo, si pensamos en un sitio como Youtube, section sería el contenedor del video, la parte central, mientras que aside será el contenedor de los videos relacionados, lo opcional.
  • article Dijimos que section podría ser utilizado por ejemplo para definir un contenedor de posteos o comentarios, entonces en el caso de los posteos, cada article será un posteo y en el de comentarios, cada article será un comentario. También pueden utilizarse dentro de los aside de la misma forma, definir los distintos bloques de un bloque padre.
  • footer Esta etiqueta servirá de contenedor para el pie de nuestra página, donde se encuentra toda la información de la autoría.

A su vez las etiquetas header y footer no sólo sirven para definir la cabecera y pie de página del sitio en sí, sino también pueden utilizarse dentro de otras etiquetas. Por ejemplo en un catálogo de productos, para la cabecera y pie de cada producto:

<section id="catalogo">
   <article>
      <header>
         <h1> 1300C0 </h1>
      </header>
      <p> Cuchillo de cerámica de color blanco. Largo de hoja: 12cm. </p>
      <footer>
         <p> Categoría: <strong> Chef </strong> </p>
      </footer>
   </article>
</section>

 

Entonces volviendo a nuestro modelo de sitio podríamos definir el mismo con las nuevas etiquetas de html5 de esta forma:

<div id="contenedor">
   <header>
      <h1> Título de nuestra página </h1> 
   </header>
   <nav>
      <ul>
         <li> Boton 1 </li>
         <li> Boton 2 </li>
         <li> Boton 3 </li>
         <li> Boton 4 </li>
         <li> Boton 5 </li>
      </ul> 
   </nav>
   <section>
      <article>
         <h2> Artículo 1 </h2>
         <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos... <a href=""> Leer más </a> </p>
      </article>
      <article>
         <h2> Artículo 2 </h2>
         <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos... <a href=""> Leer más </a> </p>
      </article>
      <article>
         <h2> Artículo 3 </h2>
         <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos... <a href=""> Leer más </a> </p>
      </article>
      <article>
         <h2> Artículo 4 </h2>
         <p> Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos... <a href=""> Leer más </a> </p>
      </article>
   </section>
   <aside>
      <article>
         <h2> Últimas noticias </h2>
         <ul>
            <li> Artículo 1 </li>
            <li> Artículo 2 </li>
            <li> Artículo 3 </li>
            <li> Artículo 4 </li>
            <li> Artículo 5 </li>
            <li> Artículo 6 </li>
         </ul>
      </article>
      <article>
         <h2> Categorías </h2>
         <ul>
            <li> Categoría 1 </li>
            <li> Categoría 2 </li>
            <li> Categoría 3 </li>
            <li> Categoría 4 </li>
            <li> Categoría 5 </li>
            <li> Categoría 6 </li>
            <li> Categoría 7 </li>
            <li> Categoría 8 </li>
            <li> Categoría 9 </li>
         </ul>
      </article>
   </aside>
   <footer>
      <p> Desarrollado por autor </p>
   </footer>
</div>

Como verán el código es mucho más legible y ahora los buscadores sabrán  qué es cada parte en nuestra página.

 

Redes sociables

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


    *