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 …
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 …
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.
|
1 2 3 4 5 |
<article contenteditable> <h2>Ejemplo de página editable</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lectus diam, lacinia vel imperdiet vitae, elementum id felis.</p> </article> |
Ejemplo de contenteditable
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.
|
1 2 3 4 |
<figure> <img src="post-its.jpg" alt="Monton de post-its" /> <figcaption>Esta es una foto con todos los post-it de tareas pendientes.</figcaption> </figure> |
…
Un problema que puede surgirte es que estás escribiendo un texto y en un momento usas un acrónimo o abrevación y buscas una forma de proporcionar al usuario una forma más llamativa para mostrarle la definición. Para salir de dicho aprieto puedes usar el elemento abbr.
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 …
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 …
Este tipo de input muestra una barra de desplazamiento o slider que permite asignar un número. Como el input type number permite los atributos min, max y step. La diferencia entre un input number y un input range es que el range se suele utilizar para cuando no es importante obtener …
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.
|
1 2 3 4 5 |
<form> <label for="edad">Edad: </label> <input type="number" min="18" max="65" name="edad" id="edad"> <input type="submit" value="Validar"> </form> |
Resultado del código El input number puede usar los atributos max y min para …
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 …