<header> </header>
L'élément HTML header représente du contenu introductif de la page ou de la section. Il peut contenir des éléments de titre, mais aussi d'autres éléments tels qu'un logo, un formulaire de recherche, le nom d'auteur, etc.
Un élément header ne peux pas être enfant d'une balise de footer ou de lui-même (ex. ci-dessous) :
<header>
<header></header>
</header>
<footer>
<header></header>
</footer>
<main> </main>
L'élément HTML main représente le contenu majoritaire du <body> du document. Le contenu principal ou le sujet principal du document.
Un document ne peut pas avoir plus d'un seul élément main.
<footer> </footer>
L'élément HTML footer représente le pied de page de son parent. Il est généralement descendant de : body, section, article. Un élément footer contient habituellement des informations sur l'auteur de la section, les données relatives au copyright, des liens vers d'autres documents en relation ou les informations de contact.
<section> </section>
L'élément HTML section représente une section générique d'un document, par exemple un groupe de contenu thématique. Pour être valide, la section doit au minimum contenir : 1 titre et une description.
Par exemple : Sur ma page d'accueil, j'ai une partie qui résume la page "à propos" et une autre partie qui résume la page "nos services". Chacune de ses parties sera englobé dans une section distincte.
<article> </article>
L'élément article représente une composition autonome de la page, destinée à être distribuée ou réutilisée de manière indépendante. Un article doit faire sens lui-même et il doit pouvoir être diffusé indépendamment du reste du site.
Exemples : un article de magazine ou de journal, un article de blog, une fiche produit, un commentaire soumis par un utilisateur, etc...
<div> </div>
L'élément HTML div (ou division) est le conteneur générique du contenu du flux. Cet élément ne possède aucune valeur sémantique, il est surtout utile pour diviser le contenu et nous permettre de mettre en forme. Il n'a donc aucun effet sur le contenu ou la mise en page tant qu'il n'est pas spécifié à l'aide de CSS.
<h1></h1> ... <h6> </h6>
Les éléments HTML h1 à h6 représentent les six niveaux de titre de section. <h1> correspond au niveau le plus haut et <h6> correspond au niveau le plus faible. Au niveau du référencement naturel, le h1 sera donc plus important que le h6.
<p> </p>
L'élément HTML p représente un paragraphe de texte. Les paragraphes sont généralement représentés comme des blocs et séparés par un espace vertical. Le p contiendra tous les éléments de textes que ce soit des descriptions longues ou courte.
<a> </a>
L'élément HTML a pour l'ancre, représente tous les liens du site. Il permet de naviguer entre les pages ou de rediriger sur une URL externe. Cet élément nécessite l'attribut hrefpour fonctionner. --> plus d'infos à ce sujet ici
voici un exemple pour inclure une URL externe :
<a href="https://mon-url.ch">Le nom de mon lien visible à l'utilisateur</a>ou alors pour une se rediriger vers une page du site :
<a href="le-nom-de-mon-fichier.html">Ma deuxième page</a><img/>
L'élément HTML img est présent pour inclure des images n'importe où sur le site. Cet élément nécessite l'attribut src et alt pour fonctionner. --> plus d'infos à ce sujet ici
voici un exemple pour inclure une URL externe :
<img src="chemin/vers/mon/image.jpg" alt="description" /><ul> </ul> ou <ol> </ol>
Les élément HTML ul ou ol représente une liste d'éléments. La différence entre les deux :
<ul> = sans ordre particulier :
<ol> = liste ordonnée :
Une recette de cuisine on utilisera le ol puisque l'ordre à une importance et que chaque étape doit être suivi les unes après les autres.
Chaque élément de ma liste sera contenu dans un <li> </li>. Voici un exemple concret :
<ul>
<li>mon élément XY</li>
<li>mon élément Z</li>
<li>mon élément F</li>
<li>etc...</li>
</ul>