Consejos para la Web de Dan:

Markup (Etiquetas) Físico vs. Lógico

 

CONSEJO: Conozca la diferencia entre las etiquetas HTML físicas (visuales) y las lógicas (estructurales), y cuándo usar una u otra.

Hay dos tipos básicos de etiquetas HTML. Las etiquetas lógicas representan la estructura y el significado de un documento, con sólo representaciones sugeridas para su apariencia que pueden o no ser seguidas por varios navegadores bajo varias configuraciones de sistema. Las etiquetas físicas representan efectos visuales específicos que se pretende reproducir de forma precisa, y no tienen connotación alguna en cuanto a su significado semántico.

La implementación original de HTML contenía casi por completo etiquetas lógicas, de acuerdo con la filosofía de HTML de que se trataba de un lenguaje estructural y no de una descripción del diseño de la pantalla. Unas pocas etiquetas físicas se deslizaron incluso en ese entonces (como <B> para el texto en negrita). Como el HTML fue aumentado por los creadores de navegadores Netscape y Microsoft, se agregó un gran número de etiquetas físicas, con muy poco aumento del conjunto de etiquetas lógicas. El HTML

4.0, y ahora el HTML 5.0 en desarrollo, intenta remediar este equilibrio introduciendo nuevas etiquetas lógicas y declarando algunos de los tags y atributos físicos como "obsoletos" en favor de las hojas de estilo.

Los asesores de estilo HTML han dado consejos variados y contradictorios sobre si preferir el uso de etiquetas lógicas o físicas. Los puristas de línea dura pueden decir que usen sólo etiquetas lógicas en todo momento, mientras que algunos diseñadores gráficos abogan por usar sólo etiquetas físicas (porque las lógicas tienen la tendencia, angustiante para los de una mentalidad visual, a ser representadas de maneras muy diversas). No sigo ninguno de los dos estándares rígidos; más bien, apoyo el uso de cualquier etiqueta que tenga sentido para la aplicación en particular. Hoy en día, este tipo de conflictos no estallan tanto, ya que muchas de las nuevas generaciones de desarrolladores, ya sea con orientación lógica o gráfica, han aprendido a usar hojas de estilo en cascadas para mantener el HTML limpio y simple, y la presentación separada en la hoja de estilo.

Cuándo utilizar la marcación lógica

Trate de usar las construcciones lógicas siempre que se ajusten al significado que está tratando de transmitir. Cuando quieres un encabezado en la parte superior de una página, la etiqueta <H1> es una buena opción. La alternativa de usar una etiqueta física <FONT SIZE="+3"> tiene el efecto negativo de no connotar lógicamente un encabezado; cualquier programa que intente crear un esquema estructural de su documento a partir de sus encabezados se verá frustrado cuando no los marque como tales. Un navegador en modo texto como Lynx, y un programa de lectura para ciegos, puede tener su propia manera de señalar un encabezado al usuario, y esto no funcionará en su documento cuando usted lo indique con un cambio de fuente que no tenga sentido en estos otros dispositivos.

Hay una serie de etiquetas lógicas que tienen significados específicos que pueden serle útiles.

<CITE> se utiliza para rodear el título de una obra citada (normalmente en cursiva). <EM> designa el texto enfatizado, y <STRONG> designa el énfasis fuerte, generalmente en cursiva y negrita respectivamente. La ventaja de utilizar las etiquetas lógicas en lugar de las físicas en estos casos es que su significado se transmite con mayor precisión. El hecho de que los navegadores del mercado masivo no hagan nada con estas distinciones en este momento no es razón para dejarlas pasar; otros programas pueden seguir aprovechándolas a la hora de indexarlas o abstraer sus documentos. Sin mencionar las hojas de estilo: Un sitio lleno de marcado físico codificado será mucho más difícil de convertir al uso de hojas de estilo que un sitio con una estructura lógica simple y limpia.

Si sales de la mentalidad de artista gráfico que exige un control perfecto de los píxeles del renderizado de tu sitio, serás capaz de transmitir el significado de tu sitio de una manera sensible e independiente de la plataforma. Trate de no derrotar la lógica del HTML evitando las etiquetas lógicas sólo porque no le gusta cómo se ven algunas de ellas en algunos navegadores. Por ejemplo, a algunos diseñadores no les gusta cómo se representan los párrafos, por lo que utilizan un salto de línea seguido de un gráfico vacío para sangrar la siguiente línea. Este tipo de cosas generalmente no es una buena idea, ya que es probable que se degrade mal en diferentes entornos (por ejemplo, navegación de sólo texto) y oscurezca la estructura de su documento para indexar robots. Aprenda a utilizar las hojas de estilo y podrá definir el aspecto de los elementos lógicos de sus páginas de una forma mucho más flexible que con el marcado físico.

