1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Sí, POSH, como en la serie de Batman

POSH, HTML semántico

Sé que el término POSH suena extraño, a mi me recuerda a la serie de Batman (Adam West).

...El pingüino se cayó al suelo y POSH!...

Pero en HTML, POSH significa algo más interesante (aunque seguramente menos divertido) que esa serie.

POSH = Plain Old Semantic HTML.

Sí, HTML semántico, ese tipo de HTML que da gusto leer, el tipo de HTML que todos quisiéramos poder escribir...

Esta es una mirada rápida, aquí están las 5 cosas que un HTML necesita para ser POSH.

Sin orden en particular.

  1. Debe ser HTML válido
  2. No se deben usar elementos de presentación como <b> o <i>
  3. Todos los estilos deben darse usando CSS
  4. Todos los links deben apuntar a algún lado (nada de dejar el href="" vacío)
  5. Los atributos class e id deben describir el tipo de información que lleva el elemento y no cómo debería verse

Escribir HTML es fácil, escribir un HTML que valide es una ciencia, escribir un buen HTML es un arte.

EL buen HTML es un tema demasiado largo para un sólo post, pronto escribiré varios al respecto, esta es sólo la introducción al POSH.

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de JuanPablo JuanPablo

    "4. Todos los links deben apuntar a algún lado (nada de dejar el href="" vacío)"

    O peor: Tener javascript incrustado en el href. The horror ;)

  2. Avatar de Laren Laren

    6. Cada etiqueta debe ser usada para lo que fue creada.

    Asi evitamos el uso excesivo e innecesario de DIVs y SPANs(que tambien es codigo HTML valido) en casos como este:
    --
    "<span class="parrafo">Porque no usas P?</span>"
    "<span class="importante">Porque no usas la etiqueta strong?</span>"

  3. Avatar de Alvaro Pereyra (Yaraher) Alvaro Pereyra (Yaraher)

    De acuerdo con ésto. El problema tal vez es que muchos todavía dependen de una herramienta para escribir código por ellos, sin conocer la totalidad de etiquetas que poseemos en HTML/XHTML.

    ¿Cuándo fue la última vez que hemos usado cite, samp, abbr, code, acronym, etc.?

  4. Avatar de luizdev luizdev

    como dice en el psot de arriba la mayoria de diseñadores web desconocen en su totalidad las etiquetas HTML /XHTML
    uno de los mejores sitios que conosco son:

    http://htmldog.com/
    http://reference.sitepoint.com/
    los 2 tratan del uso correcto de las etiquetas html / css / javascript

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910