Algunos lo han aceptado, algunos lo han descartado por estar demasiado lejos en el futuro, y algunos han abandonado a un mal amigo en favor de un antiguo amor en preparación. Cualquiera que sea el lado del debate en que estés, probablemente habrás oído sobre el nuevo boom que es HTML5. Está en todas partes y está llegando fuerte, y deseas saber todo lo que puedas antes de que sea noticia vieja.
En este artículo, quiero compartir con ustedes algunos consejos y de HTML 5 para ayudar a aliviar el dolor inevitable que viene con la transición a una sintaxis ligeramente diferente.
Introducción
HTML 5 es considerado como la versión actualizada del estándar HTML. Actualmente está en fase de diseño. Por otra parte HTML5 es la siguiente generación del lenguaje web creada en la era de las aplicaciones web. HTML 5 es la versión preliminar de HTML con más increíbles características para mejorar la experiencia web de los diseñadores.
Elementos destacados usados en HTML5
Básicamente HTML5 utiliza las secuencias de comandos, lo que reduce los efectos de las aplicaciones dinámicas de Internet, tales como Flash Player y JavaFX.
1. Doctype
No hay la necesidad de escribir el DocType del xHtml tradicional en Html5:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Únicamente es necesario esto:
<!DOCTYPE html>
2. Figure
<img src="/images/dir" alt="About Website Image" /> <p>Image of Website. </p>
Desafortunadamente no hay una manera de asociar el epígrafe al tag <image>. Html5 soluciona este inconveniente con el tag <figure> en conjunto con el tag <figcaption>
<figure> <img src="path/to/image" alt="About image" /> <figcaption> <p>This is an image of something interesting. </p> </figcaption> </figure>
3. Redefinición de <small>
El tag <small> ha sido redefinido por Html5, ahora se hace referencia a impresiones pequeñas, como las que se usarian en el footer para los derechos de propiedad por ejemplo. El elemento <small> ahora se refiere a la “letra pequeña”.
4. No mas types para Scripts y Links
En Html5 ya no es necesario definir el atributo “type” para los elementos Script y Link.
<link rel="stylesheet" href="path/to/stylesheet.css" /> <script src="path/to/script.js"></script>
5. Vuelva su contenido editable
En las nuevas versiones de los navegadores, existe una característica llamada “contenteditable” el cual puede aplicarse a cualquier elemento html. Esta característica permite editar el contenido en tiempo de ejecución del navegador.
<h2>To-Do List</h2> <ul contenteditable="true"> <li>Break mechanical cab driver. </li> <li>Drive to abandoned factory</li> <li>Watch video of self </li> </ul>
6. Input para emails
En Html5, el elemento input adquiere un nuevo atributo denominado “email” obligando a qeu se ingrese un formato de email válido. Por defecto la validación del formulario estará soportado.
<form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type="email" /> <button type="submit"> Submit Form </button> </form>
Estructura semántica
A primera vista, con HTML5, los nuevos elementos han llamado la atención. La W3C realmente escuchó a la comunidad e hizo planes para el futuro al proyectar sobre la abundancia de los nuevos elementos disponibles. Existe todo tipo de elementos, desde los básicos estructurales como <header> y <footer> a otros como <canvas> y <audio> que aprovechan, lo que parece ser, una muy potente API que nos brinda la libertad para crear aplicaciones más fáciles de usar mientras más nos aleja de la dependencia de Flash para guardar los datos y la intensa animación.
Nuevos elementos estructurales
<header>
El elemento <header> contiene información introductoria de una sección o página. Esto puede incluir desde nuestros protocolos de los documentos normales (información de marca) a una tabla completa de contenidos.
<nav>
El elemento <nav> está reservado para una sección de un documento que contiene enlaces a otras páginas o enlaces a las secciones de la misma página. No todos los grupos de enlace deben estar contenidos dentro del elemento <nav>, simplemente principal de navegación.
<section>
El elemento <section> representa un documento genérico o de la sección de aplicaciones. Actúa de la misma manera un <div> hace por separación de una parte del documento
<article>
El elemento <article> representa una porción de una página que puede estar solo, tales como: una entrada de blog, una entrada del foro, el observaciones de un usuario o cualquier otro elemento independiente del contenido.
<aside>
<aside> representa el contenido relacionado con el área principal del documento. Esto se expresa generalmente en las barras laterales que contienen elementos como artículos de blogs relacionados, las nubes de etiquetas, etc También pueden ser usadas para las citas de extracción.
<footer>
El elemento <footer> es para marcar el pie de página, no sólo la página actual, pero cada sección que figura en la página. Por lo tanto, es muy probable utilizar el elemento <footer> varias veces en una sola página.
Por último, si quieren adentrarse más en HTML5, comparto con ustedes estos enlaces que hablan bastante de este tema.
interesante post… incluiria un tag que no usaste y es el de <menu> reservado principalmente para barras de navegación horizontales…
y sacar a considerar tambien que todo lo hecho con XHTML 1.0 y HTML 4.0 NO QUEDAN OBSOLETOS, todo es reutilizable… no tengan miedo muchachos
[...] | buenasideas Share this:TwitterFacebookMe gusta:Me gustaSé el primero en decir que te gusta esta [...]