HTML 5

HTML

HyperText Markup Language.

  • Es un estandar para la codificación de páginas web.
  • Se basa en el uso de etiquetas "<html>".
  • Cada etiqueta describe un tipo de contenido en la página.

Versiones

Versión Año
Tim Berners-Lee invented www 1989
Tim Berners-Lee invented HTML 1991
Dave Raggett drafted HTML+ 1993
HTML Working Group defined HTML 2.0 1995
W3C Recommended HTML 3.2 1997
W3C Recommended HTML 4.01 1999
W3C Recommended XHTML 1.0 2000
HTML5 WHATWG First Public Draft 2008
HTML5 WHATWG Living Standard 2012
HTML5 W3C Final Recommendation 2014

Estructura básica 

<!DOCTYPE html> <!-- Define el tipo de documento para fines de interpretación del navegador. --> 

<html>
 <!-- Declara el uso de contenido HTML -->

    <head> <!-- Provee información sobre el documento HTML -->
        <meta charset="UTF-8"> <!-- Determina el tipo de lenguaje y caracteres 
                                    que se utilizarán dentro del documento -->

        <title>Page Title</title> <!-- Determina el titulo 
                                      que llevará el documento HTML --> 

    </head> <!-- Todas las etiquetas de contenido cierran con la utilización de la / al inicio -->

    <body> <!-- Define el contenido visible de la página web -->

        <h1>Ola ke ase?</h1> <!-- Determina el titulo en orden de relevancia 
                                         partiendo de h1 a h6 en donde h1 es el más relevante --> 

        <p>Hola Mundo</p> <!-- Se utiliza para definir párrafos de texto, el navegador 
                                 automáticamente añade espaciado entre elementos de este tipo -->

    </body> <!-- cierre de etiqueta -->
</html> <!-- cierra de etiqueta -->

Mejoras de HTML 5

Diseño semántico 

Semántica es el estudio del significado de las palabras o frases en un lenguaje. 

Diseño semántico 

Las nuevas etiquetas de HTML 5 describen claramente sus significados, tanto para el navegador como para el desarrollador.

No semánticas

  • <p>
  • <div>
  • <span>

Semánticas

  • <form>
  • <table>
  • <img>

¿Por qué implementarlas?

  • Con versiones anteriores de HTML cada elemento era definido por los desarrolladores.

  • Es imposible para los buscadores identificar de forma efectiva los contenidos.

  • La implementación de etiquetas semánticas vuelve el proceso más facil para todos.

Permitir que la información sea compartida y reutilizada entre aplicaciones, empresas y comunidades

Definición de Web semántica de la W3C

Media Tags

  • <audio>
  • <embed>
  • <source>
  • <track>
  • <video>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Estructura básica de una pagina web en HTML5</title>
</head>
<body>
        <header>
            <nav>
                <a href="#">Inicio</a>
                <a href="#">Nosotros</a>
            </nav>
        </header>
        <aside>
            <p>El contenido de aside es algo que no tiene gran relevancia en la pagina, 
             como un submenu, buscador, formulario de contacto etc...</p>
        </aside>
        <section>
            <p>un section es una manera de dividir la pagina por "secciones" de tal modo 
               que podemos separar el contenido  por temas</p>
            <article>
                <h1>El article es la parte mas importante del sitio</h1>
                <p>Básicamente en el article pondremos lo mas importante de la pagina, 
                   la información que en jerarquía es mas importante, un article puede tener header y footer, 
                   sin estropear el SEO.</p>
            </article>
        </section>
        <footer>
            <p>Derechos reservados</p>
            <p>Contáctenos en info@dominio.com</p>
</body>
</html>
Made with Slides.com