web-dev-qa-db-fra.com

Pourquoi utiliser .h1 au lieu de h1?

Dans le projet Bootstrap CSS , les styles sont fournis pour vos balises de titre (H1, H2, H3, H4, H5, H6), mais il existe également une série de noms de classe basés sur les en-têtes (.h1,. h2, .h3, .h4, .h5, .h6). Quel est l'avantage d'utiliser le nom de classe d'un H1 sans utiliser correctement l'étiquette H1? Je pense que vous voulez toujours vous assurer que votre code HTML reflète votre importance visuelle.

Toute pensée expliquant une bonne raison d'utiliser .h1 au lieu d'utiliser une balise h1 serait appréciée.

htmlcsstwitter-bootstraptwitter-bootstrap-3
61
Hynes

Tu demandes:

Pourquoi utiliser .h1 au lieu de h1?

Réponse courte:

L'objectif est d'utiliser les deux, ensemble.

L'utilité des classes .h* entre en jeu lorsque la taille de la typographie dans la conception n'est pas en corrélation avec les niveaux d'en-tête sémantiquement appropriés. En scindant le problème en deux, nous pouvons résoudre proprement les deux.

Le premier bit est l'élément/tag. Le '<h*>' prend en charge la sémantique, l'accessibilité et le référencement.

Le second bit est la classe. Le '.h*' prend en charge la sémantique visuelle et la hiérarchie typographique. 

Longue réponse:

Je crois que les origines de ces classes proviennent du projet OOCSS:

CSS orienté objet

La dernière itération de OOCSS a un peu changé depuis ma dernière consultation, mais voici le fichier heading.css pertinent, issu d'un plus ancien commit, qui contient les classes .h1 - .h6 que je connais bien:

6e481bc18foocss/core/heading/heading.css

D'après les commentaires:

.h1-.h6 classes devraient être utilisées pour maintenir les niveaux d'en-tête sémantiquement appropriés - NOT pour une utilisation sur des non-en-têtes
...
si des en-têtes supplémentaires sont nécessaires, ils doivent être créés via des classes supplémentaires, jamais via un style dépendant de l'emplacement.

Notez le accent ci-dessus.

