Les balises HTML de base à connaître par cœur

Catégories

Si vous avez besoin d’un site internet, vous êtes au bon endroit. Nous sommes conscients que chaque client est particulier et ses besoins le sont tout autant, c’est pourquoi nous nous adaptons à votre demande, votre besoin et votre budget afin de composer et créer un site internet au plus proche de vos attentes.

Sommaire

Dans les articles précédents, nous avons vu la base de la structure d’une page web en HTML avec l’utilisation des grandes balises structurante à savoir :

  • Le header
  • Le main
  • Les sections
  • Le footer

Nous avons également identifié les balises permettant la mise en place de notre menu de navigation principal. Pour rappel :

  • La balise nav qui entoure une liste à puce
  • La balise ul qui est une liste à puce
  • La balise li qui est un élément de liste (liste à puce ou liste ordonnée)
  • La balise a qui est un lien.

Grâce à ces éléments, nous avons construit un header et un footer basique que nous avons stylisé grâce au CSS.

Aujourd’hui je vous propose de découvrir d’autres balises sémantiques de base qui vous permettront de concevoir pratiquement toutes vos pages web. En effet, même si un très grand nombre de balises existe, seule une petite poignée est à connaître par cœur. Pour les autres balises, elles s’utilisent dans des cas spécifiques.

Si vous arrivez à maîtriser les balises de base, les balises à utiliser dans les cas spécifiques vous sembleront évidentes après une légère recherche sur Google.

Les balises HTML de contenu à connaître par cœur

Tout d’abord, nous allons parler des balises de contenu, celles qui vous permettront de mettre en avant du texte, des images ou des liens.

Les balises de titre

Lorsque vous concevez une page web, vous devez avoir conscience que la structure de celle-ci est importante et permet d’identifier l’importance des contenus proposés. Les titrages sont un bon exemple du niveau d’importance de l’information.

En effet, j’ai souvent vu des débutants utiliser les niveaux de titrages en fonction de la taille du contenu proposé. C’est une erreur fréquente qui associe directement le visuel avec la balise que l’on va utiliser.

Dans la réalité des faits, il faut voir votre page web comme un article qui respecte une hiérarchie claire. Vous pouvez aussi le voir comme un cours, les professeurs donnaient souvent des titres au cours avec de grands titres et des plus petits titres. Pour votre page, c’est pareil.

Les titres ont 6 niveaux. Du niveau 1 qui est le plus important au niveau 6 qui est le moins important.

BaliseNiveau de titrageImportance
<h1>…</h1>Titre de niveau 1Le titre de niveau 1 est le plus important. On le retrouve normalement une fois par page.
<h2>…</h2>Titre de niveau 2Le titre de niveau 2 est le deuxième titrage le plus important. C’est également celui-ci que l’on retrouve le plus dans notre contenu. Il est utilisé comme niveau de titrage d’une section par exemple.
<h3>…</h3>Titre de niveau 3Le titre de niveau 3 est le troisième titrage le plus utilisé. On le trouve régulièrement dans les colonnes du footer ou en titre d’articles ou de produits par exemple.
<h4>…</h4>Titre de niveau 4À partir du quatrième niveau de titrage, il est moins fréquent de le trouver une une page de contenu. On peut néanmoins le voir utilisé dans des articles de blog par exemple.
<h5>…</h5>Titre de niveau 5Utilisations rares du titrage de niveau 5.
<h6>…</h6>Titre de niveau 6Utilisation très rare du titrage de niveau 6.

Lorsque vous découpez vos maquettes à intégrer, vous devez réfléchir à la hiérarchie de votre page et à l’importance du contenu.

Les paragraphes, liens et autres balises de contenu

Lorsque vous effectuez une recherche sur Google, vous trouvez un nombre énorme de balises. En réalité, lorsque vous débutez votre apprentissage du HTML, il y a très peu de balises que vous devez connaitre.

Ces balises vous permettront de mettre en forme pratiquement toutes les maquettes basiques que vous avez à intégrer. Attention, cela ne veut pas dire que les autres balises sont inutiles. C’est simplement que lorsqu’on apprend de nouvelles choses, il faut mieux se concentrer sur les bases afin de les maitriser avant de vouloir apprendre des choses plus complexes.

