Structure HTML
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>
Les balises sémantiques
HEADER
À 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.
Footer
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>
Menu
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>
Sections
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
Résumé
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.
Les balises génériques
Il existe deux autres types de balises génériques : les div et les span
DIV
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
SPAN
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
Attention
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