web-dev-qa-db-fra.com

Quelle balise doit être utilisée pour un élément de logo si le logo est du texte?

J'ai lu qu'un <h1> tag n'est pas approprié pour un logo . Mais si votre logo est en texte brut, que devez-vous utiliser? Je me sens comme <p> et <span> ne conviennent pas non plus. Voici un exemple:

<header>
  <nav>
    <a id="logo" href=".">
      <span>Company Name</span>
    </a>
    <a id="linkOne" href="#thingOne">
      <img src="…">
    </a>
    <a id="linkTwo" href="#thingTwo">
      <img src="…">
    </a>
    <a id="linkThree" href="#thingThree">
      <img src="…">
    </a>
  </nav>
</header>

Merci!

htmlsemantic-markup
18
Mike

Compte tenu de votre exemple de balisage, vous semblez demander un lien dans l'élément nav. Si tel est le cas, vous ne devez pas utiliser d'élément de titre pour cela, car l'élément de titre étiqueterait la section nav (ce n'est probablement pas ce que vous voulez transmettre; si vous avez un titre dans nav, cela devrait probablement être quelque chose comme "Navigation").

Dans ce cas, vous n’auriez pas besoin d’un élément spécial, répertoriez simplement les liens dans nav (idéalement dans un ul):

<header>
  <nav>
    <ul>
      <li><a id="logo" href="." rel="home">Company Name</a></li>
      <li><a id="linkOne" href="#thingOne"><img src="…" alt="…"></a></li>
      <li><a id="linkTwo" href="#thingTwo"><img src="…" alt="…"></a></li>
      <li><a id="linkThree" href="#thingThree"><img src="…" alt="…"></a></li>
    </ul>
  </nav>
</header>

Cependant, si vous parlez du nom du site qui s'affiche (généralement) dans la bannière/en-tête du site sur chaque page, en utilisant un h1 est logique, car il représente le site, dans quelle étendue toutes les sections de la page devraient être (par exemple, la navigation à l'échelle du site), et il donne au plan du document une étiquette de niveau supérieur (qui ne serait pas spécifié autrement). Dans ce cas, il ne doit pas faire partie du nav; sa section la plus proche doit être la racine de sectionnement body.

Sémantiquement, cela ne fait aucune différence si le nom/logo du site est affiché sous forme d'image ou de texte. Dans le cas d'une image, l'attribut alt fournit un contenu équivalent en tant que texte.

Donc, pour un logo de site, vous pourriez avoir:

<body>
  <header>
    <h1><a href="/" rel="home"><img src="…" alt="ACME Inc."></a></h1>
  </header>
</body>

Et pour un nom de site, vous pourriez avoir:

<body>
  <header>
    <h1><a href="/" rel="home">ACME Inc.</a></h1>
  </header>
</body>
3
unor

Il n'y a pas de méthode "sémantique" (c'est-à-dire la syntaxe) pour baliser un logo en HTML, donc à un niveau fondamental il n'y a pas de bonne ou de mauvaise façon. Cela dit, je n'utiliserais pas de <h1> pour un logo, car les balises d'en-tête devraient structurer votre HTML.

J'utilise habituellement un simple <div> ou <a> avec le logo comme image de fond car je pense que c'est la meilleure façon de le cacher aux lecteurs d'écran. Franchement, je ne vois pas grand intérêt à mettre le logo en tant que <img> dans un <section> puisqu'une section doit englober un regroupement thématique de contenu.

Dans votre cas, je formaterais votre <a> comme inline-block et définissez le logo comme image d'arrière-plan.

13
Johannes Jander

Je pense que le tag dépendra principalement de vous.

Je ne vois pas pourquoi il ne devrait pas être h1, étant donné que c'est du texte brut.

Mais en analysant votre cas, c'est ce que je ferais.

Option 1. Utilisez h1 et déterminez-le comme étiquette à utiliser pour afficher le logo. Plus jamais il ne devrait être utilisé dans le dom.

Option 2. Créez une nouvelle balise pour le logo, telle que. Ceux-ci sont appelés "éléments personnalisés". Cela devrait ressembler à ceci:

var logo = document.registerElement('com-logo', {
    prototype: Object.create(HTMLElement.prototype)
});

Ensuite, vous devrez formater le logo avec CSS.

Lisez ceci pour en savoir un peu plus sur les éléments personnalisés! :)

2
Bruno Moutinho