nav
Empezaremos por la etiqueta <nav></nav> que es la más simple. Su nombre viene de "navigation" navegación). Típicamente se usará para menús. Dicho menú usualmente está en un header o en el footer. Los elementos del menú (los distintos links) suelen ser listados con la etiqueta <ul></ul>.
La etiqueta ul, que viene de Unordered List (lista sin orden), sirve para tener una secuencia de elementos que no va a tener un número a su lado que indique su posición. Para tener un número al lado de cada elemento, usaríamos la etiqueta ol, Ordered List (lista ordenada).
Un ejemplo de uso de una etiqueta ul:
<ul>
<li> elemento 1 </li>
<li elemento 2 </li>
</ul>
Lo cual se renderiza en el navegador como:
- elemento 1
- elemento 2
article
El <article></article> representa un contenido que tiene sentido por sí solo y es reusable. Cuando hablamos de reusable, imagina que es posible tomar el contenido de article y colocarlo en otro sitio arbitrario y aún así tiene sentido. Un ejemplo son los twitter feed widgets que nos presentan tweets, dicho widget tiene sentido no importa donde lo pongas, es reusable en cualquier lugar. Algo así representan los articles.
Otro ejemplo son las publicaciones de los blogs, el conjunto de las publicaciones sería un article, y cada una de las publicaciones, de manera individual, sería un section.
section
El <section></section> es, como su nombre lo indica, una parte de un documento. En el caso de nuestro ejemplo del blog, cada publicación está dentro de la etiqueta section. Esto lo veremos en un ejemplo más abajo.
aside
El contenido de <aside></aside> (aside: al lado) quedará colocado en una posición relativa al contenido de la etiqueta que lo contiene. Ejemplo: barras laterales. Entonces, si tenemos un aside dentro de la etiqueta body, la barra lateral cubrirá toda la página (exceptuando el header del body, si existe); si el aside está dentro de una etiqueta section, la barra lateral cubrirá el contenido de dicha etiqueta, y así sucesivamente.
Si la explicación del aside te parece confusa, espero que con el siguiente ejemplo se pueda comprender.
Si corres el código en un navegador podrás ver algunas cosas interesantes:
- El tamaño del texto de los h1 depende de la ubicación de esta etiqueta. No es lo mismo un h1 en el header del body, que un h1 de una section que a su vez está dentro de un article.
- Cada sección (y article) puede tener su propio header y footer.
- El body tiene su aside, así como la segunda sección.
- En el head vemos una etiqueta estilo que cambia la apariencia de los elementos de la página. También existe el style como atributo (ver segundo aside). Esto quiere decir que podemos definir los estilos de varias maneras: por medio de un atributo o en el head. Cuando hablemos a fondo de CSS veremos que hay una tercera forma de aplicar estilos, que es mediante un archivo externo de extensión css.
- Vemos que algunas etiquetas tienen el atributo id. Este sirve para dar un identificador único al elemento y poder hacer referencia a este desde distintos lugares. Por ejemplo: desde la etiqueta estilo podríamos seleccionar el botón editar mediante el selector #btnEditar (hablaremos más de esto cuando hablemos de CSS).
- Otra forma de identificar una etiqueta es por su clase. La principal característica de la clase es que a diferencia del id varios elementos pueden poseer la misma clase, por lo que puedes seleccionar varios elementos haciendo referencia a dicha clase.
Y es todo. Vemos un blog que va tomando un poco de forma, pero lamentablemente está lejos de ser un proyecto completo. Por ejemplo, hicimos botones de editar y borrar, pero si los presionan ni editan ni borran. Para ello podríamos usar javascript/jquery/ajax y haríamos un llamado a un web API que nos permitiría ejecutar las acciones siempre que estemos autenticados con el rol de Administrador. Pero por ahora estamos estudiando HTML5, eso lo dejaremos para después.
No hay comentarios:
Publicar un comentario