Embed Size (px)
Citation preview
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
SeminarioHTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Los elementos de la estructura HTML5
Facilitadora:
María Zeballos
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Los elementos de la estructura HTML5
El elemento <header>El nuevo elemento <header> permite insertar una zona de visualización para lascabeceras. Puede definirse esta cabecera para toda la página (como ya lo usó)o para una zona determinada: artículo, menú lateral...
Debemos considerar que este elemento se puede usar desde dos puntos de vista:• A nivel de la página: es la típica cabecera de la página, que a menudo
aparece en lo alto de la pantalla, con un logotipo, un eslogan, un menú denavegación principal...
• A nivel del contenido: permite disponer de una zona de introducción delcontenido que se incluya a continuación.
Como puede ver, el elemento <header> no tiene que aparecer obligatoriamente en la estructura de la página.
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <footer>
El nuevo elemento <footer> permite insertar una zona devisualización para los pie de página. Volvemos a encontrarnos conla misma semántica de los encabezados. Es posible definir un piede página para la página completa, o bien para cualquier otra zonade visualización o para un artículo.
Su uso es similar al de los <header>, pero aplicado a los pie depágina. Por lo tanto, no debemos seguir al "pie de la letra" latraducción literal de "pie de página". Se trata más bien de un "piede zona de visualización", donde la zona de visualización puede seruna página, una sección, un artículo...
Los elementos de la estructura HTML5
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <nav>
El elemento <nav>, como su nombre indica, está pensado para lavisualización de una zona de navegación con vínculos hipertexto.Cuidado, no quiere decir que solo podrá tener una zona denavegación en cada página, o que tenga que crear tantoselementos <nav> como zonas de navegación haya en sus páginas,bastará con que los identifique correctamente.
El elemento <nav> está pensado en especial para la navegaciónprincipal del sitio web, para la inserción de vínculos entre laspáginas de dicho sitio web.
Los elementos de la estructura HTML5
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <section>
El elemento <section> permite agrupar elementos que tengan lamisma temática. De este modo podemos agrupar en un mismoelemento un contenido, con su título y su pie de página.
Los elementos de la estructura HTML5
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <article>
El elemento <article> permite insertar un contenido autónomo,que puede volver a usarse en otro lugar del sitio web, sin que porello se anule su significado.
Claro está, un artículo podría tener una cabecera (<header>), unpie de página (<footer>) y varios títulos (<hx>).
Los elementos de la estructura HTML5
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <aside>
El elemento <aside> permite mostrar un contenido relacionado conel contenido al cual esté vinculado. Puede tratarse de barraslaterales (sidebars), de zonas de widgets, de complementos sobreartículos, etc.
Los elementos de la estructura HTML5
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
El elemento <figure>El elemento <figure> permite agrupar todos los elementosnecesarios para la inserción de una imagen: la propia imagen(elemento <img>), o bien, una foto, un vídeo, una animación... y suleyenda, con el nuevo elemento <figcaption>.Veamos un ejemplo:
<p>Fotografía de una Sarracenia de mi jardín.<p/><figure><img src="sarracenia.jpg" /><figcaption>sarracenia purpura</figcaption>
</figure>
Los elementos de la estructura HTML5
22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS
Aunque use HTML5 no tiene por qué erradicar el uso de las cajas<div>. ¡Todavía podemos usarlas y siguen teniendo su utilidad!
Los elementos de la estructura HTML5
