5542 sujets

Sémantique web et HTML

Bonjour Smiley smile

J'ai un problème avec l'usage que fait bootstrap de la balise <small>

Sur le site de Bootstrap, au chapitre typography, la balise small est utilisée pour une effet visuel (il me semble) :

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>


Et l'effet donné par bootstrap correspond parfaitement à l'effet que je veux donner pour une création.
Mais ça me dérange ! parce que ça ne m'a pas l'air de respecter l'excellence du code SURTOUT pour un titre <H1>

Selon le livre "html5, une référence pour le web", Rodolphe Rimelé

"Initialement voué à diminuer la taille du texte dans les précédentes versions de HTML,
<small> a été redéfini astucieusement en « small print », ce que l’on pourrait traduire par
« petits caractères d’imprimerie figurant au bas des contrats dont l’auteur souhaite que
l’on ne les lise pas ». Plus prosaïquement, il peut s’agir de mentions spécifiques ou
légales, d’avertissements discrets, ou de la précision d’une licence d’utilisation.
"

C'est la première fois que je m'essaie à du bootstrap, j'ai envie d'opter pour un span ou autre i, em, selon le contenu réel:

par exemple:

<h1>h1. Bootstrap heading <span class="small">Secondary text</span></h1>


Si un adepte sait me mettre sur la voie ? Smiley smile Merci

Je me prends peut-être la tête mais j'ai l'impression de commettre une faute grave si je suis Bootstrap en utilisant la balise small de cette manière...
Modifié par Ethos (29 Jan 2017 - 10:27)
Il n'y a rien de grave, la police de Google ne va pas te mettre en garde à vue ........... Smiley cligne

moi en tout cas j'ai pas vraiment compris quelle était ta question et ce que tu voulais faire avec la balise <small>, pour laquelle tu peux d'autre part redéfinir les style qui lui sont appliqués dans ton propre CSS
Hello
Merci pour ton attention Smiley smile

Je vais essayer de reformuler ma question .... Smiley sweatdrop

Contexte:
Je suis en train de faire un site avec bootstrap ( une des premières pour moi dans l'utilisation de framework, j'avais fais un site auparavant en utilisant knacss).
Ma charte graphique m'indique de faire un titre qui correspond au script ci-avant (donc le début du titre h1 plus grand que la dernière partie Smiley smile

Donc moi je n'aurais jamais imaginé une seule seconde utiliser la balise small pour cet usage !

D'où ma question qui est double

1) Bootstrap n'utiliserait-t'il pas la balise small à mauvais escient (par rapport à la sémantique de la balise) ?

2) Suis-je sur le bon chemin en utilisant pas de balise small dans un titre h1 ?

Est-ce plus clair ? Smiley confused

Je corrige ma 2ème question:

2) Suis-je sur le bon chemin en n'utilisant pas de balise small dans un titre h1 qui est dépourvu de mentions légales ou autres comme précisés dans la définition de la balise small, voir le post 1
Modifié par Ethos (29 Jan 2017 - 11:22)
tu t'embêtes pour rien, tu n'as qu'à utiliser un <span> et le styler dans ta feuille de style, chargée après celle de Bootstrap, bien entendu..


<h1>Ici mon titre en gros caractères <span class="sub">suivi du sous-titre en petits caractères</span></h1>


et puis


h1 span.sub  {   font-size:.75em;  }  /* ou une autre valeur à ta convenance  */


Selon la spécificité que tu souhaites, tu n'es pas obligé de mettre une classe au span...

