Continuamos en esta ocasión estudiando la etiqueta estructural <footer>, con la que aprenderemos a definir un pié de página. También estudiaremos la etiqueta <div>, con ella aprenderemos a crear contenedores genericos, los cuales son muy usados para crear sitios web profesionales y de calidad. Recuerda que en la anterior clase estudiamos las etiquetas semánticas estructurales en HTML5 - <section> y <aside> por si quieres repasar.
Definiendo el pie de página con <footer>
La etiqueta <footer> se usa normalmente para definir el pié de página de un documento html. Podemos usar esta etiqueta como un pié de página no solo del sitio web, si no de diferentes elementos. <footer> puede ser pié de página de la etiqueta que lo contenga. Igual que su etiqueta padre suele ser <body>, tambien podría ser etiqueta hija de <article>, <aside>, <figure>, <section> o incluso de un <nav>. En resumen, <footer> sirve como pié de página del elemento que lo contiene.
Veamos un ejemplo donde además nos va a servir para recordar la etiqueta <small>. podéis encontrar toda la información sobre esta etiqueta en la clase Legalizandonos en HTML5 con la etiqueta <small>, siempre es bueno repasar.
<footer> <p> <small>Copyright © 2018 HTML5 Doctor. All rights reserved. Hosted by (mt) Media Temple. Branding by Oliver Ker.</small> </p> </footer>
Creando contenedores genéricos con <div>
En la mayoría de los casos, vamos a vernos en la necesidad de envolver bloques de contenido únicamente para aplicarles estilos usando CSS o agregarles cualquier comportamiento usando javascript. Estos contenedores los crearemos usando la etiqueta <div>. Recuerda que la etiqueta <div> va a servir para aplicar este tipo de características tanto a la caja que se ha creado usando la etiqueta <div> como a los hijos que están dentro de <div>. La etiqueta <div> no otorga ningún valor semántico al documento y tampoco se genera ningún estilo en particular.
No debemos confundir la etiqueta <span> con la etiqueta <div> ya que <span> se utiliza para asignar estilos a textos que se encuentran dentro de bloques. Podéis acceder a la post La etiqueta invisible <span> en HTML5 para más información y repaso.
¡RECUERDA!: La W3C recomienda que si quieres crear un contenedor para tu sitio uses un <div> en lugar de la etiqueta <section>.
Aunque todavía no hemos trabajado con CSS vamos a hacer una pequeña introducción de como se aplican estilos directamente a una etiqueta <div>. Esto es solo un extracto del código, no lo voy a escribir una estructura completa porque no creo que sea necesario para que lo entendáis.
<body style="background: #ff0000"> <div id="contenedor" style="background:#ffff" border:2px solid #000000 magin:40px> </div> <body>
¡A TENER EN CUENTA!: En el caso de encontrarnos con un menú de categorías de una tienda, por ejemplo, ya que es contenido importante para la tienda, en lugar de encerrar ese menú con la etiqueta <aside>, lo encerraríamos con la etiqueta <div>. Y dentro de <div> pondríamos una etiqueta <nav> que contenga todos los enlaces. Y si dentro contiene un baner por ejemplo si lo encerraríamos con la etiqueta <aside> ya que no tiene relevancia. Esta es la forma de hacerlo semánticamente perfecta.
<div class="sidebar"> <nav> <ul> <li> <a href="#"> Categorías</a></li> <li> <a href="#"> Categorías</a></li> <li> <a href="#"> Categorías</a></li> <li> <a href="#"> Categorías</a></li> <li> <a href="#"> Categorías</a></li> <li> <a href="#"> Categorías</a></li> <li> <a href="#"> Categorías</a></li> </ul> </nav> <aside class="publicidad"> <img src="https://www.oneviewhealthcare.com/wp-content/uploads/2018/05/HitExpo-OV-Banner.jpg" width="190"> </aside> </div>
Conclusiones
Aunque nos falta una clase más para terminar con las etiquetas semánticas estructurales, en este post lo hemos dejado casi zanjado. Habiendo estudiado las etiquetas <footer> y <div> ya solo nos queda tratar la accesibilidad en nuestro sitio web, pero eso será en la siguiente. En esta ocasión hemos aprendido a definir pies de página con <footer> y a crear contenedores genéricos con <div>, algo esencial para construir nuestro sitio web.
Normalmente este ultimo párrafo, lo utilizo para pediros que compartáis la publicación con gente que pueda estar interesada en el estudio de HTML5 y CSS3. Eso os lo sigo pidiendo, pero voy a dejar de poner los enlaces a redes sociales porque me parece que estoy siendo muy cansino. Os pido también que comentéis las publicaciones y me dejarais vuestra opinión. Si eres nueva/o, es tu primer post en este humilde blog y quieres estudiar estos lenguajes como hago yo, justo debajo tienes un baner que te conduce al curso completo.
0 Comentarios