Menú principal

Tema 6

Diseño estructural frente al diseño de presentación.

Debemos diferenciar entre el uos de la etiqueta <strong> en lugar de <b>, al igual que utilizar <em> en vez de <i>.

Se trata de anunar significado y estructura, en lugar de dar ordenes de presentación.

Esto es lo que dice el W3C acerca de <strong> y <em>como parte de la especificación de HTML 4.01 (www.w3.org/TR/html4/struct/text.html#h-9.2.1)

"Los elementos frasales añaden información estructural a los fragmentos de texto. Los significados habituales de los elementos frasales son los siguientes:

<em> indica énfasis
<strong> indica un énfasis más acentuado."

Por lo tanto, estamos hablando de dos niveles de énfasis. Por ejemplo, una palabra o frase que pretende ser destacada, o una que quiere ser más enfatizada dentro de un texto.

El W3C viene a decirnos lo siguiente:

"La presentación de los elementos frasales dependen del agente de usuario. Generalmente, los agentes visuales de usuario presentan el texto <em> en itálica y el <strong> en negrita. Los agentes sintetizadores de voz pueden cambiar los parámetros de volumen, tono y velocidad."

Esta última frase es importante ya que estos "lectores de pantalla" diferenciaran estos elementos.

Por lo tanto, si usamos <b> o <i> simplemente estamos usando instrucciones de presentación visual. Si nuestro objetivo es separa la estructura de la presentación lo máximo posible, estaremos en el camino correcto utilizando <strong> y <em>

Método A

Método B

Más elementos frasales (phrase elements)

<cite>: Contiene una cita o una referencia a otras fuentes.
<dfn>: Indica que lo que lo que contiene es una definición del término.
<code>: Designa un fragmento de código.
<samp>: Designa el resultado de una muestra procedentes de programas, scripts, etc.
<kbd>: Indica el texto que tiene que ser introducido por un usuario.
<var>: Indica la instacia de una variable o los argumentos de un programa.
<abbr>: Indica una forma abreviada (WWW, HTTP, URI, Mass, etc.)
<acronym>: Indica un acrónimo (WAC, radar, etc.)

<cite>

cite {
font-style: italic;
font-weight: bold;
color: red;
background-color: #ddd;
}

abbr, acronym {
border-bottom: 1px dotted;
cursor: help;
}