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>HTML 5
By mawetec
HTML 5
Introducción al desarrollo web con html 5 y css 3
