5. Elementos
Nuevo Doctype <Script>,<Ink> más simples Las Comillas en HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Ya no es necesario usar el atributo Type Ya no es necesario declarar atributos entre
1.0 Transitional//EN" cuando llamas archivos .CSS ó .JS comillas
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- <link rel="stylesheet" href="estilos.css"
transitional.dtd"> type="text/css" /> <p class=parrafo id=contenido>Lorem
<!DOCTYPE <script type="text/javascript" ipsum dolor sit amet</p>
html> src="funciones.js"></script>
Aún es necesario declarar rel en caso de los
estilos
<link rel="stylesheet" href="estilos.css" />
<script src="funciones.js"></script>
Placeholders en campos
Elementos mas semánticos Contenido Editabe
<header> Un place holder de Texto ya existe en
es el texto que
Se puede lograr el cambio que cualquier un campo de texto cuando no estan
<div class="header">
elemento que contenga textos sea editable activos, antes era necesario usar Javascript
</div> < /
desde el navegador para lograr esto, ahora casi todos los
header> <p contenteditable="true">
<div class="nav"> <nav> navegodores soportan esto nativamente
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
con HTML5.
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
</nav> dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <input name="username" type="text"
<div class="content"> <section> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. placeholder="Ingrese su username" />
</div>
< / </p.>
<div class="sidebar"> section>
</div> <aside>
</aside>
6. Autofocus Tipos especificos de campos
Validación Nativa
de Formulario
En HTML5 podemos declarar un atributo required Esta facultad hace que al cargar la página, Si decalramos type= “number” a un campo
en los campos el foco del usuario se concentre en el de texto este solo permitira el ingreso de
del formulario que sean obligatorios de rellenar. campo deseado. numeros
< f o r m
method="post" <input type="text"
autofocus> <form>
action="">
<button>Buscar</button> <input type="number" />
<input
<button
type="text"
type="submit">Enviar</
required>
button>
<button>Envi
</form>
ar</button>
</form>
Lo mismo para fechas
<form>
<input type="date" />
<button
type="submit">Enviar</
button>
</form>
7. Canvas
Sin duda alguna uno de los elementos mas interesantes de HTML5, CANVAS
es un plano vacio donde podemos dibujar graficos con la ayuda de JavaScript
<!DOCTYPE html>
<html>
<body>
<canvas id="micanvas">Tu navegador no soporta canvas</
canvas>
<script type="text/javascript">
var canvas=document.getElementById('micanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#b8dc69';
ctx.fillRect(0,0,200,200);
</script>
</body>
</html>
9. Elementos <canvas> poniendo
Continuo Progreso Síntaxis Simplificada
en su lugar a flash
Si bien esta claro el hecho de tener una web La declaración de tipo de documento de
maquetada en HTML4 nos permite contar con un forma más sencilla es sólo una de las HTML5 trata a Flash; pero es cierto que
estándar de soluciones ya que HTML4 tiene a muchas novedades de HTML5. Ahora solo para todos los demás usuarios que
diferencia de HTML5 que esta aún en proceso tienes que escribir solamente: <DOCTYPE estamos cansados de los vídeos en flash
experimental y de desarrollo, es muy probable HTML!>. La sintaxis de HTML5 es que tardan años en cargarse y funcionar, el
que muchas cosas sigan cambiando con el compatible conHTML4 y XHTML1, pero no nuevo elemento <canvas> y su utilidad
tiempo, y generando algunas dificultades, con SGML. para la representación de gráficos es un
situación a la que ya no esta sujeto ningún sueño hecho realidad.
producto web hecho en HTML4
Aunque es cierto que hasta hoy el
elemento <canvas> no ofrece todas las
ventajas de Flash hay mucho que hace
suponer que se acerca el día en que esta
herramienta quede obsoleta ante el
potencial de HTML5 y su magnifica
Nuevos elementos <header> Nuevos elementos <section> integración.
<footer> <article> Nuevos elementos <menu>
HTML5 esta desarrollado con la intención de
reflejar mejor la nueva anatomía de los sitios web.
Al igual que los elementos <header> y
<footer>, el <section> y <article> en <figure>
HTML5 permitirá a los desarrolladores El elemento nuevo <menu> puede ser
Es por eso que hay algunos elementos nuevos,
marcar estas áreas de la página como tal. utilizado no solo para los menús
como <header> y <footer>, que están diseñados
convencionales, sino también para las barras
específicamente para marcar estas partes de la
Además de hacer el código más estructurado, de herramientas y menús contextuales.
web.
este también tendrá un efecto positivo en tus Del mismo modo, el elemento <figure> es
esfuerzos de SEO ya que para los motores de una forma adicional útil para organizar el
Con este desarrollo en el lenguaje ya no es
búsqueda será más fácil el ranking de tu texto y las imágenes en tu página.
necesario identificar a estos dos elementos con la
página.
etiqueta <div>.
10. Nuevos elementos de Un nuevo nivel de Formas
<audio> y <video>
<form> y <forminput> vivieron una gran
Son probablemente dos de las novedades más cantidad de revisiones y ahora tienen
útiles para HTML5. Como su nombre indica, se muchos atributos nuevos (y los
utilizan para insertar archivos de audio y vídeo. modificados, también). Si estás usando con
frecuencia las formas tomate un tiempo
También hay algunos nuevos elementos para revisar las novedades con más detalle.
multimedia y atributos, tales como <track>, que
ofrece pistas de texto para el elemento de vídeo.
Eliminación <b> y <font> Eliminación <frame> <center> y <big>
Etiquetas poco utilizadas, que benefician al
Las directrices oficiales indican que estos
tener menos nomenclatura inútil.
elementos se manejan mejor en CSS.
18. Ningún navegador es 100% compatible
aún, por lo cual se realizó una prueba en la
página: http://www.html5test.com evaluando
400 puntos de compatibilidad, estos son los
resultados:
Chrome14.0: 340
Safari 6.0: 376
Mozilla Firefox 7.0: 313
Internet Explorer: 32
19. En la página alfamedia web, especializada en Desarrollo y consultaría
para Web, realizaron también otras pruebas.
1.
Google Chrome 328 pts.
2.
Firefox 286 pts
3.
Opera 278 pts
4.
Safari 253 pts
5.
Internet Explorer 141 pts