Il faut donc garder en tête que ce que nous voyons ici ne sont que des bases et qu’il reste encore énormément de choses à apprendre pour maitriser le HTML.

BaliseDescriptionUtilisation
<p>…</p>ParagrapheCette balise vous permet d’insérer tous vos contenus textuels à l’exception des titres.
<a href= »lien ici »>…</a>LienLa balise de lien vous permet d’ajouter un lien hypertexte interne ou externe à votre site. Cette balise s’utilise seule, comme pour créer un bouton d’appel à l’action par exemple ou à l’intérieur d’une autre balise comme pour la navigation par exemple.
<br/>Retour à la ligneCette balise permet de couper du contenu pour retourner à la ligne. Elle est souvent trop utilisée. Utilisez-la seulement si vous n’avez pas réussi à obtenir le résultat souhaité en CSS.
<hr/>Ligne de séparation horizontaleCette balise vous permet de créer une ligne horizontale pour séparer du contenu.
<img src= »lien de l’image ici » alt= » »>ImageLa balise image permet d’ajouter une image à votre contenu. Attention à remplir correctement l’attribut alt qui permet de décrire l’image.

Les listes à puce ou ordonnée

Nous avons déjà vu les listes à puce dans le menu de navigation principale se trouvant dans le header. Cependant, ces listes n’utilisent également à d’autres endroits de votre contenu. Que ce soit dans un article ou pour créer un menu de navigation secondaire dans le footer.

Ce que vous devez retenir pour les listes est simple, ul sert à créer une liste à puce et ol une liste ordonnée. Ensuite, que ce soit une liste à puce ou ordonnée, il suffit d’utiliser la balise li pour indiquer la présence d’un élément de la liste. À l’intérieur de ce li, vous pouvez utiliser la balise que vous souhaitez.

Attention, les listes ne contiennent pas toujours des liens comme dans le header. Il faudra donc choisir la bonne balise en fonction du contenu que vous intégrez dans votre page.

Un petit rappel des balises structurantes ou sectionnant

Nous avons déjà vu les balises principales, mais, la répétition permet de mieux retenir et donc d’apprendre à utiliser correctement.

Nous allons également voir quelques balises supplémentaires qui vous aideront à mettre en place votre page web.

BaliseDescriptionUtilisation
<header> </header>En-tête du siteCette zone permet la création de l’en-tête qui comprend généralement le logo et le menu de navigation principal
<nav> </nav>Menu de navigation principaleLe nav sert à identifier le menu de navigation principale du site
<footer> </footer>Pied de page du siteZone de pied de page du site plus ou moins complexe avec un copyright et des informations complémentaires ou des menus secondaires
<main> </main>Zone de contenu de la pageZone dans laquelle sont contenues toutes les sections de la page du site.
<section> </section>Section de pageChaque section permet de traiter un sujet sur le site. Cela permet de découper le contenu de manière logique et hiérarchiser.
<article> </article>Article, contenu autonomePermets de grouper des éléments ayant un lien entre eux.
<aside> </aside>Informations supplémentaires/complémentairesPermets d’ajouter du contenu supplémentaire et informations complémentaires. Cette balise est de moins en moins utilisée.

Les balises génériques, sans valeurs sémantiques

Pour finir, nous allons voir ensemble deux balises génériques qui vous faciliteront la vie. Attention, ces balises peuvent faire énormément de choses et vous permettent d’obtenir le résultat visuel souhaité, mais ne sont pas recommandées s’il existe une balise sémantique plus appropriée.

En effet, chaque élément que l’on intègre à une balise qui lui est dédiée et qui permet d’indiquer son utilité et son importance dans le contenu.

Prenons exemple d’un titre, celui-ci indique l’importance du contenu ainsi que le sujet traité dans une section.

Les balises que je vais vous présenter n’ont aucune valeur sémantique et permettent donc simplement de vous simplifier la tâche pour l’intégration de votre contenu et permettent également d’ajouter du contenu n’ayant aucune balise sémantique qui lui est propre.

On se sert généralement de la balise <div> </div> pour grouper d’autres éléments ensemble et de la balise <span></span> pour un élément unique et isolé.

Vous avez maintenant toutes les bases pour commencer votre première intégration de webdesign. Si vous souhaitez être formé/accompagner dans l’apprentissage de ces compétences, contactez-nous pour obtenir votre devis.