Texto en un sitio Web - Diferencias tags strong, em, b, i, u

Antes o después, todo creador Web descubre que diseñar para la red es muy distinto a desarrollar algo que va a ser impreso.

Antes de liberar a su creador gráfico de páginas Web interior, deberá superar unos cuantos obstáculos conceptuales.

Consideremos la diferencia entre una página hecha con HTML y una generada en un procesador de texto.

Estos programas muestran el aspecto exacto del documento antes de imprimirlo, sabe qué tamaño tendrán los encabezados, qué fuente usan , si el texto envuelve de una línea a otra, etc.  Si ve algo que no le gusta, lo cambia mediante los menús y comandos de formato.

El procesador de texto, en otras palabras, le ofrece un control absoluto sobre cada detalle de su página.

La Web es un lugar más libre. Al crear un documento HTML no tiene ni idea de cómo se verá esa página en el ordenador de otro.

Esa persona puede tener su navegador configurado para no mostrar imágenes, o enseñar caracteres de tamaño grande en lugar de hacerlo con dimensiones estándar, o puede haber reducido la ventana y haberla colocado en una esquina de su escritorio.

Además, los visitantes que acceden a su sitio mediante teléfonos obtendrán otra visualización (y completamente distinta). En resumen, no puede controlar los detalles de presentación en la Web de la manera en que puede hacerlo en un formato impreso.

Sin embargo, es posible ofrecer toda la información  que un navegador Web necesita para presentar sus páginas adecuadamente.

Esto se hace estructurando las páginas de modo que los navegadores traten los elementos de la página de forma coherente, independientemente de la configuración del navegador de sus visitantes.

Estructura lógica frente a formato físico

Antes de comenzar a crear páginas Web con marcado HTML, deberá comprender otro concepto: la diferencia entre estructurar un documento (dividir su contenido en componentes distintos como encabezados, párrafos, listas, etc.) y darle formato (hacer que esos elementos sean atractivos aplicando cursivas, cambiando el tamaño de texto, añadiendo color, etc.)

Los administradores Web novatos que no entienden esta diferencia a menudo terminan dando formato cuando deberían estar estructurando, lo que resulta en páginas desordenadas y un HTML complicado de mantener.

En los inicios de la Web, este lenguaje usaba dos tipos de elementos para enfatizar la diferencia entre la estructura del documento y su formato:

• Elementos lógicos: En ocasiones llamados semánticos, definen los componentes individuales que forman la página Web. Identifican  lo que es un encabezado, un párrafo, una lista, etc. En otras palabras nos habla sobre la estructura de la página. Los elementos lógicos, sin embargo, no definen el formato de estos componentes (qué apariencia tendrán en la pantalla).
• Elementos físicos: En ocasiones llamados tipográficos, tratan sobre el formato. Algunos ejemplos incluyen elementos que aplican al texto cursiva, negrita, subrayado y distintas fuentes. No nos dicen nada sobre la manera en la que la página está estructurada; en su lugar, indican a los navegadores cómo dar formato al contenido.

Los elementos lógicos han dominado el marcado HTML desde que se inventó XHTML 1.0 reforzó su dominio y eliminó muchos de sus elementos físicos (como <font> para cambiar el tipo de letra y <u> para subrayar texto.)

HTML5 va un paso más allá; cambia la definición de dos elementos físicos que los programadores Web más tozudos no querían abandonar: <b> y <i>. Ahora, <b> ya no significa texto en negrita, sino texto desplazado estáticamente, e <i> ya no hace mención al texto en cursiva, sino texto en voz alternativa, como palabras extranjeras o términos técnicos.

Evidentemente, los navegadores Web no se ven afectados

Siempre muestran texto <b> en negrita y texto <i> en cursiva, a menos que use una hoja de estilo que indique lo contrario.

Pero el cambio de definición refuerza una modificación fundamental en la forma de pensar: los elementos HTML deben escribir la función lógica de las partes textuales, no su presentación tipográfica.

Seguramente se pregunte por qué los gurús de HTML tenían tanto interés en eliminar el formato de los documentos HTML. Veamos algunos motivos:

• El formato incrustado es problemático: Tras ver el marcado de una página HTML, no querrá dar marcha atrás. Para facilitar los cambios tendrá que abrirse paso entre las etiquetas de formato que controlan márgenes, colores, fuentes y alineación.
• Los documentos lógicos son adaptables: Al eliminar el formato de una página, aumenta su flexibilidad. Puede usar hojas de estilo para alterar el aspecto de su página Web y modificarlas cuando desee. Si tiene que mostrar la página Web de otra forma en otro dispositivo diferentes (o navegador), también es posible hacerlo.
• Los documentos lógicos transmiten significado: Los elementos lógicos permiten que los programas externos analicen el HTML de una página. Por ejemplo, alguien podría crear un programa de búsqueda automática que analizara páginas Web y extrajera solo los encabezados de nivel superior para elaborar un minimalista resumen de página. Un programa podría buscar en Amazon.com para encontrar sólo reseñas de libros. alguien podría realizar una lista de correo basura leyendo elementos <address>. Un programa comparable que se encontrara solo con elementos físicos no produciría resultados tan interesantes.
• Los documentos lógicos son accesibles: El software de lectura de pantalla y otras herramientas automáticas funcionan mucho mejor con las páginas estructuradas de manera lógica. Por ejemplo, un lector de pantalla puede guiar a una persona ciega por la página anunciando títulos o enlaces, sin necesidad de leerlo todo en voz alta.

NOTA:
La visión de una Web en la que los elementos indican qué contiene una página (precios, tallas, direcciones de correo, etc.) en lugar de qué aspecto tiene, se llama Web semántica. Según los visionarios que construyeron Internet, ésta podría conducir a una edad de oro del acceso a la información y a las búsquedas superinteligentes.