(edit: j'avais pas vu que tu évoques déjà cette piste, plus haut Smiley smile )
Modifié par lionel_css3 (29 Jan 2017 - 11:36)
Smiley smile
Merci lionel_css3

Si j'interprète correctement ton enseignement, je me mast... les méninges Smiley smile ou en d'autres termes je me prends la tête pour pas grand chose... Ok Smiley cligne

Donc si j'ai bien compris par rapport à ma 2ème question, je fais bien d'utiliser un span ou autre...

Remarque au passage :
Quand tu dis que je ne suis pas obligé de mettre une classe au span, oui bien d'accord avec toi mais...

Oui il y a un MAIS Smiley smile Je ne suis pas figé uniquement sur le span, ça dépend vraiment du contenu réel du titre... dès fois je ressens le besoin d'utiliser un strong, parce que cette partie du contenu h1 possède des mots clés plus importants... des fois les mots sont insignifiants donc span, parfois je veux uniquement insister sur certains mots pour l'utilisateur et j'utilise em ou i...

C'est pour ça que je mets une classe... mais peut-être que c'est une erreur de débuttant ? Smiley sweatdrop

Par contre concernant ma première question, "la balise small n'est-t'elle pas mal utilisée par bootstrap" par rapport au respect des standards ?

Je ReMERCI Smiley smile en tous cas Smiley smile
Modifié par Ethos (29 Jan 2017 - 12:03)
Hello,

Ça va dépendre du contenu de small plus que de son parent.

Il semble donc tout à fait valide d'utiliser small dans un h1 pour y indiquer des clauses, des mises en garde, des restrictions légales ou des indications sur les droits d'auteur.

Dans les autres cas, notamment pour obtenir uniquement le rendu visuel, un span.small serait plus adapté.

A noté également, que l'utilisation small ne donnera pas moins de valeur à son contenu, même si il est placé dans une balise d'emphase comme hx, strong, em.

En terme d'importance, ces deux exemples sont donc identiques :
<h1>Lorem ipsum <small>in dolor</small></h1>

<h1>Lorem ipsum <span class="small">in dolor</span></h1>
Hello Smiley smile
Merci à toi...mob Smiley smile

Ton message me renforce dans le choix d'utiliser une toute autre balise que <small> sauf s'il s'agit d'indiquer des "restrictions légales, droits d'auteurs, etc..." comme tu dis :

Je te cite:
Il semble donc tout à fait valide d'utiliser small dans un h1 pour y indiquer des clauses, des mises en garde, des restrictions légales ou des indications sur les droits d'auteur.


J'en conclue également peut-être à tort ? que l'exemple donné sur bootstrap ne correspond pas correctement à un modèle de bonne pratique dans l'utilisation de la balise <small>

Mais, (et je vois que je me répète beaucoup Smiley smile , je ne sais pas si c'est une bonne conclusion ?

Merci en tous cas et je vais méditer sur ton exemple, quand tu dis "qu'en terme d'importance les deux exemples sont équivalents", car depuis mon niveau j'ai quand même l'impression que la version avec <small> est plus importante...

Merci, vraiment Smiley smile
Modifié par Ethos (29 Jan 2017 - 13:01)
Je ne pense pas que Bootstrap soit globalement un exemple de "bonnes pratiques", si on souhaite répondre de façon stricte aux specs du W3C.

Mon exemple n'a pas de différence en terme d'emphase, au contraire de ce que pourrait sous-entendre le nom du tag small. Mais évidemment, la valeur sémantique est différente. C'était pour souligner le fait qu'utiliser small dans un h1 ne différenciera pas l'importance de son contenu du reste du titre.

Ce lien peut t'intéresser :
https://www.w3.org/wiki/HTML/Elements/small
Modifié par Felipe (30 Jan 2017 - 01:15)
Ceci dit ,un h1 n'est pas destiné à recevoir des clauses ou autres ou un roman, et les titres les plus courts sont les plus efficaces...
Ok mob Smiley smile

D'accord !
J'ai compris ton exemple maintenant Smiley smile

Distinction au niveau sémantique mais pas au niveau du poids du contenu par rapport au contenu de son parent (<h1>)

Ave Toi Smiley smile

et concernant ma question première à propos de la pertinence de l'exemple de Bootstrap, Ok également.... Smiley smile

Je vais continuer à me renseigner et j'espère que je saurai en faire bon usage pour le projet en cours...

Je vais boire un verre de vin à ta santé Smiley smile
et aussi à lionel_css Smiley cligne
Smiley smile oups lionel_css

je n'avais pas vu, nous écrivions en même temps ...

Oui je suis d'accord avec toi, ça me semble très rare de devoir utiliser un small dans un h1... mais il doit exister des cas où ça reste pertinent :

peut-être :

<h1>..heu ..

Non j'en ai pas Smiley smile Mais il doit y en avoir Smiley smile

Santé Smiley cligne

ha peut-etre un titre de post ?

<h1>Le titre de l'article
<br><small>Auteur de l'article, licence</small></h1>


Ce serait possible de faire ça ? bien que spontanément je ne le ferais pas !

Je cherchais seulement si un cas existait (C'est le vin qui doit faire son effet Smiley smile
Modifié par Ethos (29 Jan 2017 - 13:57)
Merci lionel_css3 Smiley smile

Oui, moi aussi si je devais baliser ce genre de contenu, j'opterais pour une solution ressemblant à celle que tu donnes...

L'exemple d'en haut était uniquement pour

1) tenir compte des remarques de @mob
2) répondre à ta remarque qu'une balise h1 n'était pas destinée à recevoir des infos concernées par <small>.

Donc en me reformulant, je dirais
qu'il doit y avoir des cas (que je ne vois pas car je n'ai pas assez de kilomètres) où la balise <small> peut être utilisée à l'intérieure de balises <h1> de manière pertinente selon la sémantique du contenu...

C'est du moins ce que je conclus en croisant vos enseignements...

Maintenant je si je n'ai pas compris, alors je n'en ai pas conscience Smiley decu !!?!!