Cuándo utilizar el marcado físico

Cuando se desea lograr efectos visuales particulares que no encajan en los significados estructurales de las distintas etiquetas lógicas, entonces las etiquetas físicas son una mejor manera de hacerlo que el abuso de las etiquetas lógicas para significados no deseados. Por lo tanto, si decide poner en negrita todo el texto de su cuerpo sólo porque le parezca mejor de esa manera, use la etiqueta <B> en lugar de la etiqueta <STRONG> ya que "énfasis fuerte" no es la connotación semántica aquí. La apariencia en los navegadores del mercado masivo será la misma, pero quizás ha salvado a una persona ciega que usa un navegador de audio de escuchar todo su documento en un tono de voz fuerte (una representación apropiada para un énfasis fuerte, pero no una representación apropiada para el efecto puramente visual de la negrita). Si desea que todo el texto tenga una fuente más grande, utilice <FONT SIZE="+1"> en lugar de <H4>, ya que no quiere decir que todo el texto sea realmente un "encabezado".

CONSEJO: No utilice <UL> para sangrar un bloque de texto, u otros usos de etiquetas lógicas de manera ilógica.

No use mal las etiquetas lógicas. Tenga en cuenta sus significados reales, no sólo sus efectos visuales en su navegador particular (que pueden variar en otros navegadores). El significado de <UL> no es "sangrar este texto"; significa "lo que sigue es una lista no numerada", y el hecho de que algunos navegadores lo sangren es incidental. (¡Las primeras versiones de WebTV no sangraban <UL> listas!) Según las especificaciones HTML, el único contenido adecuado para una lista <UL> son los elementos <LI>, por lo que la representación de las listas que no siguen esta sintaxis no está definida; un navegador que cumpla con los estándares podría descartar todo el contenido de esa sección de su documento. Es una mala forma de confiar en el comportamiento de algunos navegadores que va en contra del significado lógico de una etiqueta. Acabará confundiendo a cualquier software que realmente intente interpretar el significado de su documento en lugar de sólo su apariencia, y le será difícil convertir sus documentos para nuevas innovaciones como hojas de estilo.

Desafortunadamente, aquellos de ustedes que usan editores WYSIWYG como DreamWeaver, o dejan que otros programas como Microsoft Word o Microsoft Publisher extrudan HTML, probablemente no tienen idea si estos programas están generando etiquetas físicas, etiquetas lógicas correctamente usadas, o etiquetas lógicas abusadas. Lo más probable es que el código que genera un editor de este tipo no sea muy bueno como una representación lógica de su contenido, ya que se está generando de acuerdo con un diseño gráfico en lugar de una estructura lógica. ¡Razón de más para aprender sintaxis HTML y escribir sus páginas a mano en un editor ASCII!

Elementos personalizados

El artículo anterior fue escrito originalmente en los años 90, con algunas revisiones y actualizaciones parciales más tarde. El más moderno HTML 5 Web (a partir de 2015) ahora ofrece aún más oportunidades para utilizar identificadores lógicos en la Web. Las Hojas de Estilo en Cascadas  le han permitido durante mucho tiempo adjuntar diferentes estilos a cosas lógicamente nombradas mediante el uso de los atributos "class" e "id", pero ahora puede incluso definir sus propios elementos HTML personalizados, que pueden obtener su estilo de las hojas de estilo. Sólo se requiere que los nuevos elementos se nombren con un guion para no entrar en conflicto con las etiquetas HTML "estándar" actuales y futuras.

Enlaces

Una introducción detallada a los elementos personalizados

David Siegel, el autor de Creating Killer Web Sites, entiende la distinción entre etiquetas físicas y lógicas, pero debido a su mentalidad orientada al diseño gráfico, aboga por el uso de las primeras donde yo apoyaría a las segundas. La suya fue una de las explicaciones mejor presentadas del punto de vista opuesto desde el mío, pero actualmente el sitio "KillerSites" parece estar dirigido por otra persona y ya no tiene toda la lógica de la defensa hostil que alguna vez tuvo.

 

webmaster@webtips.dan.info

Translated by Rutherd Barn
Read the original page here.