Guía básica de HTML 5 para diseñadores web

Escrito el 01 octubre 2009 por Sebastián Thüer

HTML 5 para diseñadores web

Hace 10 años que se actualizó por última vez el HTML con la especificación
4.01. Desde entonces, la web ha cambiado radicalmente como también lo ha
hecho el modo de diseñar y desarrollar páginas. Se han estandarizado una
serie de elementos como los encabezados o el menú, se utiliza Ajax para
recargar el contenido dinámicamente y todo el mundo usa CSS para definir los
atributos visuales de la página.
El nuevo HTML 5 intenta adaptarse al nuevo escenario y presenta elementos
para desarrollar páginas dándole un valor especial a la semántica, es decir, que
se pueda reconocer desde el propio código el tipo de contenido que se está
mostrando. Conviene recordar, que en sus orígenes el HTML no era más que
un lenguaje de etiquetas sencillo orientado a poner en líneas trabajos
académicos. Por eso, por ejemplo, tenemos seis niveles de títulos (<h1>,
<h2>… <h6>) que casi nadie usa en su totalidad.
El estado actual del HTML 5 es el de un borrador que está madurando. La
primera versión salió a la luz en enero de 2008 pero ha sido revisada varias
veces. Sin embargo, navegadores como Firefox 3.5 o Internet Explorer 8 ya
pueden interpretarlo y tienen soporte para las etiquetas y tecnologías que
vienen de la mano.
Las novedades
El borrador del HTML 5 es un documento complejo y extenso. Hice la prueba
de convertilo a PDF obtuve un documento de 1737 hojas tamaño A4. Sin
embargo, hay mucha información estrictamente técnica que no afecta al diseño
web como dice Eric Meyer . Por ejemplo, el cómo hacer un análsis sintáctico
(“parsear”) del componente tiempo o cómo moverse por el historial del
navegador.
En lo que es estrictamente diseño lo más importante son las etiquetas del
HTML 5. Pero antes avanzar conviene recordar que -como es habitual en el
W3C- se asegura la compatibilidad hacia atrás con lo cual podemos seguir
escribiendo en el viejo HTML 4 sin miedo porque los navegadores seguirán
mostrando correctamente las páginas. Sin embargo, profesionalmente nos
vamos a quedar atrás y en algún momento debemos encarar la transición.
Mejor hacerlo ahora.
Etiquetas que salen
Con la llegada del CSS muchas etiquetas del HTML que afectaban la
presentación de los elementos de pantalla cayeron en desuso. Ahora
definitivamente se eliminan. Todas pueden ser perfectamente reempalzadas
por atributos en las hojas de estilo.
El listado de etiquetas que caen en desuso -porque ya existe una forma de
hacer lo mismo con CSS- es el siguiente:
• FONT
• CENTER
• STRIKE
• BASEFONT
• BIG
• S
• STRIKE
• TT
• U
El HTML 5 elimina completamente el uso de frames (marcos) por razones de
usabilidad y accesibilidad. No ocurre lo mismo con el IFRAME que seguirá
siendo válido. Por lo tanto, las etiquetas vinculadas con los frames que
salen son:
• FRAME
• FAMESET
• NOFRAMES
Para terminar, encontramos etiquetas que ya no se usan porque creaban
confusión o hacían lo mismo que otras ya existes. Estas son:
• ACRONYM
• APPLET
• ISINDEX
• DIR
Etiquetas que entran
Como mencioné anteriormente, una prioridad del HTML 5 es darle valor
semántico al código para que se pueda reconocer fácilmente la función de los
elementos en una página. Por eso, aparecen muchos indicadores de secciones
y contenedores para tipos de contenido específicos.
Hay 22 nuevas etiquetas y son las siguientes:
1. SECTION
2. ARTICLE
3. ASIDE
4. HGROUP
5. HEADER
6. FOOTER
7. NAV
8. DIALOG
9. FIGURE
10. VIDEO
11. EMBED
12. MARK
13. PROGRESS
 14. METER
15. TIME
16. RUBY (RT y RP)
17. CANVAS
18. COMMAND
19. DETAILS
20. DATALIST
21. KEYGEN
22. OUTPUT
También tenemos etiquetas que soportan nuevos atributos. Por ejemplo,
anteriormente en INPUT solo podías escoger entre botones, casillas de
verificación, campos de texto o clave y pocas opciones más. Ahora tenemos
atributos específicos como SEARCH si se trata de un campo de búsqueda,
EMAIL si el usuario tiene que introducir un correo electrónico o DATE si es una
fecha. También aparece el atributo AUTOFOCUS para poder poner el foco de
un formulario en un lugar concreto sin tener que recurrir al JavaScript.
Primeros pasos con HTML 5
Voy a intentar explicar algunas de las nuevas etiquetas (las más importantes en
mi opinión) a través de un ejemplo práctico. Supongamos que tenemos un sitio
clásico formado por el encabezado, menú a la izquierda, contenido y pide de
página.
En HTML 4.01 hubiésemos usado algo así:

