<header> </header> <nav></nav> <footer></footer>

Tamaño: px

Comenzar la demostración a partir de la página:

Download "<header> </header> <nav></nav> <footer></footer>"

María Victoria Correa Vera
hace 5 años
Vistas:

1 DESCRIPCIÓN DE LA ACTIVIDAD En esta actividad se analizará la estructura del cuerpo (dentro del <body> del documento), a través del uso de etiquetas semánticas: header, nav, section, article, aside, footer, analizando a detalle la finalidad de cada una de ellas, permitiendo añadir un valor semántico y estructural a un documento web <header> </header> <section></section> <nav></nav> <aside></aside> <footer></footer> Uso de la etiqueta <header> en HTML El elemento <header> no debe ser confundido con el encabezado principal de la página <head>, la intención de <header> es proveer información introductoria (títulos, subtítulos, logos), pero difiere con respecto a <head> en su alcance. Recordemos que el elemento <head> tiene el propósito de proveer información acerca de todo el documento al motor de búsqueda, el elemento <header> es utilizado solo para el cuerpo o secciones específicas dentro del cuerpo del documento HTML5. Para entender mejor el planteamiento veamos un ejemplo de uso.

2 Hemos utilizado entre las etiquetas <header>, un elemento <h1> es usado para definir títulos, el número indica la prioridad del título. El elemento <h1> es el más importante y <h6> el de menor importancia, entonces en el ejercicio <h1> será utilizado para mostrar el título principal y los demás para subtítulos. Uso de la etiqueta <nav> en HTML Siguiendo con nuestro ejemplo, la siguiente sección es la barra de navegación. Esta barra es generada en HTML5 con el elemento <nav>. El elemento <nav> se encuentra dentro de las etiquetas <body>, pero es ubicado después de la etiqueta de cierre de la cabecera <header>, no dentro de la etiquetas <header>. Ya que no es parte de la cabecera sino que es una nueva sección dentro del documento HTML5. Aunque se suele en algunas ocasiones dentro del <header>. Sin embargo, siempre se debe considerar que estas etiquetas fueron creadas para brindar información a los navegadores y proveer a dispositivos en el mercado a identificar las partes más relevantes de un documento HTML5. Para generar en ustedes las buenas practicas recomiendo seguir los estándares y mantener todo tan claro como sea posible en el documento.

3 La principal función de la etiqueta <nav>, es ofrecer ayuda para los navegación entre un documento, ya sean menús principales o páginas externos y enormes. En este ejemplo entre las etiquetas <nav>, hemos utilizado dos elementos nuevos la etiqueta <ul> y <li>. Esto comúnmente se conoce como listas no ordenadas, el propósito del elemento <ul> es definir la lista y las etiquetas <li> son usadas para definir un ítem de la lista. Existen dos tipos de listas, las ordenadas y no ordenadas. En las listas ordenadas se usan la etiqueta <ol> y <li>. En los próximos ejercicios utilizaremos ejemplos de ellos. Aún nos falta algo para darle funcionalidad a nuestra barra de navegación, y de ejemplo agregaremos los enlaces con la etiqueta <a>.

4 Comprobemos el resultado de dichos cambios aplicado a nuestro documento HTML5. Te darás cuenta que cuando pases el cursor del mouse sobre dicho enlace, tendrás la posibilidad de ingresar a él.

5 Realiza los siguientes cambios a tu documento y verifica el resultado obtenido a través de un navegador web. Resultado final de los cambios aplicados a nuestro documento.

6 Uso de la etiqueta <section> en HTML Hace referencia a la columna de información principal, ya que contiene la información más relevante del documento HTML5, y puede ser encontrada de varias formas (por ejemplo dividida en varios bloques o grupo de columnas dentro del mismo documento). El propósito de estas columnas es más general, el elemento en HTML5 que especifica estas secciones se llama simplemente <section>. Veamos un ejemplo de uso en un documento de HTML5. Al igual que barra de navegación, la columna de información principal es una sección aparte. Por este motivo, la sección de información principal de después de la etiqueta de cierre </nav>.

7 De momento hemos realizado los cambios correspondientes en las etiquetas <section>, agregando mejorar la organización de la información con base a la etiqueta <article> que nos permite identificar cada una de estas partes. Uso de la etiqueta <article> en HTML Analicemos un ejemplo de uso de la etiqueta <article>.

8 Como puedes observar en el ejemplo las etiquetas <article> se encuentran ubicados dentro del elemento <section>. Las etiquetas <article> en nuestro ejemplo pertenecen a esta <section>, son sus hijos, del mismo modo que cada elemento dentro de las etiquetas <body> es hijo del cuerpo. Y así como muchos elementos hijos del cuerpo, las etiquetas <article> son ubicadas una sobre otra, como en el ejemplo. Este elemento fue creado con la intención de contener unidades independientes de contenidos, así pues el contenido de cada elemento <article> tendrá su propia estructura. Podemos hacer uso dentro de ellas la versatilidad de los elementos <header> y <footer>. Estos elementos pueden ser usados no solo para definir los límites del cuerpo sino también en cualquier sección de nuestro documento. Veamos un ejemplo de uso. Resultado de nuestros cambios realizados en el documento.

9 Puede que te confunda esta definición, pero veamos un ejemplo jerárquico de las etiquetas ya utilizadas hasta el momento. Uso de la etiqueta <aside> en HTML La etiqueta <aside> representa una sección dentro de nuestro documento, cuyo contenido está relacionado con el resto de contenido del documento, pero que al mismo tiempo, es independiente y puede ser excluido sin que esto altere la lectura del resto de contenido. Por lo cual si lo eliminamos, el resto del documento no debe perder sentido alguno. Su aplicación es referenciada a noticias del pasado, banner de publicidad, barras laterales, entre otras secciones de complemento.

10 Verifiquemos el resultado a obtener en la etiqueta <aside>. Uso de la etiqueta <footer> en HTML Esta etiqueta se utiliza para contener información relativa al pie de página o a una sección. Siempre es relativa al padre, es decir a la etiqueta en la que se encuentre anidada.

11 Entre la información que puede contener esta la mención del contacto de la empresa, autor de la página web, derechos legales, mapa del sitio, enlaces de redes sociales, etc. Veamos a continuación un ejemplo de uso. Verifiquemos de nuevo el resultado alcanzado.

12 En hora buena muchas felicidades si has culminado sin ningún inconveniente en el ejercicio.

Documentos relacionados

Herramientas Modernas de Programación Licenciatura en Administración de Tecnologías de Información y Comunicaciones

Herramientas Modernas de Programación Licenciatura en Administración de Tecnologías de Información y Comunicaciones Rafael Vázquez Pérez Estilos CSS y Modelos de caja La nueva especificación de HTML (HTML5)