HTML 5
Enviado por Wittman • 25 de Septiembre de 2012 • Práctica o problema • 1.953 Palabras (8 Páginas) • 247 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
47 <div id="footer">
48
49 <p>...</p>
50
51 </div>
52
53 </body>
54
55 </html>
Eso está bien para fines de presentación, pero lo que si queremos saber algo acerca de lo que contienen los elementos de página?
En el ejemplo anterior, hemos añadido identificadores a nuestras divs estructurales. Esta es una práctica bastante común entre los diseñadores experimentados. El objetivo es doble - en primer lugar, los identificadores proporcionan ganchos que pueden ser utilizados para aplicar estilos a secciones específicas de la página y en segundo lugar, los identificadores sirven como una estructura primitiva, pseudo-semántica. Los programas inteligentes de análisis verán los atributos de los identificadores en una etiqueta y trataran de adivinar lo que quieren decir, pero es difícil cuando los nombres de identificación son diferentes en cada sitio.
Y ahí es donde vienen las nuevas etiquetas estructurales.
Reconociendo que estos identificadores eran una práctica común, los autores de HTML 5 han dado un paso adelante y puesto algunos de estos elementos en sus propias etiquetas. Aquí está una rápida descripción de las nuevas etiquetas estructurales presentes en HTML 5:
<header>
La etiqueta de cabecera está pensada como un contenedor de información introductoria, sobre una sección o una página web entera. La etiqueta <header> puede incluir desde el típico logotipo / eslogan que se ve encima de la mayoría de páginas, a un titular que introduce una sección. Si usted ha estado usando <div id="header"> en sus páginas, esa sería la etiqueta a reemplazar con <header>.
<nav>
El
...