Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Unidad02 EtiquetasHTML5

    Cargado por

    Patricia Sandoval
    11 vistas27 páginas
    Este documento presenta las nuevas etiquetas semánticas de HTML5 como header, nav, main, section, article, aside y footer. Explica brevemente el propósito de cada etiqueta y cómo reemplazan a las divisiones genéricas que se usaban anteriormente.

    Descripción original:

    Título original

    Unidad02_EtiquetasHTML5

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento presenta las nuevas etiquetas semánticas de HTML5 como header, nav, main, section, article, aside y footer. Explica brevemente el propósito de cada etiqueta y cómo reemplazan a las divisiones genéricas que se usaban anteriormente.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    11 vistas27 páginas

    Unidad02 EtiquetasHTML5

    Cargado por

    Patricia Sandoval
    Este documento presenta las nuevas etiquetas semánticas de HTML5 como header, nav, main, section, article, aside y footer. Explica brevemente el propósito de cada etiqueta y cómo reemplazan a las divisiones genéricas que se usaban anteriormente.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 27

    Tecnicatura en Desarrollo Web

    Tecnicatura en Desarrollo de Aplicaciones Móviles

    HTML 5
    Etiquetas Semánticas
    Programación Web I /
    Móvil I
    Comisión Miércoles Noche Comisión Viernes Mañana
    DIS. Alicia Rosenthal Ing. Gabriel Panik
    Tec. Willian Dos Reis
    Doctype HTML 5
    <!DOCTYPE html>
    <html lang="es">
    <head>
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>

    </body>
    </html>
    header

    •<header> no debe ser confundido


    con la etiqueta <head>

    •Marca el encabezado del contenido


    de nuestro documento
    •Título (h1)
    •Logo de la página
    header
    antes <div id="encabezado">
    <h1>Título de la página</h1>
    </div>
    HTML 5

    <body>
    <header>
    <h1>Título de la página</h1>
    </header>
    </body>
    header header
    nav

    •La barra de navegación interna


    del sitio

    •Puede haber una, o varias por


    página
    nav nav
    nav
    antes <div id="menu">
    <ul><li></li></ul>
    </div>
    HTML 5

    <nav>
    <ul>
    <li>Home</li>
    </ul>
    </nav>
    main

    •Se utiliza para marcar el


    contenido central de una página
    (Sin encabezado, menu, ni pie)

    •Solo puede haber una etiqueta


    main
    main main
    main
    antes <div id="contenido">
    <p><p>
    </div>
    HTML 5

    <main>
    <section>
    ….
    </section>
    </main>
    section

    •Se utiliza para marcar secciones


    de contenido que están
    relacionados entre sí (un mismo
    tema)

    •Pueden haber varios section en


    una página
    section
    antes <div class="novedades">
    <p><p>
    </div>
    HTML 5

    <section>
    <article>
    ….
    </article>
    </section>
    section section
    article
    •Cada contenido independiente,
    completo, atómico.

    •Puede haber uno, o varios por


    página

    •Son subsecciones dentro de un


    section
    article
    antes <div class="noticia">
    <p><p>
    </div>
    HTML 5

    <article>
    <h2>Titulo de la Noticia</h2>
    <p>Contenido…..</p>
    </article>
    article article
    article article
    aside
    •Información complementaria,
    relacionada con la página, pero que
    podría no estar.

    •Ejemplo: productos relacionados,


    comentarios de lectores
    aside
    antes <div class="lateral">
    <p><p>
    </div>
    HTML 5

    <aside>
    <h2>2016</h2>
    …
    </aside>
    aside aside
    footer
    •Pie de página
    • Datos de contacto
    • Redes Sociales
    • Copyright
    footer
    antes <div id="pie">
    <p><p>
    </div>
    HTML 5

    <footer>
    <p>
    201x -…..
    </p>
    </footer>

    También podría gustarte