Valor semántico del lapso

https://stackoverflow.com/questions/278914

07-07-2019
|

Pregunta

El elemento span parece ser exactamente como un div, pero a nivel de línea en lugar de a nivel de bloque. Sin embargo, no puedo pensar en divisiones lógicas beneficiosas que pueda proporcionar el elemento span.

Una sola oración, o palabra si no está contenida en una oración, parece ser la parte lógica más pequeña. Ignorando CSS, ya que CSS es solo para el diseño y no para el significado semántico, ¿ cuándo span proporciona valor semántico adicional cortando una oración o cadena de palabras ?

Parece que en todos los casos, otros elementos son más adecuados para agregar valor semántico, lo que hace que abarque un elemento puramente de diseño. ¿Es esto cierto?

Solución

Span puede usarse para agregar significado semántico que queda fuera del alcance de HTML. Esto se puede hacer usando clases que identifiquen ciertos atributos. Por ejemplo, si está escribiendo una novela de ciencia ficción, puede usar span para identificar palabras inventadas, porque es posible que desee formatearlas de manera diferente o porque desee que el corrector ortográfico las ignore:

Entonces el asistente recurrió a gravenwist y le ordenó atacar al ejército que se acercaba. & Lt; span class = & Quot; wizardword & Quot; & Gt; gavenwist & Lt; / span & Gt; resistió pero el asistente wistwand era demasiado poderoso.

Esto podría representarse como

Entonces el mago llamó al gravenwist y le ordenó que atacara al ejército que se acercaba. La gavenwist resistió pero la wistwand del mago era demasiado poderosa.

Otro buen ejemplo de este tipo de cosas son microformats , que permiten la creación de una estructura arbitraria dentro de HTML:

<span class="tel">
 <span class="type">home</span>:
 <span class="value">+1.415.555.1212</span>
</span>

La ventaja de span, versus div, es que los tramos pueden aparecer en casi todas partes porque son contenido en línea, y los divs son elementos de bloque, por lo que solo pueden ocurrir dentro de ciertos otros elementos.

Otros consejos

Un beneficio muy útil sería marcar cambios en el idioma. P.ej.

<p>Welcome to Audi UK, <span lang="de">Vorsprung durch Technik</span>.</p>

Los lectores de pantalla con capacidades de múltiples idiomas podrían hacer uso de esto.

Entonces no son presentacionales, solo genéricos. De hecho, los tramos rara vez son de presentación, siempre que se use un nombre de clase semánticamente significativo, como & Quot; error de ortografía & Quot; y no " negrita-rojo-texto " ;.

<div class="name">
  <span class="firstname">John</span>
  <span class="lastname">Doe</span>
</div>

Depende completamente de lo que quieras expresar. Si marcar el primer nombre es de valor semántico para usted (ya sea solo para tener un gancho para CSS para formatear nombres o extraerlos usando algún lenguaje de script), entonces puede usar un espacio.

Utilizo mucho SPAN cuando quiero que JavaScript analice el elemento e inserte algún valor dentro de la etiqueta, por ejemplo:

<span datafield="firstname"></span>

Tendría un valor insertado más tarde, por lo que en ese caso sí tiene significado, aunque solo sea un significado que decido darle. El hecho de que span no tenga ningún efecto en el diseño es ideal en ese caso.

span s puede ser portadores de información semántica en forma de class atributos. Esto es utilizado por microformatos.

las etiquetas span necesitan un atributo de clase o id para darles significado.

p. 0123 456789

Ignorando CSS, ya que eso le dará al significado semántico, cuando se extiende proporcionar valor semántico adicional por cortar una oración o una cadena de palabras?

Ignorando CSS (y otras marcas que no sean HTML), nunca. El único propósito en la vida de & Lt; span & Gt; es llevar un marcado que no se puede expresar en HTML. Marcas como & Lt; span style="dropCap" & Gt ;, que no tiene un equivalente en HTML pero ha existido en la publicación impresa durante cientos de años, y que siempre se aplica a un solo carácter: la primera letra de un elemento (artículo, lo que sea), sin causar un salto de palabra (o un salto más grande).

Parece que en todos los casos, otros los elementos son más adecuados para agregar valor semántico, haciendo que el lapso sea puramente elemento de diseño ¿Es esto cierto?

Sí y no. El único valor real de & Lt; p & Gt; es que es semánticamente neutral. Es decir, a diferencia de, por ejemplo, & Lt; <=> & Gt ;, no hace nada que desee que no haga cuando lo usa para llevar otro marcado. Y hay veces, como & Lt; <=> & Gt; arriba, cuando no quieres ningún otro efecto.

Si desea aplicar reglas de formato a parte del contenido (por ejemplo, una sola palabra u oración) de una etiqueta. Puedes usar la etiqueta span. A veces se llama formato sin etiquetas.

Utilizo tramos en mi EBNF - > Convertidor XHTML para aplicar un formato diferente a literales y tokens.

Los elementos

SPAN (y DIV) en sí mismos generalmente se consideran semánticamente neutros. Un buen enfoque es usar el marcado semántico tanto como sea posible, pero a veces te encuentras con situaciones en las que los elementos html existentes que proporcionan un significado semántico (EM, FUERTE, ABBR, ACRONIMO, etc., etc.) no se ajustan semánticamente por su contenido Entonces, el siguiente paso es usar un SPAN o DIV semánticamente neutral con una identificación o clase semánticamente significativa.

Creo que está preguntando acerca de la diferencia entre un div y un span, y realmente no hay uno, aparte del comportamiento predeterminado.

Es una cuestión de convención. Cuando se usa el estilo, div se usa típicamente para demarcar divisiones de contenido, mientras que span se usa para demarcar texto en línea. Podrías usar <=> en todas partes o usar <=> en todas partes, pero es útil pensar en ellos como diferentes, incluso si es solo por convención.

En HTML podría usarse para microformatos. Pero dado que la especificación HTML real es X HTML, no tiene sentido. En lugar de:

<P>Hello, my name is <SPAN class="name"> Joe Sixpack </SPAN></P>

Prefiero usar:

<P>Hello, my name is <FOAF:name> Joe Sixpack </FOAF:name></P>

El significado de SPAN es " este es un lapso (genérico) de contenido (por ejemplo, texto) " ;. Compare con DIV, que significa & Quot; esta es una división lógica (es decir, una sección de documento genérico) & Quot ;.

SPAN es principalmente un gancho para colgar estilos (por lo que puede usar  en lugar de ).

De la especificación :

Los elementos DIV y SPAN, junto con los atributos id y class, ofrecen un mecanismo genérico para agregar estructura a los documentos. Estos elementos definen el contenido como en línea (SPAN) o nivel de bloque (DIV) pero no imponen otras expresiones idiomáticas de presentación sobre el contenido. Por lo tanto, los autores pueden usar estos elementos junto con hojas de estilo, el atributo lang, etc., para adaptar HTML a sus propias necesidades y gustos.

Supongamos, por ejemplo, que deseamos generar un documento HTML basado en una base de datos de información del cliente. Dado que HTML no incluye elementos que identifiquen objetos como & Quot; cliente & Quot ;, & Quot; número de teléfono & Quot ;, & Quot; dirección de correo electrónico & Quot ;, etc. ., utilizamos DIV y SPAN para lograr los efectos estructurales y de presentación deseados. Podríamos usar el elemento TABLE de la siguiente manera para estructurar la información:

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow