Métodos para validar código HTML5 y CSS3

Validar código es importante para buenas prácticas para el desarrollo de páginas web y el comienzo de eliminar errores de código. Aunque la validación no garantiza que tu página tenga un aspecto o comportamiento que esperas, garantiza que cualquier comportamiento inesperado no sea debido a una etiqueta mal cerrada o …

Comprobar compatbilidad HTML5 y CSS3 con Modernizr

HTML5 viene con tecnologías que se pueden sacar provecho, pero no todos los navegadores son 100% compatibles. En esos casos por lo menos sería adecuado advertir de que el navegador que usa el usuario no soporta HTML5. Por ello usaremos Modernizr. Modernizr es una librería de JavaScript que permite detectar …

Atributo contenteditable para hacer una página editable

Una de las características de HTML5 es que permite a los usuarios editar contenido directamente en el navegador. Este posta explicará como crear una página editable. El atributo contenteditable permite modificar todo el contenido que tenga el elemento contenedor.

Ejemplo de contenteditable

Insertar imágenes con pie mediante figure y figcaption

Es probable que en una página quieras meter una imagen y que esta tenga un pie de foto. En HTML5 hay 2 elementos que permiten esto, figure y figcaption. Tanto la ilustración como el figcaption están dentro del elemento figure. En mi caso uso una imagen de unos 400px.

HTML5: Diferencias entre section y article

En HTML5 es un problema común no saber cuando usar el elemento section y article. En este post trataré de explicar cuando se debería usar cada elemento. Elemento article Puede considerarse una forma especializada o específica de <section>. Su finalidad es almacenar contenido que podría estar solo, fuera del contenido …

Introducir fechas y horas con inputs en HTML5

Este post habla del uso de los inputs para introducir fechas y horas en un formulario de HTML5. Hay una gran variedad de tipos que siguen el formato ISO 8601. Tipos de inputs date – Se compone sólo de una fecha (año, mes y día). Ejemplo 2010-05-30. month – Solo incluye …

Input number en HTML5

El input number es para los nuevos formularios en HTML5. Sólo permite números y se puede introducir el valor o usar los botones para aumentarlo o disminuirlo. Sin embargo, en pantallas táctiles mostrará sólo el pad numérico.

Resultado del código El input number puede usar los atributos max y min para …

Input url en HTML5

Es posible que vuestro sitio web se registre gente y puede llegar a tener un perfil en una red social o incluso una web. Por ello voy hablar del input url HTML5. Este input se muestra como un campo de texto normal, pero en pantallas tácticles, el teclado mostrará directamente …