Para dar un pequeńo abrebocas de lo que será mi nueva travesía a través de HTML5, dejar´ un listado con las etiquetas nuevas y las que se encuentran obsoletas, (utilizadas en HTML 4.1).
HTML5 representa un lenguaje de etiquetas mucho más semántico
Nuevas Etiquetas HTML5
| <!DOCTYPE html> | Realmente el DOCTYPE no es nuevo pero si cambia su implementacion (No se colocan los DTD Transitional, Frameset y Strict de HTML 4.1). simplemente se coloca <!DOCTYPE html> | |
|---|---|---|
| <header> | Define la seccion de la cabecera de la pagina, por ejemplo como cuando en HTML 4.1 creabamos el header para colocar el banner. | |
| <hgroup> | Permite contener un grupo de encabezados h1, h2, h3... h5 | |
| <nav> | Permite definir los links de navegacion de la pagina o tambien conocido como menú de navegacion :) | |
| <section> | Permite definir secciones en la pagina : por ejemplo el la seccion para el contenido principal, seccion de videos, seccion de registro de formularios, seccion de comentarios.. | |
| <article> | Esta etiqueta nos permite mostrar contenidos especificos dentro de una seccion, como por ejemplo articulos (Ahora en la era de los blogger), POST, la publicacion de los comentarios realizados... | |
| <aside> | Permite definir una sección con enlaces que apuntan a otras paginas y contenidos de menor relevancia a la pagina. Esto con el fin de no dańar el SEO | |
| <footer> | Permite definir toda la parte de derechos del autor, enlaces como terminos y condiciones, contactenos, etc.. | |
| <audio> | Permite reproducir audio, en formatos mp3, ogg, etc.. Esto depende del navegador | |
| <canvas> | Permite definir un area de dibujo vectorial, la cual debe ser utilizada con JavaScript | |
| <command> | Permite definir botones de comandos a partir de radiobutton, checkbox o botones. Actualmente Iexplore y Safari son los unicos que soportan este tag. | |
| <datalist> | Permite definir una lista autocompletable en un campo "input" del tipo "text", aunque actualmente solo es soportada en Opera :( | |
| <details> | Haciendo uso de la etiqueta <sumary>, pertime mostrar los detalles de un contenido solo con pulsar clic. Actualmente solo es soportada por Chrome | |
| <embed> | Permite embeber contenido como por ejemplo archivos .swf, o plug-ins. | |
| <figure> | Permite definir contenido por bloques como por ejemplo imagenes, diagramas, fotos, codigo, etc... | |
| <figcaption> | Este tag dentro de un tag <figure> permite colocar un titulo al contenido mostrado | |
| <progress> | Permite definir una barra de progreso, asi como cuando instalamos un programa que muestra el porcentaje que lleva. Actualmente solo esta soportado por Opera y Chrome | |
| <source> | Define la ruta de los archivos para utilizar en los tags <audio> y <video> | |
| <summary> | Se utiliza con el tag <details> y representa el encabezado del detalle mostrado Solo funciona con Chrome | |
| <time> | Para mantener un contenido mucho mas semantico en la Web, este tag es utilizado para guardar horas, fechas o ambos | |
| <video> | Permite reproducir video diferentes formatos.. Esto depende del navegador | |
| <wbr> | Cuando un texto es demasiado largo y no posee espacios, con el objetivo de evitar que se pierda el estilo, este tag permite definir un salto de linea en el texto si no alcanza a mostrarse completamente en una sola linea. | |
| <meter> | En una barra permite mostrar un indicador, por ejemplo un porcentaje, el tamańo usado en un disco, la importancia de una pregunta. Su visualizacion es similar a la del tag progress. Solo es soportado en Opera y Chrome. | |
| <keygen> | Esta fue una de las etiquetas que mas me sorprendio, pues permite definir un llave publica y una privada, para envio de formularios. Cuando se envia el formulario la llave privada se almacena localmente y la publica se envia al servidor. :) | |
| <mark> | Esta etiqueta tambien me parecio muy curiosa, pues permite resaltar el texto contenido en ella. Su color por defecto es amarillo. | |
| <output> | Permite representar el resultado de un calculo matematico. Actualmente es soportada solo en Opera |
Etiquetas no soportadas en HTML5, obsoletas o Jubiladas
| <strike> |
|---|
| <tt> |
| <u> |
| <xmp> |
| <font> |
| <frame> |
| <frameset> |
| <noframes> |
| <acronym> |
| <applet> |
| <basefont> |
| <dir> |
| <center> |
| <big> |
Nota : Para mayor Referencia consultar la Pagina oficial de W3C Schools
Ver ejemplo de Página usando HTML5
javascript:void(0)
Salu2
No hay comentarios:
Publicar un comentario