Esquema de una página en HTML 4

Mientras que en HTML 5 podemos hacer más explícito el contenido de cada
sección en lugar de usar identificadores para los DIVs.
Esquema de una página en HTML 5
Claramente podemos adivinar que HEADER sive para definir el encabezado
del sitio, NAV contiene los enlaces para navegar y FOOTER la información del
pie de página.
Luego aparecen una serie de etiquetas para especificar dentro del área de
contenido el tipo de información que agregamos. SECTION obviamente marca
el inicio y fin de una sección, ARTICLE sirve para indicar cada artículo (muy útil
en un blog, por ejemplo) mientras que FIGURE es usado para señalar que un
elemento se trata de una ilustración que acompaña un texto. Estos elementos
puede ser tanto una imagen, como un video o un audio.
Pasemos este esquema a código HTML 5:
HTML | copiar código | ?

01
02 <html>
03 <head>
04 <title>Mi Sitio </title>
05 </head>
06
07 <body>
08 <header>
09 <h1><ahref= “/home”>El nombre o título de mi Sitio</a></h1>
10 </header>
11
12 <nav>
13 <ul>
14 <li><h2>Sitio</h2>
15 <ul>
16 <li><ahref="/home/">Inicio</a></li>
17 <li><ahref=" /acerca">Acerca De</a></li>
18 <li><ahref="/contacto">Contacto</a></li>
19 </ul>
20 </li>
21 </ul>
22 </nav>
23
24 <section>
25 <article>
26 <h2><ahref="/html-5">Las novedades del HTML 5</a></h2>
<p>La nueva versión del lenguaje ya está aquí y llega con nuevos
27
cambios... </p>
28 </article>
29
30 <article>
31 <h2><ahref="/tutoriales-con-CSS">Tutoriales con CSS</a></h2>
<p>Nueva serie de tutoriales con CSS sobre la posiblidad de crear efectos
32
con nuestras imagenes...</p>
33 <figure>
34 <video src= “/video”></video>
35 <legend>Video explicativo sobre uso de CSS para efectos</legend>
36 </figure>
37 </article>
38
39 <nav>
40 <ahref="/blog/page/2/">Más articulos</a>
41 </nav>
42
43 </section>
44
45 <footer>
46 <p>Copyright 2009 por mi</p>
47 </footer>
48
49 </body>
50 </html>
51
Este ejemplo es muy simple pero sirve para analizar la estructura básica de
una página web en HTML 5. Como se puede ver, en este caso usé la etiqueta
FIGURE para insertar un video y que acompañé con LEGEND para agregarle
el epígrafe.
El HTML 5 también tiene etiquetas para tipos de contenidos muy específicos.
Muchas se pueden comprender fácilmente: TIME para mostrar la hora, DATE
para las fechas, AUDIO para insertar sonidos o METER para representar una
magnitud de medición (el espacio en el disco rígido, por ejemplo). Otras no lo
son tanto pero su uso es interesante. Un par de ejemplos
• ASIDE: Es para lo que en periodismo se llaman “apostillas”, esto es, una
información adicional sobre un tema pero que no hace al centro del a
cuestión. Como los recuadros que acompañan a veces la nota central de
una revista.
• PROGRESS: Para representar el avance de una tarea como puede ser
el proceso de registro o suscripción en una web.
El adiós a los plugins que no fue
Una de las propuestas más controvertidas del HTML 5 fue su intención de
trabajar con estándares abiertos para el tratamiento del contenido multimedia.
Hay que recodar que la llegada del video y la animación a la web fue de la
mano de estándares cerrados como Quick Time y Flash respectivamente.
La intención del W3C fue apostar fuerte por soluciones de código abierto como
OggTheora para manejar la reproducción multimedia. Sin embargo, las
presiones de la industria hicieron que la propuesta se retirara y aun no hay una
definición concreta a respecto.
Pero lo cierto es que las etiquetas OBJECT y EMBED que se utilizan para
agregar contenido multimedia con plugins siguen siendo soportadas. En el caso
de OBJECT desaparecen algunos atributos como ARCHIVE, CLASSID,
CODEBASE, CODETYPE, DECLARE y STANDBY. Estos atributos se pueden
mantener por razones de compatibilidad con HTML 4 pero no tienen función
alguna en la nueva versión. La etiqueta APPLET –usada casi exclusivamente
para embeber un programa en Java dentro de una página- no tuvo la misma
suerte y fue retirada.
Formularios más complejos
Uno de los aspectos en el cual el HTML 4 exhibe más limitaciones es la hora
de trabajar con formulario. Ahora el nuevo HTML 5 nos permite trabajar con
componentes específicos para algunos tipos de datos como fechas, un código
postal o una dirección de e-mail.
Por ejemplo, un formulario clásico donde pedimos al usuario su nombre, correo
y página web queda del siguiente modo:
HTML | copiar código | ?

