Valeur sémantique de la durée

https://stackoverflow.com/questions/278914

07-07-2019
|

Question

L'élément span semble être exactement comme un div, mais au niveau en ligne plutôt qu'au niveau des blocs. Cependant, je n'arrive pas à penser aux divisions logiques bénéfiques que l'élément span peut fournir.

Une seule phrase, ou un mot s'il ne figure pas dans une phrase, semble être la plus petite partie logique. Ignorant les CSS, puisque les CSS ne servent qu’à la présentation et non au sens sémantique, à quel moment span fournit-il une valeur sémantique supplémentaire en découpant une phrase ou une chaîne de mots ?

Il semble que dans tous les cas, d’autres éléments conviennent mieux à l’ajout de valeur sémantique, ce qui en fait un élément purement physique. Est-ce vrai?

La solution

Span peut être utilisé pour ajouter une signification sémantique en dehors du champ HTML. Cela peut être fait en utilisant des classes qui identifient certains attributs. Par exemple, si vous écrivez un roman de science-fiction, vous pouvez utiliser span pour identifier les mots inventés, car vous pouvez les formater différemment ou si vous souhaitez que le correcteur orthographique les ignore:

Ensuite, le sorcier a appelé le gravenwist et lui a dit d'attaquer l'armée qui approche. Le & Lt; span class = & Quot; mot-sorcier & Quot & Gt; gavenwist & Lt; / span & Gt; résisté, mais le wistwand était trop puissant.

Ceci pourrait être rendu comme

Ensuite, le sorcier a appelé le gravenwist et l'a ordonné d'attaquer l'armée qui s'approchait. Le gavenwist a résisté, mais le Wistwand du sorcier était trop puissant.

Un autre bon exemple de ce type de chose est les microformats , qui permettent la création de structures arbitraires au sein de HTML:

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

L’avantage de span, par rapport à div, est que les étendues peuvent apparaître presque partout car elles sont du contenu en ligne et que les div sont des éléments de bloc, ils ne peuvent donc apparaître qu’à l’intérieur de certains autres éléments.

Autres conseils

Un avantage très utile serait de marquer les changements de langue. Par exemple.

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

Les lecteurs d’écran multilingues pourraient tirer parti de cela.

Donc, ils ne sont pas de présentation, mais génériques. En fait, les plages sont rarement des présentations, en fournissant un nom de classe à signification sémantique, comme & "; Orthographe-erreur &"; et pas & "; texte en gras-rouge &";

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

Cela dépend complètement de ce que vous voulez exprimer. Si marquer le prénom a une valeur sémantique pour vous (que ce soit simplement pour que CSS puisse formater les prénoms ou pour les extraire en utilisant un langage de script), vous pouvez utiliser une étendue.

J'utilise beaucoup SPAN lorsque je souhaite que JavaScript analyse l'élément et insère une valeur dans la balise, par exemple:

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

aurait une valeur insérée plus tard, donc dans ce cas, cela a un sens, bien que seulement un sens que je décide de lui donner. Le fait que span n’ait par ailleurs aucun effet sur la mise en page est idéal dans ce cas.

span s peut être en réalité un porteur d'informations sémantiques sous la forme d'attributs class. Ceci est utilisé par les microformats.

Les balises span nécessitent un attribut class ou id pour leur donner un sens.

par exemple. 0123 456789

Ignorer les CSS, car cela donnera la sens sémantique, quand s'étend fournir une valeur sémantique supplémentaire par couper une phrase ou une chaîne de mots?

Ignorer les CSS (et autres balises non HTML), jamais. Un & Lt; span & Gt;; le seul but de la vie est de porter un balisage que vous ne pouvez pas exprimer en HTML. Balisage tel que & Lt; span style="dropCap" & Gt ;, qui n'a pas d'équivalent HTML mais existe dans l'édition imprimée depuis des centaines d'années et qui s'applique toujours à un seul caractère - la première lettre d'un article (article, peu importe), sans provoquer de saut de mot (ou de plus grande pause).

Il semble que dans tous les cas, d’autres les éléments sont mieux adaptés à l'ajout valeur sémantique, faisant s'étendre purement élément de mise en page. Est-ce vrai?

Oui et non. La seule valeur réelle de & Lt; p & Gt; est-ce qu'il est sémantiquement neutre. C’est-à-dire que, contrairement à par exemple & Lt; <=> & Gt ;, il ne fait rien que vous souhaitiez ne pas avoir lorsque vous l’utilisez pour transporter d’autres balises. Et il y a des moments, comme & Lt; <=> & Gt; ci-dessus, lorsque vous ne voulez pas d'autres effets.

Si vous souhaitez appliquer des règles de formatage à une partie du contenu (par exemple, un mot ou une phrase) d'une balise. Vous pouvez utiliser la balise span. Cela s'appelle parfois le formatage sans étiquette.

J'utilise des étendues dans mon EBNF - > Convertisseur XHTML pour appliquer un format différent aux littéraux et aux jetons.

Les éléments SPAN (et DIV) en eux-mêmes sont généralement considérés comme sémantiquement neutres. Une bonne approche consiste à utiliser le balisage sémantique autant que possible, mais vous rencontrez parfois des situations dans lesquelles les éléments html existants qui fournissent un sens sémantique (EM, STRONG, ABBR, ACRONYME, etc.) ne sont pas adéquats sémantiquement. pour votre contenu. La prochaine étape consiste donc à utiliser un SPAN ou une DIV sémantiquement neutre avec un identifiant ou une classe sémantiquement significatif.

Je pense qu'il s'interroge sur la différence entre une div et une étendue, et il n'y en a pas une autre que le comportement par défaut.

C'est une question de convention. Lors de l'utilisation du style, div est généralement utilisé pour délimiter les divisions de contenu, tandis que span est utilisé pour délimiter le texte en ligne. Vous pouvez tout aussi bien utiliser <=> partout ou <=> partout, mais il est utile de les considérer comme différents, même si ce n'est que par convention.

En HTML, pourrait être utilisé pour les microformats. Mais comme la spécification HTML actuelle est X HTML, cela ne sert à rien. Au lieu de:

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

Je préférerais utiliser:

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

La signification de SPAN est & "; il s'agit d'une étendue (générique) de contenu (par exemple, du texte) &" ;. Comparez à DIV, ce qui signifie & "; Il s’agit d’une division logique (c.-à-d. Une section de document générique) &";.

SPAN est principalement un crochet pour suspendre les styles (vous pouvez donc utiliser  au lieu de ).

De spécification :

Les éléments DIV et SPAN, associés aux attributs id et class, offrent un mécanisme générique pour ajouter une structure aux documents. Ces éléments définissent le contenu en ligne (SPAN) ou au niveau du bloc (DIV), mais n'imposent aucun autre langage de présentation au contenu. Ainsi, les auteurs peuvent utiliser ces éléments conjointement avec des feuilles de style, l’attribut lang, etc., pour adapter le HTML à leurs propres besoins et goûts.

Supposons, par exemple, que nous voulions générer un document HTML basé sur une base de données d'informations client. Étant donné que HTML n'inclut pas d'éléments identifiant des objets tels que & "Client &", & "Numéro de téléphone &", & "Adresse électronique &", Etc. ., nous utilisons DIV et SPAN pour obtenir les effets structurels et de présentation souhaités. Nous pourrions utiliser l'élément TABLE comme suit pour structurer les informations:

<!-- 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>

Licencié sous: CC-BY-SA avec attribution

Non affilié à StackOverflow