HTML 5
Enviado por Wittman • 25 de Septiembre de 2012 • Prácticas o problemas • 1.953 Palabras (8 Páginas) • 227 Visitas
Forma de Aplicar
El problema de ambos lados del argumento es que muy pocos sitios están utilizando HTML 5 en realidad, por lo que las soluciones teóricas a los problemas percibidos permanecen sin ser puestos a prueba.
Dicho lo cual, no es difícil ver ambos beneficios y posibles cuelgues con la próxima generación de herramientas de marcado web.
Contenido
• Lo que es diferente en HTML 5?
• Finalmente, un DOCTYPE que pueda recordarse
• Estructura semántica, por fin
• <header> <header>
• <nav> <nav>
• <section> <section>
• <article> <article>
• <aside> <aside>
• <footer> <footer>
• Poniendo todo junto
• Estilizando las nuevas etiquetas
• Compatibilidad con navegadores antiguos
• Bien, ahora puede usar HTML 5, pero debería?
1. Lo que es diferente del HTML 5?
En primer lugar, ¿qué queremos decir con HTML 5? Idealmente, nos referimos a un todo - nuevas etiquetas semánticas estructurales, las especificaciones de la API como lienzo o almacenamiento fuera e incluso algunas nuevas etiquetas semánticas en línea.Sin embargo, por razones prácticas (léase: problemas de soporte del navegador) vamos a limitar esta introducción sólo a las etiquetas estructurales. Tan frescos como lienzo, almacenamiento fuera de línea, video nativo o API's de geolocalización, estos no cuentan consistentemente con el soporte de todos los navegadores todavía.
"Pero espera," dices, "la mayoría de los navegadores no soportan ningún nuevo elemento estructural!" Esto es cierto, pero la gran mayoría de ellos estará feliz de aceptar cualquier etiqueta que desee maquillarlos. Incluso Internet Explorer 6 puede hacer frente a los nuevos elementos, sin embargo si desea aplicar estilos mediante CSS, necesitará un poco de ayuda de JavaScript.
Lo único a tener en mente cuando se están aplicando estilos a las nuevas etiquetas es que las etiquetas desconocidas no tienen estilo por defecto en la mayoría de los navegadores. También son tratadas como elementos en línea. Sin embargo, ya la mayoría de las nuevas etiquetas de HTML 5 son de carácter estructural, vamos a querer que se comporten como elementos de bloque. La solución es asegurarse de incluir display:block; en sus estilos CSS.
Para ayudar a dar algún sentido a lo que hay de nuevo en HTML 5 hoy, investiguemos y comencemos a utilizar algunos de los nuevos elementos estructurales.
2. Finalmente, un DOCTYPE que pueda recordarse
Lo primero que tenemos que hacer para crear un documento HTML 5 es usar un "DOCTYPE" nuevo. Ahora, si usted ha memorizado el código doctype de HTML o XHTML 1.x 4, es mejor "mono" que nosotros. Cada vez que comienzamos una nueva página tenemos que traer una vieja y cortar y pegar la definición DOCTYPE.
Es un dolor, razón por la cual amamos los nuevos DOCTYPE HTML 5. ¿Está usted listo? Aquí está:
1 <!DOCTYPE html>
No debería ser demasiado difícil meter este código a la memoria. Simple y obvio. Insensible a mayúsculas y minúsculas.
La idea es dejar de hacer versiones de HTML para que la compatibilidad hacia atrás sea más fácil. Sea o no exitoso en el largo plazo eso es otra historia, al menos mientras tanto le ahorra algo de tecleo.
3. Estructura semántica, por fin
OK, hemos definido nuestra página como un documento HTML 5. Hasta aquí todo bien. Ahora, ¿qué son essas nuevas etiquetas de las que hemos estado oyendo?
Antes de sumergirnos en las nuevas etiquetas, tenga en cuenta la estructura de su página web promedio, que (en general) se ve como esta:
01 <html>
02
03 <head>
04
05 ...stuff...
06
07 </head>
08
09 <body>
10
11
12
13 <div id="header">
14
15 <h1>My Site</h1>
16
17 </div>
18
19 <div id="nav">
20
21 <ul>
22
23
24
25 <li>Home</li>
26
27 <li>About</li>
28
29 <li>Contact</li>
30
31 </ul>
32
33
34
35 </div>
36
37 <div id=content>
38
39 <h1>My Article</h1>
40
41 <p>...</p>
42
43 </div>
44
45
46
...