1 <inputid="nombre"name="nombre"type="text"/>
2 <inputid="correo"name="correo"type="email"/>
3 <inputid="web"name="web"type="url"/>

Uno de los aspectos más interesantes de HTML con los formularios es que
podemos hacer validaciones de datos sin recurrir a JavaScript. Aunque ya
tenemos tipos de datos específicos como correo, fechas o teléfono siempre es
interesante verificar que el usuario realmente escribe datos de forma correcta
en los campos. Para realizar la validación empleamos el atributo PATTERN.
La validación se realiza con un método estándar como son las expresiones
regulares definidas en ECMAScript. No vamos a desarrollar acá el tema de
expresiones regulares pero veamos un ejemplo sencillo de cómo evitar que nos
metan código malicioso en un formulario:
HTML | copiar código | ?

1 <inputtitle="Por favor, no ingreses código en este campo"name="texto"/>

El soporte para formularios en HTML 5 funciona al 100% en Opera, mientras

que lo hace de forma parcial en Chrome y Safari. Sin embargo, podemos usar
Web Forms 2 para implementar sus características en otros navegadores.
HTML 5 avanzado
Además de nuevas etiquetas el HTML 5 también introduce una serie de
cambios que facilitan la creción de aplicaciones webs. La representación de un
documento se realiza a partir del DOM (DocumentObjectModel) y no de la
sintaxis del lenguaje. En palabras simples, es un nivel más abstracto que, por
ejemplo, permite que unapágina se pueda escribir tanto en HTML 5 como
XHTML 5: el resultado será el mismo. También afecta el modo en que los
objetos son recorridos desde JavaScript.
Otro aspecto interesante es el soporte para gráficos vectoriales escalables
(SVG). Permiten dibujar en pantalla sin tener que usar imágenes en mapa de
bits como sería un JPG, PNG o GIF. Del mismo modo que el CSS podemos
escribir el SVG en línea (dentro del código en la página) o vinculado a un
archivo externo. Empleando la etiqueta CANVAS y JavaScript también
podemos crear dibujos de forma dinámica o sobreponer elementos a un video.
Tanto el nuevo DOM como el uso de SVG son temas bastante complejos pero
creo que pronto comenzarán a hacerse más populares de la mano de
herramientas específicas que faciliten su desarrollo. Sin embargo, es
importante tomar nota de las nuevas posibilidades que esto abre para el diseño
web.
Conclusión
El HTML 5 trae bastantes novedades, muchas de ellas necesarias después de
10 años sin demasiados cambios. Nos guste o no, lo cierto es que HTML 5 se
terminará convirtiendo en un estándar para el desarrollo de páginas web.
No hay que perder de vista que el borrador que define las características del
HTML 5 es un documento en desarrollo que está sujeto a cambios. Una serie
de diseñadores influyentes como AaronGustafson, Eric Meyer y Jeffrey
Zeldman crearon HTML 5 SuperFriends para apoyar la dirección que está
tomando la nueva versión del lenguaje. Varias de sus sugerencias está siendo
incorporadas lo cual significa que el W3C realmente está escuchando la
opinión de los profesionales.
Un incentivo más para comenzar a estudiar, debatir y opinar.
Compartir:

•
 •

•
Etiquetas:Diseño Web, html5
13 Comentarios Sobre Este Post — Agregar tu comentario

1.
Marc
# 1 octubre 8th, 2009
Muy interesante el resumen, aunque si me permites un apunte, cualquier
elemento puede contener un href, como un li. El problema será solo de
retrocompatibilidad.

Seguiremos al loro a ver que massacais

2.
Sebastián Thüer
# 2 octubre 8th, 2009
@Marc: Exacto, el problema será como hacer que los viejos
navegadores puedan seguir mostrando una web en HTML5. Al final
parece que tendremos que hacer algo redundante al estilo:

