Introducción a Etiquetas HTML 5
3 recomendaciones3,878 vistas
El documento trata sobre las nuevas etiquetas estructurales introducidas en HTML5, destacando su propósito de dividir las páginas web en secciones lógicas para mejorar la claridad del contenido. Se presentan ejemplos de las nuevas etiquetas como header, footer, article, section, aside y nav, y se discute la simplificación de la declaración doctype en HTML5. También se menciona la importancia de asegurar la compatibilidad de los navegadores con las características de HTML5 antes de desarrollar sitios web.
Introducción a Etiquetas HTML 5
- 1. joaquinls Nuevas etiquetas HTML5 estructurales Joaquín Lara Sierra Nuevas etiquetas HTML5 estructurales por Joaquin Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia. Basada en una obra en http://www.ibm.com/developerworks/ssa/web/library/wa-html5structuraltags/. 1
- 2. joaquinls De que hablar • ¿Qué es HTML5? • El contexto de HTML. • Los Navegadores. • DocType. • Nuevos elementos estructurales. • Enfoque HTML 4. • Enfoque HTML 5. • Ejemplos. 2
- 3. joaquinls HTML5, la última versión del Hypertext Markup Language (HTML), es la versión más radical del lenguaje a la fecha. Esta presenta muchos recursos nuevos en una variedad de áreas. Algunas de las adiciones más notables incluyen: • Etiquetas integradas multimedia para audio y video • Un bastidor para dibujar contenido en el navegador • Formatos más inteligentes que le permiten hacer cosas como validación mediante el uso de un atributo requerido Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? 3
- 4. joaquinls Contexto • Tim Berners-Lee creó el HTML original en 1989 para solucionar las deficiencias de los métodos existentes para acceder a información en Internet. Desde que se concibió, encontrar su camino en Internet era una tarea difícil. • HTTP es un protocolo de servicio utilizado para entregar contenido. • La combinación de HTTP y HTML ofrece una navegación rápida y fácil por el contenido en Internet, al permitirle simplemente hacer clic en los enlaces de texto para navegar entre documentos. • Después de crear estas dos tecnologías, Berners-Lee continuó y fundó el World Wide Web Consortium (W3C) Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? 4
- 5. joaquinls • Para el momento de este escrito, HTML5 ha sido lanzado oficialmente. La mayoría del contenido en la Web todavía está siendo escrito para la especificación HTML4. No obstante, varios navegadores incluyen soporte para la especificación HTML5. Como cada navegador puede soportar solo ciertos recursos de HTML5, las cosas se complican un poco. Antes de escribir un sitio basado en HTML5, revise cada uno de sus navegadores objetivo para asegurarse de que soporten los recursos que va a utilizar para su sitio. Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? 5
- 6. joaquinls Sin importar las capacidades de sus navegadores objetivo, usted debe decirle al navegador que usted desea que su contenido sea presentado usando la especificación HTML5. Usted hace esto usando la declaración doctype. Afortunadamente, la declaración doctype se ha simplificado bastante en HTML5. De hecho es sólo una. Para que su navegador presente en pantalla usando la especificación HTML5 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? <!DOCTYPE html> 6
- 7. joaquinls La razón para crear nuevas etiquetas estructurales es dividir las páginas Web en partes lógicas que describan el tipo de contenido que incluyen. Conceptualmente, piense en la página Web como un documento. Los documentos tienen encabezados, pies de página, capítulos y otras convenciones diferentes que dividen el documento en partes lógicas. Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? 7
- 8. joaquinls De HTML 4 Si usted ha creado incluso los documentos HTML más simples, entonces estará familiarizado (a) con la etiqueta div . La etiqueta div es el principal mecanismo de la era pre-HTML5 para crear bloques de contenido en un documento HTM. Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? 8 Header Footer Content
- 9. joaquinls De HTML 4 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Una página HTML simple usando Divs</title> </head> <body> <div id='header'>Header</div> <div id='content'>Content</div> <div id='footer'>Footer</div> </body> </html> 9
- 10. joaquinls De HTML 5 HTML5 responde a este problema proporcionando un conjunto de etiquetas que definen con mayor claridad los bloques principales de contenido que componen un documento HTML. Las nuevas etiquetas son: • header • section • article • aside • footer • nav Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es? 10 <div id = “header”> <div id = “nav”> <div id = “footer”> <div id = “sction”> <div id = “aside”> <div id = “article”>
- 11. joaquinls El área header <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header</header> <div id='content'>Content</div> <div id='footer'>Footer</div> </body> </html> 11 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
- 12. joaquinls El área section <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header</header> <section><p> Esta es una sección importante de la página. </p> </section> <div id='footer'>Footer</div> </body> </html> 12 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
- 13. joaquinls El área article <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header</header> <section> <article> <p>Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </article> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </article> </section> <div id='footer'>Footer</div> </body> </html> 13 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
- 14. joaquinls La etiqueta aside <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header</header> <section> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </aside> </p> Este es un aparte de la primera publicación en blog. </p> </aside> </article> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </article> </section> <div id='footer'>Footer</div> </body> </html> 14 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
- 15. joaquinls La etiqueta footer <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header</header> <section> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </aside> </p> Este es un aparte de la primera publicación en blog. </p> </aside> </article> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </article> </section> <footer>Footer</footer> </body> </html> 15 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
- 16. joaquinls La etiqueta nav <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title> </head> <body> <header>Header <nav> <a href='#'>Algún enlace de navegación</a> <a href='#'>Algún enlace de navegación adicional</a> <a href='#'>Un tercer enlace de navegación</a> </nav> </header> <section> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </aside> </p> Este es un aparte de la primera publicación en blog. </p> </aside> </article> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </article> </section> <footer>Footer</footer> </body> </html> 16 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?
- 17. joaquinls Ejemplo completo <!DOCTYPE html> <html> <head> <title> Una página HTML simple </title></head> <body> <header>Header <nav> <a href='#'>Algún enlace de navegación</a> <a href='#'>Algún enlace de navegación adicional</a> <a href='#'>Un tercer enlace de navegación</a> </nav> </header> <section> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </aside> </p> Este es un aparte de la primera publicación en blog. </p> </aside> </article> <article> <p> Esta es una sección importante del contenido de la página. Tal vez una publicación en blog. </p> </article> </section> <footer>Footer</footer> </body> </html> 17 Contexto Navegadores DocType Estructura Enfoques Ejemplos¿Qué es?