HEADER : Sémantique HTML5 Design CSS3

ARTICLE

SECTION

HEADER : Article 1

En haut de page, nous trouvons le header et en bas de page, le footer. Dans notre cas, ils sont de type bloc et font 100% de la largeur de la page.
<header> : Représente l'en-tête d'une page ou d'une section. Il contient généralement le logo, une bannière et différentes informations sur le site avec des liens.
<footer> : Définit le pied de page d'une page ou d'une section. Il contient souvent des informations de contact, des liens vers les réseaux sociaux et des mentions légales ou des crédits.

Entre le header et le footer, nous trouvons le main, le contenu principal de la page. Dans notre cas, il contient deux sections contenues dans un élément article, puis un élément aside sur la partie gauche de la page.
<main> : Définit le contenu principal d'une page, excluant les éléments répétés comme l'en-tête et le pied de page.
<article> : Contient un contenu autonome et indépendant, comme un article de blog, une actualité ou un post de forum.
<section> : Utilisé pour regrouper un ensemble de contenus thématiquement liés. Chaque section doit avoir un titre (<h1> à <h6>).

FOOTER : une section peut avoir son propre en-tête (header) et son propre pied-de-page (footer).

SECTION

HEADER : Article 2

Pour positionner correctement l'élément article à droite et l'élément aside sur la gauche de la page, nous avons utilisé la propriété CSS display : inline-block.
Avec une largeur width de 60% pour l'élément article et 35% pour l'élément aside.
Puis quelques règles de padding et de margin pour une présentation plus agréable, avec une bordure de 2 pixels.
Le texte est aligné avec la propriété CSS text-align : justify.
Pour les titres, nous avons utilisé la balise générique <span> pour se conformer au canevas du TP.
Utilisation d'une pipette de couleurs pour récupérer les différentes couleurs de background présentes dans le canevas.