02/04/2014

HTML: la importancia del código semántico

HTML: la importancia del código semántico

El término «semántica» se refiere al significado de los signos lingüísticos, como símbolos, palabras, expresiones y representaciones formales. A través de los años, el lenguaje HTML fue volviéndose cada vez más semántico: sus etiquetas tienen un significado cada vez más importante. Que una etiqueta tenga significado no quiere decir que se refleja con un aspecto visual determinado en el navegador (algo que corresponde a las hojas de estilo en cascada), sino que define la naturaleza del contenido que debe incluirse en ella. Por ejemplo, tanto la etiqueta <em> como la etiqueta <i> hacen que el texto encerrado en ellas se vea con itálicas. Sin embargo, <i> solo influye en el aspecto visual de la tipografía, mientras que <em> (por emphasis), además de lograr ese efecto, indica que quisimos darle énfasis al texto. Por eso, <em> es una etiqueta más semántica que <i>.

Usar HTML semántico significa aplicar a cada parte del contenido la etiqueta más adecuada a su tipo. Por ejemplo, para los párrafos se usa <p> y para las listas, <ol> o <ul>. Adoptar esta práctica implica entender que HTML tiene que ver cada vez más con la estructura que con la presentación, por lo cual etiquetas como <i> (que es puramente de presentación) deben dejar de utilizarse.

De manera similar, la etiqueta <table> puede permitir diseñar una plantilla tan bien como (o en ocasiones mejor que) la etiqueta <div>. Pero, aunque el resultado visual sea el mismo, <table> solo es adecuada para presentar información tabular (por ejemplo, un cuadro de doble entrada). En cambio, etiquetas como <div>, <section>, <header> y <footer> se crearon específicamente para separar secciones dentro de una página, por lo que en este caso aportan semántica. Utilizar código semántico ofrece varias ventajas:

  • Posicionamiento en buscadores. Los motores de búsqueda analizan el código para saber qué clase de contenido muestran (y así, saber cómo mostrarlo). La semántica del código todavía puede ser un factor secundario, pero indudablemente es cada vez más importante.
  • Accesibilidad. Los lectores de pantalla para usuarios ciegos organizan la lectura del contenido de acuerdo con la estructura del código.
  • Practicidad. El código semántico es más fácil de entender y mantener.
  • Reusabilidad. La separación del contenido de la presentación permite que una página sea rediseñada cambiando sólo el CSS.

En la medida en que los desarrolladores mejoren el significado de su código avanzaremos hacia la Web Semántica, una era en la que el contenido esté tan bien etiquetado que los buscadores puedan encontrar exactamente lo que el usuario desea.

0

angularjs Aplicaciones en Facebook aplicaciones mobile behavioral targeting Botones Call-to-action breadcrumbs breadcrumbs web búsqueda de personal búsqueda facetada Call-to-action buttons Client-side cliente-destacado cms a medida coding comercio electrónico content marketing CSS3 PIE cuanto debe pesar un sitio data-driven web design Datos estructurados Defacement Denegación de servicio Desarrollar una aplicación web desventajas de PhoneGap diseñar newsletters diseño web diseño web argentina diseño web esqueuomórfico Diseño web responsive Diseño web responsivo diseño web santa fe diseño web Smart TV diseño web televisores DOM desde PHP enlaces rotos filtros de búsqueda flash flat web design formularios sitio web fragmentos enriquecidos función de autocompletar futuro de la realidad aumentada html HTML5 html5shiv inbound marketing Initializr interfaces Web para televisores javascript jobs jQuery Mobile Mapbox maquetado html/css maquetador web masonry layout menú de navegación menú desplegable Metodologías ágiles Modernizr MVC Navegación por teclado oferta laboral OpenStreetMap paginas de Facebook Paper js Paper js framework personas Phishing plan de QA Polyfills polymer portfolio-destacados portfolio-inicio programacion de CMS Programadores WordPress página de contacto página de error 404 que es Backbone.js Realidad aumentada Resultados instantáneos server-side skeuomorphic design sliders y usabilidad soporte Internet Explorer Storytelling Underscores usabilidad usabilidad buscadores user-centered design ux velocidad de carga web Vendor prefixes ventajas jQuery Mobile Ventanas integradas versiones antiguas de Internet Explorer WAI-ARIA web components web imprimible Web Semántica WordPress para ecommerce