Pour une bonne explication sur l'utilisation de ces classes, voir:

  1. stubbornella.org : Ne modifiez pas les en-têtes à l'aide de sections HTML5 (Nicole, l'auteur de ce message, est le créateur d'OOCSS)
  2. csswizardry.com : Dimensionnement de polices pragmatique et pratique en CSS
  3. Google Groupes ›CSS orienté objet› Question du titre: Concept/utilisation de base? (Une question que j'ai posée en septembre 12)

Citations pertinentes des liens ci-dessus:

1. stubbornella.org

... [HTML5] Les éléments de section sont destinés à aider le navigateur à déterminer le niveau réel de l'en-tête, mais pas nécessairement à décider de son style.

Alors, comment stylisons-nous les en-têtes dans un monde HTML5?

... Nous ne devrions pas utiliser d’éléments de sectionnement pour le style. Nous devrions les laisser faire le travail pour lequel ils ont été conçus, c'est-à-dire trier l'arborescence des documents et résoudre les problèmes de style d'une autre manière qui répond mieux à nos objectifs: avec de simples noms de classe réutilisables pouvant être appliqués à toutes nos en-têtes, quelle que soit leur profondeur. ils peuvent être dans le contenu de la section.

Je recommande de résumer les en-têtes de site en classes, car elles sont portables, prévisibles et sèches. Vous pouvez les appeler comme vous voulez.

2. csswizardry.com

Une autre pépite de sagesse absolument stellaire [que Nicole Sullivan nous a donnée] est ce que j'appelle la hiérarchie des têtes à double brin. C'est la pratique de définir une classe chaque fois que vous définissez un en-tête en CSS.

... En affectant une classe à chaque style de titre, nous associons ces styles à un sélecteur très flexible pouvant être déplacé n’importe où, plutôt qu’à un sélecteur très spécifique et non déplaçable.

3. groups.google.com

Voici un exemple d'utilisation du pseudo-html5 (h/t Jamund Ferguson ):

<body>
    <div class="main">
        <h1>Main Heading</h1>
        <section>
            <h1 class="h2">Section Header</h1>
        </section>
    </div>
    <aside class="side">
        <article class="widget">
            <h1 class="h3">Sidebar Headings</h1>
        </article>
        <article class="widget">
            <h1 class="h3">Sidebar Headings</h1>
        </article>
    </aside>
</body>

Veuillez lire les articles complets (et les discussions), via les liens ci-dessus, pour obtenir des informations plus détaillées sur cette question/ce sujet.

57
mhulse

La plupart des feuilles de style ont un ensemble de tailles de police correspondant aux styles de titre 1 à 6. Parfois, ailleurs sur la page, les concepteurs Web souhaitent utiliser ces mêmes tailles de police sur du texte, qui devrait non faire partie d'un élément de cap actuel, pour des raisons sémantiques. Plutôt que de fournir des noms pour chacune de ces tailles, telles que .size-12, .size-14, .size-16, etc., il est plus simple de les nommer avec des noms de classe similaires à vos en-têtes. Ainsi, vous savez que le texte aura la même taille qu'un élément H1, même s'il ne s'agit pas d'un élément H1. Je l'ai fait plusieurs fois moi-même.

32
animuson

Quelques raisons auxquelles je peux penser:

  • Utiliser div au lieu d'une balise appropriée pour obtenir le visuel d'un en-tête sans impact sur le référencement
  • Pour éviter les complications dues aux incohérences du navigateur
  • Compatibilité avec d'autres bibliothèques et frameworks qui choisissent de faire la même chose pour les raisons 1 et 2 
  • Flexibilité de la conception (notée par @scrappedcola dans les commentaires)
8
Mike H.

Cela permet de séparer la hiérarchie visuelle de la hiérarchie sémantique. Par exemple, je veux dire une chose au spectateur, tout en disant à un ordinateur (moteurs de recherche), autre chose.

<article>
    <h1 class="h1">Page Title</h1>
    <p>Some content</p>
    <section>
        <h1 class="h2">Section Heading</h1>
        <div class="h6">Sub Heading</div>
        <p>Some content</p>
    </section>
    <section>
        <h1 class="h2">Section Heading 2</h1>
        <div class="h6">Sub Heading 2</div>
        <p>Some content 2</p>
    </section>
</article>

Voir:

5
Byran

La seule chose à laquelle je peux penser immédiatement est pour les moteurs de recherche. Beaucoup regarderont une balise h1 comme titre ou sujet d'une page et l'utiliseront pour les recherches, etc. Le fait d'avoir plusieurs balises h1 peut semer la confusion parmi les robots de recherche également entendu dire que vous pourriez être sur la liste des "sites malveillants" avec certaines araignées comme Google).

Avoir les styles vous permet d'avoir le même aspect visuel pour un élément sans foirer les moteurs de recherche.

1
Becuzz

Cela aiderait certainement en termes de référencement et de robots Google à mieux comprendre votre page . Quand il lit h1, cela suppose que tout ce qui est là doit être le point central de la page. H2, serait les deuxièmes composants et ainsi de suite. De cette façon, Google peut comprendre la "portée" de ce que votre page couvre en termes de contenu.

Pas tout à fait sûr, mais une grande variable à mon avis serait le mode "lecture" des pages. Cela permettrait aux appareils et aux lecteurs d'organiser le contenu, en particulier pour les appareils utilisés par des personnes malvoyantes.

En outre, il fournit une structure à la page et un sens de l’ordre.

0
agc

Une autre raison que j’ai rencontrée récemment ... ce n’est pas propre à Angular, mais c’est un bon exemple:

Je souhaite créer des formes dynamiques/déclaratives dans Angular (voir Formulaires dynamiques dans le livre de recettes angulaire) et autoriser les éléments de texte stylisés. Une flexibilité maximale me permettrait d’ajouter de manière déclarative des éléments HTML arbitraires à mes formulaires, mais cela est ouvert aux attaques par script, et nécessite même une subversion explicite du compilateur Angular. Au lieu de cela, j'autorise l'ajout d'éléments de texte aux formulaires, ainsi que d'une classe permettant de contrôler le style. Je peux donc utiliser le style .h1 mais pas l'élément h1.

0
Peter Swords