<div id="nav">
<nav>
....
</nav>
</div>

Gracias por el apunte y el comentario. Un saludo.

3.
Pharpe
# 3 octubre 14th, 2009
Pues habrá que estar muy atentos a las novedades que seguirán
surgiendo, pero como resumen ha estado muy bien el post. Felicidades
Sebastián. Saludos
4.
Hola
# 4 noviembre 26th, 2009
Interesante sube más información.

5.
Hostper
# 5 noviembre 26th, 2009
Hola estuve revisando tu blog y me parece muy interesante y
entretendido, sobre todo que la información es detallada y precisa,
espero que sigas posteando más temas para informarnos y comentar.
Saludos.

6.
WebHostingPeru
# 6 noviembre 26th, 2009
Déjame felicitarte, que bueno que está tu blog los temas tienen la
información exacta que me interesa, sigue posteando más sobre estos
temas de color y diseño.
Felicidades.

7.
Sebastián Thüer
# 7 noviembre 26th, 2009
@hola, @hopster y @webHostingPeru: Gracias por los comentarios y
me alegro que la información sea de utilidad. Un saludo.

8.
Eduardo
# 8 mayo 29th, 2010
Si muy bueno, pero la mayoría de las webs que comenzaron a utilizar
esto, sus diseñadores no tienen en cuanta esta herramienta W3C. Las
mayorias de las paginas tiran error si no teneslal ultima version del
navegador. Creería que antes de implementar nuevas tecnicas, habria
que empezar a sabre como usarlas!!
9.
IDC Logic
# 9 junio 22nd, 2010
El HTML 5 es el futuro q ya está llegando. Ya lo dijo Steve Jobs (que
debe ser un futurólogo) “Flash tuvo su momento pero está quedándose
atrás y parece que ahora es el momento de HTML5″

10.
Sebastián Thüer
# 10 junio 24th, 2010
@IDC Logic: Sí, el HTML 5 es el futuro y hay mucho intereses entorno a
las tecnologías, estándares y protocolos con los cuales trabajará. Todas
las grandes empresas, desde Google hasta Apple, están moviendo sus

fichas a respecto. Saludos y gracias por tu comentario

11.
Posicionamiento Web
# 11 septiembre 12th, 2010
Muy interesante el artículo, es justo lo que estaba buscando. Sabes
donde puedo encontrar mas información sobre esto? Gracias por el post,
saludos.

12.
Sebastián Thüer
# 12 septiembre 14th, 2010

Gracias, estoy preparando un post con más info sobre HTML5

13.
CodigoCamaleon
# 13 octubre 28th, 2010
Parece que el principal problema con el que tenemos que lidiar es con el
molesto I6 ya que muchas personas aun empresas lo siguen usando
4 Referencias A Este Post
1. Bitacoras.com
octubre 1st, 2009
Información Bitacoras.com…
Valora en Bitacoras.com: No hay resumen disponible para esta
anotación…
2. Recopilación de todo lo que necesitas saber de HTML 5 | Algo de Geek
enero 9th, 2010
[...] Guía básica de HTML5 para diseñadores Web (Ver) [...]
3. HTML 5 |Novedades y Tutorial |
enero 10th, 2010
[...] Fuente [...]
4. Tutorial Html 5 - TecFull
febrero 25th, 2010
[...] Fuente [...]

Dejar una Respuesta

Principio del formulario

Nombre (required) E-mail (no será

publicado) (required) Web

Notificarme de nuevos comentarios por e-mail

Final del formulario
Suscripción
Principio del formulario

Recibir novedades por email

Final del formulario
 Suscripción RSS

Popular
1. Premio WorldPressPhoto 2010, las mejores fotografías periodísticas
2. Diseño web con HTML5: 10 recursos para comenzar ya
3. Mapa de los sitios de compra colectiva en Argentina
4. Primeras impresiones de Internet Explorer 9
5. Anatomía de una landing page perfecta [infografía]

Secciones
• Analytics
• Arte & Diseño
• Blog
• Destacado
• Diseño Web
• Educación
• Infografías
• Medios Sociales
• Photoshop
• Portfolio
• SEO & SEM
• Software
• Usabilidad
• Wordpress

• Inicio
• Archivo

• Suscripción por RSS

Powered by WordPress. Tema: Newport WordPress Theme (beta!).

2005-2011 El Blog de SebastianThüerbySebastián Thüerislicensedunder a

CreativeCommons Reconocimiento-No comercial 2.5 Argentina License.