Pour rappel, HTML est un langage structurel, c'est-à-dire, c'est lui qui établit le squelette de la page WEB. Il existe de nombreuses balises qui nous aident à structurer nos pages WEB. Une page WEB est composée en bloc. Il existe différents blocs : les blocs déjà intégrés dans HTML et les blocs personnalisés.
Tout ce qui va être dit ici, se passe dans la balise <body>
</body>
À ne pas confondre avec le head de la page HTML.
La balise header
se place dans le body
.
<header><!-- Texte du HEADER --></header>
Le header
peut contenir des balises images, paragraphes, liens, ..., c'est l'entête.
C'est la partie en tout en bas du site web, en général on retrouve tout ce qui est informations générales, contacts, liens des réseaux sociaux, ...
footer
peut également contenir des liens, des images, des paragraphes.
<footer><!-- Placez ici le contenu du pied de page --></footer>
La balise nav
contient tous les liens du site. C'est le menu de votre site
En général, nav
est réalisé avec des puces ul li
<nav> <ul> <li><a href="index.html">Accueil</a></li> <li><a href="forum.html">Forum</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav>
La balise section
est une balise qui permet de regrouper des contenus en fonctions de la thématique. Une page WEB peut être composé de plusieurs sections.
<section> <h1>Ma section de page</h1> <p>Bla bla bla bla</p> </section>
Il est possible d'avoir H1, p,
dans un header
et dans une balise section
Ceci est un exemple de structure, toutes les pages WEB n'ont pas besoin d'être structurée comme ça. Utilisez les balises que vous avez besoin.
Pourquoi utiliser ces balises ?
Pourquoi se compliquer la vie avec ce genre de balise ?
Tout simplement parce que HTML5 l'a intégré dans sa nouvelle version afin d'accélérer le chargement d'une page, d'améliorer le référencement.
Il existe deux autres types de balises génériques : les div
et les span
La balise div
est une balise qui crée un bloc, donc il y a un retour à la ligne.
<div> <h1>Mon Bloc</h1> <p>Bla bla bla bla</p> </div>
Les div
sont souvent utilsées en ajoutant une class
ou un id
La balise span
englobe un mot qui permet de lui appliquer une style particulier.
<p><span>Bla</span> bla, bla</p>
Comme les balises div
, on l'utilise en ajoutant des class
ou un id
N'abusez pas des span
ou des div
, il est préférable d'utiliser les balises sémantiques que les créer ses propres balises