Combinant divs et les éléments H1 d’inclure des logos dans les pages Web

Comme avec d’autres éléments HTML, l’inclusion d’un logotype dans un document (X) HTML est un processus qui doit être accompli avec soin, sans casser la structure sémantique du document. Très souvent, les concepteurs de sites Web qui font leurs premiers pas dans le domaine de penser que l’affichage d’un logo est similaire à travailler avec une image en ligne ordinaire. Malheureusement, cette idée est erronée. Un logo est une représentation visuelle du nom d’un site web, et donc sa présence doit être reflétée différemment dans le balisage du site.

Les bonnes nouvelles sont qu’il ya actuellement quelques approches simples qui vous permettent d’afficher un logo dans une page web, tout en gardant son sens sémantique intacte. La plupart de ces techniques reposent fortement sur les fonctionnalités fournies par des méthodes de remplacement d’image (IR). Si vous n’êtes pas familier avec le fonctionnement interne de IR, ne se sentent pas concernés, car dans cette série d’articles que vous allez apprendre à l’utiliser, dans ce cas pour bien intégrer votre logo soigneusement conçues dans votre site web.

Dans la partie introductive de la série j’ai mis en place un couple de « quick and dirty » de méthodes qui ont démontré comment inclure un logo dans un échantillon de première page web en utilisant seulement un élément <img> liée, puis en ajoutant un supplément de emballage div à cet élément. Même si ces approches mettant au travail était vraiment un jeu d’enfant, la vérité est qu’elles souffrent de sérieux problèmes. Ils ont encore la base de leurs fonctionnalités sur une balise img, ce qui est incorrect d’un point de vue sémantique.

Est-il rien de mieux qui peut être utilisée pour inclure un logo d’une façon plus appropriée? La réponse est un oui retentissant! Si un logo est la représentation visuelle d’un nom de site, alors il devrait être inclus directement via un élément H1, qui est l’élément le plus rubrique d’une page web.

En accord avec ce concept, dans ce deuxième épisode de la série, je vais montrer comment une combinaison appropriée d’un div et une balise H1 peut être d’une grande aide pour intégrer sémantiquement un logo dans un document (X) HTML.

Maintenant, cliquez sur le lien ci-dessous et commencez la lecture!

Revue: l’aide d’un élément lié img inclure un logo dans une page web

Comme d’habitude, avant que je illustrent la façon d’inclure un logo de l’échantillon en utilisant une combinaison d’un div d’emballage et un élément H1, ce serait utile, au moins à des fins de démonstration, de prendre un coup d’œil à quelques exemples précédentes qui ont montré comment effectuer la même tâche en utilisant quelque chose d’aussi simple et rudimentaire comme un élément <img> liées.

Alors, voici un exemple qui intègre le logo utilisant une balise img unique, une approche qui manque absolument de sens sémantique:

Comme je l’ai indiqué dans l’introduction, en affichant un logo dans une page Web en utilisant une balise img lié est une approche quelque peu primitif qui ne reflète pas adéquatement la présence de cet élément dans le balisage de la page. C’est simple à mettre en œuvre et facile à suivre, je sais, mais c’est inexact. Il est possible, cependant, pour améliorer la méthode précédente en enveloppant la balise img avec un div supplémentaire. Cette approche est un peu plus « sémantique », et son application peut être vu clairement dans l’exemple suivant:

Définitivement, l’exemple ci-dessus n’est pas la méthode la plus efficace qui peut être utilisé pour afficher un logo sur l’écran, mais au moins l’identifiant attribué à la div emballage supplémentaire représente plus fidèlement la présence de cet élément.

Naturellement, la mise en œuvre d’une méthode comme celle-ci est fortement déconseillée dans les environnements de production car elle utilise toujours un élément <img> de mettre le logo à sa place. au risque de se répéter, c’est une mauvaise habitude à partir d’un point de vue sémantique. Même ainsi, il n’y a aucun besoin de se sentir pessimiste, car il est possible d’améliorer l’exemple précédent en introduisant quelques changements subtils: d’abord, le logo doit être affiché comme une image de fond via CSS au lieu d’utiliser un balisage supplémentaire, et le second, il devrait être représenté par lui assignant un identifiant significatif à son élément HTML contenant.

Comme je le disais au début, cela peut être fait facilement en utilisant une combinaison d’un div et un en-tête H1, et dans la section suivante, je vais explorer cette approche en profondeur.

Maintenant, allez lire le segment à venir. C’est un seul clic.

L’incorporation d’un logo en utilisant un div d’emballage et un élément H1

Indéniablement, une approche commune et efficace pour y compris un logo dans une page web est d’utiliser un div qui enveloppe un élément H1. cela vous permet de représenter le logo en question comme le nom de la page via l’en-tête H1, tandis que les actes div enveloppant comme un conteneur générique. La théorie derrière cette méthode est facile à saisir, mais la meilleure façon de comprendre comment la méthode fonctionne par l’exemple, donc ci-dessous que j’ai codé un pour vous, qui recrée la hiérarchie balisage précitée. Check it out:

Hé, qui ressemble beaucoup mieux, n’est-ce pas? Comme vous pouvez le voir, il ya maintenant un div contenant identifié qui n’est pas surprenant que «logo» enveloppant un élément H1, qui comprend également le nom de la page Web. Cette structure simple, composée de deux éléments de niveau bloc, est beaucoup plus sémantique que tous les exemples codés dans le didacticiel précédent de la série. Il est donc temps de célébrer et d’organiser une fête, non?

Eh bien, pas si vite; l’exemple dans sa version actuelle ne fonctionne pas comme prévu, car il doit être stylé correctement. Ce faisant, le logo deviendra un élément cliquable et sera affiché comme une image de fond. Comme vous l’aurez deviné, ce sera fait dans la section suivante, afin d’avancer et lire les quelques lignes qui suivent.

Compléter l’exemple avec les styles CSS

Ayant déjà défini le balisage nécessaire pour bien refléter l’inclusion d’un logo dans la page Web précédente, la dernière étape qui doit être prise est de définir l’ensemble des styles CSS qui rendra la page entièrement fonctionnel, en dehors de polir son visuel présentation. Voici l’exemple de code qui fait tout cela:

Si vous jetez un oeil à les styles CSS venez d’ajouter, vous vous rendrez compte que le logo a été attribué directement comme une image de fond à la div d’emballage identifiés comme «logo». Ce n’est pas obligatoire, comme un résultat similaire peut être atteint en l’affectant à l’élément H1 à la place. Pour l’instant, cependant, je vais garder le code de cette façon, vous pouvez donc le tester et voir que ça fonctionne vraiment comme prévu. En résumé, voici une méthode simple qui vous permet d’inclure un logo dans un document (X) HTML, tout en gardant sa représentation sémantique intacte. C’est assez satisfaisant, non?

Dernières pensées

Au cours de cette deuxième tutoriel de la série, j’ai mis en œuvre une méthode simple et efficace qui vous a permis d’afficher un logo de l’échantillon dans une page Web tout en préservant son sens sémantique. Comme vous l’avez vu précédemment, ce processus a impliqué l’utilisation d’un div et un en-tête H1, qui est une approche plus efficace, comme ce dernier élément est utilisé dans la plupart des cas pour afficher le nom d’un site web (ou de ses pages comprenant, logiquement ).

Il est juste de dire, cependant, que cette approche peut être encore améliorée. Il est possible de se débarrasser de la div supplémentaire et encore obtenir les mêmes résultats. Cependant, les détails de ce processus amélioré sera couvert dans la partie à venir de la série.

Ne manquez pas le prochain article!