Bootstrap et la balise <small>

Bonjour

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 ? 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 ...........

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

Je vais essayer de reformuler ma question ....

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

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 ?

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 )
Modifié par lionel_css3 (29 Jan 2017 - 11:36)

Merci lionel_css3

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

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

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 en tous cas
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
Merci à toi...mob

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

D'accord !
J'ai compris ton exemple maintenant

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

Ave Toi

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

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é
et aussi à lionel_css

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 Mais il doit y en avoir

Santé

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
Modifié par Ethos (29 Jan 2017 - 13:57)

Pour ce que tu veux faire il existe la balise <header>, placée à l'intérieur d'un article...

http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

<article>
  <header>
    <h1>Titre de l'article</h1>
    <p>Auteur : bidule</p>
  </header>
    
  <p>Contenu de l'article</p>
</article>

Merci lionel_css3

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