some image

Codes and Tags

HTML5 Lo nuevo y lo viejo

Etiquetas: Blog, Web No comments

Uno de los primeros lenguajes que toque en cuando conoci la WEB fue HTML (no es un lenguaje de programacion, pero si un lenguaje de marcas similar a XML, vale aclarar esto desde un principio). Hace poco comence a leer sobre HTML 5 y quede asombrado al ver la evolucion que ha tenido y lo mucho que promete, con sus nuevas etiquetas, facilidades para el manejo de audio, video, canvas sin depender de plugins, implementacion de CSS3 y la magia de las librerias de Javascript (El poder de frameworks como jQueryjQuery UISproutCoreSimpli5, etc..).

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>


About Edwin Torres

Related Posts

  • JavaScript 5
  • Logo HTML5

Add your comment