Une balise est un élément (un nom, un mot clé) encadrée par le caractère inférieur < et le caractère supérieur > (des chevrons) comme par exemple <h1> (titre de niveau 1).
En général, une page web est constituée d’un en-tête (<header>), de menus de navigation (<nav>, en haut ou sur les côtés), de différentes sections au centre… et d’un pied de page (<footer>).
–
les balises structurantes HTML5
<header> : l’en-tête
Dans le header, on trouve généralement un logo, une bannière, un slogan… Toutes ces informations devront être placées dans la balise <header>. Il peut contenir des images, des liens, des textes…
–
<footer> : le pied de page
Dans le footer, on trouve des informations comme des liens de contact, le nom de l’auteur, les mentions légales, le plan du site, …
–
<nav> : principaux liens de navigation
La balise <nav> doit regrouper tous les principaux liens de navigation du site comme par exemple le menu principal du site. Généralement, le menu est réalisé sous forme de liste à puces à l’intérieur de la balise <nav>.
–
<section> : une section de page
La balise <section> sert à regrouper des contenus en fonction de leur thématique. Elle englobe généralement une portion du contenu au centre de la page.
source : themezaa.com/html/h-code/home-agency.html
–
<aside> : informations complémentaires
La balise <aside> est conçue pour contenir des informations complémentaires au document que l’on visualise. Ces informations sont généralement placées sur le côté (bien que ce ne soit pas une obligation).
–
<article> : un article indépendant
La balise <article> sert à englober une portion généralement autonome de la page. C’est une partie de la page qui pourrait ainsi être reprise sur un autre site. C’est le cas par exemple des actualités (articles de journaux ou de blogs).
On pourrait aussi utiliser des balises génériques <div> à la place pour englober les différentes portions de notre contenu (très utilisée avant l’arrivée des nouvelles balises HTML5). Néanmoins, il est assez probable que, dans un futur proche, les ordinateurs commencent à tirer parti intelligemment de ces nouvelles balises.
les balises en paire
Les balises fonctionnent généralement par paire pour agir sur le texte qu’elles encadrent. La balise fermante est écrite comme la balise ouvrante mais avec un / avant le nom.
Par exemple, la balise <strong> (strong = fort) met un texte en valeur : <p><strong>Ce mot</strong> est le plus important du paragraphe.</p>
les balises orphelines
La balise <br> insère une rupture de ligne unique. La balise est une balise vide qui signifie qu’elle n’a pas de balise finale. Cette balise est utile pour écrire des adresses ou des poèmes.
comment écrire les balises ?
Les balises ne sont pas sensibles à la casse, on peut les écrire indifféremment en minuscules ou en majuscules, mais on doit privilégier la minuscule (c’est même obligatoire avec XHTML).
Les balises HTML doivent être imbriquées de manière hiérarchique afin de permettre le cumul de leurs propriétés. En contrepartie, le chevauchement de balises n’est pas toléré par le standard HTML.
Exemple
<em><strong>Comment ça marche</strong>, les ordinateurs !</em>
donne le résultat suivant : Comment ça marche, les ordinateurs !
Par contre, <em><strong>Comment ça marche</em>, les ordinateurs !</strong>
n’est pas correct même si certains navigateurs l’acceptent. L’imbrication ne respecte pas les standards.
balise « inline » et balise « block », à ne pas confondre !
Les balises HTML ont une structure particulière et s’utilisent selon deux types bien distincts : les balises de type « bloc » (ou « block ») et les balises de type « en ligne » (ou « inline »). Ceci est particulièrement important car le type de balises a une incidence sur leurs comportements, leurs positionnements, leurs affichages, leurs imbrications, …
- Les balises « block » servent à distinguer les parties entières de texte, comme des titres, des paragraphes, des listes, des citations…
- Les balises « inline » sont prévues pour rester dans le texte pour l’enrichir (lien hypertexte, emphase, renforcement, …).
conséquences sur le positionnement
De ces deux groupes découlent des spécificités d’affichage :
– Les balises « block » se placent toujours l’une en dessous de l’autre par défaut (comme un retour chariot). Par exemple, une suite de paragraphes (<p>) ou les éléments d’une liste (<li>).
| <p>Paragraphe 1</p> <p>Paragraphe 2</p> |
donnera | Paragraphe 1 Paragraphe 2 |
– Les balises « inline » se placent toujours l’une à côté de l’autre afin de rester dans le texte.
| <strong> Les balises </strong> inline <em> du html </em> | donnera | Les balises inline du html |
Exemples de balises « inline » et « block »
| Balises block | <p> | <section> | <h1> | <body> | <article> | … |
| Balises inline | <em> | <strong> | <mark> | <a> (lien) | <img /> | … |
* voir une liste des balises HTML sur Openclassrooms
les balises universelles
Il existe deux balises génériques :
-
<span></span>(inline) – la balise <span> est utilisée pour grouper des éléments en ligne dans un document et ne fournit aucun changement visuel par elle-même. -
<div></div>(block) – la balise <div> (Diviseur) sert de conteneur, de zone neutre, et est utilisée pour regrouper les éléments de blocs pour les formater avec CSS.
Le principal intérêt de ces balises est que l’on peut leur appliquer une class (ou un id) pour le CSS quand aucune autre balise ne convient.
- Exemple d’un span inutile :
<span class="important">.
La balise<strong>doit être utilisée ! -
Exemple d’un div inutile :
<div class="titre">.
Utilisez les balises (<h1>,<h2>…) spécialement créées pour les titres.