Html5 introdujo varios elementos que podemos utilizar para seccionar nuestros sitios web, para marcar y diferenciar secciones de la misma, cuando utilizamos estos elementos deHTML5 estamos enriqueciendo nuestro proyecto ya que estamos dando un significado semántico de alto valor que los navegadores modernos sabrán interpretar rápidamente el contenido y también sabrá como esta estructurado el sitio web. En esta entrada vamos a ver como y cuando debemos utilizar estos elementos para seccionar nuestra pagina web basada en HTML5.
Elemento <Main>
Este nuevo elemento de HTML5 define el contenido principal o mas importante en el documento. Este elemento es único y solo debe haber uno por pagina, tampoco debe ser descendiente de elementos como <article>, <aside>, <footer>, <header>, o <nav> ya que su papel es de elemento principal como su nombre lo indica, después de body por ejemplo.
Ejemplo de uso:
Especificaciones elemento <main>
Soporte en los navegadores web
Elemento <Article>
el elemento <article> debe contener un fragmento de contenido autónomo que se puede distribuir fuera del contexto de la pagina. Aquí podemos incluir cosas como los artículos, noticias, entradas de blog o comentarios de los usuarios. En otras palabras el elemento article representa una composición autónoma en el documento que esta destinada a ser independiente y reutilizable Ejemplo: en el home de un blog, cada entrada podría ser dentro de etiquetas articles, o el comentario de un usuario a un post, un widget interactivo o cualquier otro elemento independiente del contenido.
Ejemplo de uso:
Especificaciones elemento <article>
Soporte en los navegadores web
Elemento <Section>
El elemento <section> representa una sección genérica de un documento, una agrupación temática de contenido, también con el elemento section agrupamos contenidos relacionado por lo general con su respectivo titulo en una etiqueta de encabezado de HTML.
Utilizamos section para dividir contenido relacionado dentro de un articulo Ejemplo: marcar capítulos, especificar secciones en pestañas, citar noticias etc.
Ejemplo de uso:
Especificaciones elemento <section>
Soporte en los navegadores web
Elemento <Aside>
Este elemento aside lo utilizamos para representar contenido que es tangencialmente relacionado con el contenido alrededor de ella. Ejemplo, las barras laterales de las paginas web que a menudo contienen explicaciones o contenido secundarios, anuncios informativos del sitio, biografías de autores o enlaces relacionados.
Ahora, este elemento aside lo podemos incluir dentro de una sección, articulo u otra parte de nuestro sitio web.
Ejemplo de uso:
Especificaciones elemento <aside>
Soporte en los navegadores web
Elemento <Header>
El elemento header lo utilizamos para representar un contenido de introducción de una pagina web o una sección de la pagina por ejemplo un articulo. El elemento header suele tener su propio encabezado y a veces algunos metadatos relevantes y de acuerdo al contenido el cual hace parte. Básicamente dentro de este elemento es donde colocamos el logotipo, los títulos de encabezados, el buscador etc.
El elemento header por lo general lo asociaremos con la sección o contenido cercano aunque su uso general se da como padre directo en la estructura de la pagina web.
Especificaciones elemento <header>
Soporte en los navegadores web
Elemento <Nav>
Utilizamos el elemento nav para marcar una colección de enlaces a paginas internas o externas, este elemento nav se utiliza principalmente para la navegación principal del sito pero también es una buena opción utilizar este elemento para otros conjunto de enlaces como por Ejemplo: un blogroll.
Especificaciones elemento <nav>
Soporte en los navegadores web
Elemento <Footer>
Utilizamos el elemento footer para representar la información sobre una sección tal como autor, información de copyright o enlaces de sitios web relacionados. Generalmente utilizamos este elemento para el pie de pagina general del sitio, pero también se puede utilizar para pie de artículos o secciones del sitio web.
Especificaciones elemento <footer>
Soporte en los navegadores web
Los anteriores elemento main, article, section, aside, header, nav y footer son los que utilizamos básicamente para dividir partes de una pagina web, los buenos navegadores leeran estas secciones y sabrán que significara cada parte y le dará su debida importancia o relevancia, esto potenciara la semántica base de la pagina.
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información
No hay comentarios:
Publicar un comentario