Etiquetas Semánticas en HTML5
Temario:
- Header
- Nav
- Section
- Article
- Aside
- Footer
- Address
- Hgroup
HTML5 refuerza la noción del marcado semántico. Es decir, las etiquetas no deben describir cómo una sección de la página se ve, sino que deben describir el significado de la sección en el contexto de la página.
Header
La etiqueta <header> se utiliza sobre todo para especificar un encabezado de página. Se reemplaza el <div id = "header"></div>
<header><h1> Esta es mi encabezado </ h1>
</header>
La cabecera contiene normalmente un h1 y otra información que pertenece a la cabecera visual de la página. No se debe confundir el elemento <header> (que es una sección visible de la página) con el elemento de <head> (que contiene metadatos que no se muestra al usuario). También tenga en cuenta que el elemento <header> no pretende sustituir el <h1>.
La mayoría de los navegadores no ofrecen ningún tipo de formato predeterminado para la cabecera. Se espera que el desarrollador web pueda añadir cualquier formato a través de CSS. Se puede utilizar dentro de una sección o artículo para indicar que un <h1> es el título para ese elemento y no para la página principal. Esto es útil porque una página debe tener un solo <h1>.
Nav
La etiqueta <nav> se utiliza para indicar una parte de la página reservada para navegación de páginas. Este pretende ser un reemplazo para el <div id = "nav">...</div>
<nav><h2> Menú de navegación </h2><ul><li> <a href="#"> enlace a </a> </li><li> <a href="#"> enlace b </a> </li><li> <a href="#"> enlace c </a> </li><li> <a href="#"> enlace d </a> </li><li> <a href="#"> enlace e </a> </li></ul></nav>
El elemento de navegación no tiene un formato predeterminado. Se espera que el desarrollador web pueda añadir CSS para determinar cómo se verá el elemento y donde se colocará en la página.
Section
Una etiqueta <section> es una división genérica de una página.
Una página o un artículo que se puede dividir en varias secciones.
El elemento de sección pretende ser más específico que las etiquetas <div>.
<section id = "1"><h2> Sección 1 </ h2><p> Cuerpo de la Sección ... </ p>
</section>
Article
Un artículo es un subconjunto de la página. La etiqueta <article> se debe utilizar para indicar el contenido que procede de una fuente exterior o es de alguna manera independiente de los principales contenidos de la página. Por lo general, los artículos se utilizan para marcar las secciones de la página que se trajeron con algún tipo de sistema de agregación.
La mayoría de los navegadores no agregan ningún formato especial a un artículo.<article><header><h1>Aprendiendo HTML5 en <a href="http://programandolanet.blogspot.mx/">Programando la Net</a></h1></header><p>Este es un párrafo de nuestro arículo, el cual usare para recordarte, que contribuyas en este proyecto dandole manita arriba. Gracias</p>
</article>
La mayoría de los artículos vinculan con un documento externo online, del cual procede dicho artículo.
Note que la etiqueta <article> no importa datos desde una fuente externa, sólo indica que la relación es externa.
Vea también que si nuestro artículo contiene un <header>, es adecuado colocare un <h1> que permita priorizar su búsqueda.
Aside
El elemento <aside> se utiliza para indicar un fragmento de la página que está relacionada con, pero separada de la página principal. Aparte del texto suele ser formateado como una barra lateral.
Generalmente se usa para publicidad, articulos relacionados, widgets sociales etc.
Generalmente se usa para publicidad, articulos relacionados, widgets sociales etc.
<aside>Este es un comentario secundaria
</aside>
Tenga en cuenta que la mayoría de los navegadores no se han puesto de acuerdo sobre la forma de mostrar el elemento <aside> es totalmente a su criterio.
Footer
La etiqueta <footer> se utiliza para representar el contenido de pie de página de una página. Normalmente, esta sección contiene información de contacto de autor (normalmente en una etiqueta <address>).
Los navegadores no ofrecen automáticamente estilo al pie de página. El estio lo implementaremos con CSS.<footer><h2> Este es el pie de Página </h2><address>Sigueme en Twitter <a href = "https://twitter.com/h_raulvc"> <img border="0" height="37" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyK_L-x53RgelqherWiEi3GyjpIQK1g94J0r0p2n5Pu7Vb5R2ZhTDvxRr7uSQlY4LWH6dVB7DiSvqCLfAggmoeKE3c6mbFzhoZOrGf5FxGpCSixmhJb3IZZBFlbxlLzk0lwAyFraP2NRKp/s200/Logotipo+twitter+png+2.png" width="41"/></a></address>
</footer>
La etiqueta <footer> se destina principalmente para reemplazar el ID
<div = "footer"> </div>
Address
La etiqueta <address> está destinado a mantener la información del autor de una página o sección. A pesar de que estaba disponible en HTML 4, la etiqueta <address> está destinado a ser utilizado en el interior o bien en todo el contenido de la página ya sea dentro de una sección o artículo para indicar el autor de dicha parte. Otras etiquetas (especialmente los vínculos a direcciones de correo electrónico o enlaces de páginas) se pueden incrustar en la etiqueta address.
La mayoría de los navegadores muestran las direcciones como cursiva, pero esto no está garantizado. Al igual que las etiquetas HTML, puede modificarse con CSS.<address>Toluca, Estado de México<br />Calle M... Número XXX
</address>
Hgroup
La etiqueta <hgroup> se utiliza para combinar un encabezamiento y una o más subencabezados o subtitulos en un grupo lógico. El uso de un encabezamiento <h2 > inmediato como subtitulo puede interferir con las funciones que describen el primero, pero con un hgroup, usted puede poner varios encabezados en un hgroup, y sólo el título inicial es considerado por herramientas automáticas de búsqueda.
El hgroup no proporciona ningún formato particular, a la cabecera de grupo.<hgroup><h1> Historia del mundo </ h1><h2> Principales Teorías</ h2>
</hgroup>
No hay comentarios:
Publicar un comentario