Novedades de HTML 5

Trabajando con algunas de las “novedades” de HMTL 5, he pensado en recopilar en un post estas sencillas novedades para que podáis incorporarlas a vuestros proyectos, espero que os guste.

1. Comienzo de la pagina. El Doctype

Podemos cambiar el tradicional doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Por el nuevo doctype de HTML5:

<!DOCTYPE html>


2. El atributo type desaparece de script y link

Antes usabamos:

	<link href="miestilo.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="includes.js"></script>

y ahora podemos usar:

	<link href="miestilo.css" rel="stylesheet" /><script type="text/javascript" src="includes.js"></script>

3. Uso de las comillas en HTML5
Ya no es necesario que los atributos de los elementos esten entre comillas, ahora es posible utilizar:


Lorem ipsum dolor sit amet

En vez de


Lorem ipsum dolor sit amet

4. En este caso es una NUEVA FUNCIÓN DE HTML 5: Contenidos editables


Contenido editable aqui

content_editable

5. Más novedades: Placeholders
Este texto que está dentro de un campo cuando no se encuentra activo y al colocarte sobre el y comenzar a escribir desparece, eso es un Placeholder y es posible insertarlo con HTML 5, del siguiente modo:

<input type="text" name="username" placeholder="Ingrese su username" />

placeholder

6. Autofocus para el campo deseado

<input type="text" autofocus="" />
<button>Buscar</button>

autofocus

7. Validación nativa para los campos obligatorios

</pre>
<form action="" method="post"><input type="text" required="" />
 <button>Enviar</button></form>
<pre>

required

8. Campos de formulario con tipos específicos
Declarando el type es posible indicar los únicos valores que se podrán introducir: fechas, números, url, emails..

Para ello, utilizaremos:

</pre>
<form><input type="number" />
 <input type="date" />
 <input type="url" />
 <input type="email" />
 <button type="submit">Enviar</button></form>
<pre>

Espero que os haya gustado, proximamente prepararé un post con algunas de las novedades para el tratamiento y formateo de textos en HMTL 5.



 Google+

Acerca de Patricia Juberias

https://patyjg.wordpress.com

Publicado el 18 abril, 2013 en Creación y diseño web, DISEÑO Y NUEVAS TECNOLOGIAS, Tutoriales, WP GENERAL y etiquetado en , , , , . Guarda el enlace permanente. Deja un comentario.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: